31:T15a7,viewof input = form(html`

Your Salary

Cost of Living Index*

Role Type

Search by Job Title/Keyword

Organization Type

Licensee

Age Range

Years of Experience

*Cost of living index is based on a normalized national average of 100. Search for your city's cost of living at advisorsmith.com

`)32:T52b,css = html` `33:T17e3,histogram = (data, color, title, side, salary, COL) => { const height = 0.5*width; const margin = ({top: 50, right: 30, bottom: 30, left: 40}); const median = !COL ? d3.median(data, d => +d.Q2) : d3.median(data, d => +d.COL); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); const svg2 = d3.create("svg") .attr("viewBox", [0, 0, 0, 0]); const range = !COL ? [0, 360000] : [80, 150]; const x = d3.scaleLinear() .domain(range) .range([margin.left, width - margin.right]); const binFunc = d3.histogram().domain(x.domain()).thresholds(x.ticks(40)); const bins = !COL ? binFunc(data.map(({ Q2 }) => +Q2)) : binFunc(data.map(({ COL }) => +COL)); const label = !COL ? 'Salary' : 'Cost of living index'; const text = !COL ? `Median Salary: ${d3.format("($,.2f")(median)}` : `Median Cost of Living Index: ${d3.format("(,.2f")(median)}`; const offset = !COL ? 3000 : 0.5; // const bins = d3.bin().thresholds(40)(data.map(({ Q2 }) => Q2)); const y = d3.scaleLinear() .domain([0, d3.max(bins, d => d.length)]).nice() .range([height - margin.bottom, margin.top]); const xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).ticks(width / 80 ).tickSizeOuter(0)) .call(g => g.append("text") .attr("x", width - margin.right) .attr("y", -4) .attr("fill", "currentColor") .attr("font-weight", "bold") .attr("text-anchor", "end") .attr("font-size", "1em") .text(label)); const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(height / 40)) .call(g => g.select(".domain").remove()) .call(g => g.select(".tick:last-of-type text").clone() .attr("x", 4) .attr("text-anchor", "start") .attr("font-weight", "bold") .attr("font-size", "1em") .text("Number of respondents")) d3.selectAll(".tick>text") .each(function(d, i){ d3.select(this).style("font-size", "1em"); }); svg.append("g") .attr("fill", color) .selectAll("rect") .data(bins) .join("rect") .attr("x", d => x(d.x0) + 1) .attr("width", d => Math.max(0, x(d.x1) - x(d.x0) - 1)) .attr("y", d => y(d.length)) .attr("height", d => y(0) - y(d.length)); svg.append("line") .attr("x1", x(median)) .attr("y1", 0 + margin.top) .attr("x2", x(median)) .attr("y2", height - margin.bottom) .style("stroke-width", 3) .style("stroke", "black") .attr("class", "touchable") .style("fill", "none"); // svg.append("line") // .attr("x1", x(median)) // .attr("y1", margin.top + 15) // .attr("x2", x(median + offset)) // .attr("y2", margin.top + 15) // .style("stroke-width", 1) // .style("stroke", "black") // .style("fill", "none"); // svg.append("text") // .attr("y", margin.top + 20) // .attr("x", d => side ? x(median + 2*offset) : x(median - 2*offset)) // .attr('text-anchor', side ? 'start' : 'end') // // .attr("font-weight", "bold") // .text(text); svg.append("line") .attr("x1", x(salary)) .attr("y1", 0 + margin.top) .attr("x2", x(salary)) .attr("y2", height - margin.bottom) .style("stroke-dasharray", ("6, 4")) .style("stroke-width", 3) .style("stroke", "black") .style("fill", "none") .attr("class", "touchable dotted"); // .attr("class", "dotted"); // svg.append("text") // .attr("y", margin.top + 50) // .attr("x", d => side ? x(salary + 2*offset) : x(salary - 2*offset)) // .attr('text-anchor', side ? 'start' : 'end') // // .attr("font-weight", "bold") // .text("Your salary: " + d3.format("($,.2f")(salary)); svg.append("text") .attr("x", 0) .attr("y", 0 + (margin.top / 2)) .attr("text-anchor", "left") .style("font-family", "Georgia") .style("font-size", "1.2em") // .style("font-weight", "bold") .text(title); // LEGEND const legendCoords = [300000, 320000] svg.append("line") .attr("x1", x(legendCoords[0])) .attr("y1", 0 + margin.top) .attr("x2", x(legendCoords[1])) .attr("y2", margin.top) .style("stroke-dasharray", ("6, 4")) .style("stroke-width", 3) .style("stroke", "black") .style("fill", "none"); svg.append("text") .attr("x", x(legendCoords[1]) + 10) .attr("y", 5 + margin.top) .attr("text-anchor", "left") .style("font-family", "Sans-serif") .style("font-size", "0.8em") // .style("font-weight", "bold") .text("Your salary"); svg.append("line") .attr("x1", x(legendCoords[0])) .attr("y1", 1.5*margin.top) .attr("x2", x(legendCoords[1])) .attr("y2", 1.5*margin.top) .style("stroke-width", 3) .style("stroke", "black") .style("fill", "none"); svg.append("text") .attr("x", x(legendCoords[1]) + 10) .attr("y", 5 + 1.5*margin.top) .attr("text-anchor", "left") .style("font-family", "Sans-serif") .style("font-size", "0.8em") // .style("font-weight", "bold") .text("Median salary"); svg.append("g") .style("font-size", "0.8em") .call(xAxis); svg.append("g") .style("font-size", "0.8em") .call(yAxis); const tooltip = svg.append("g"); const tooltipText = (e) => (e.attr("class") == "touchable dotted") ? `Your salary: ${d3.format("($,.2f")(input.salary)}` : `Median salary: ${d3.format("($,.2f")(median)}`; svg .selectAll('.touchable') .on('touchmove mousemove', function(event) { tooltip.call( callout, tooltipText(d3.select(this)) ); tooltip.attr("transform", `translate(${d3.pointer(event, this)[0]},${d3.pointer(event, this)[1]})`); d3.select(this) .style("stroke-width", 5) }) .on("touchend mouseleave", function() { tooltip.call(callout, null); d3.select(this) .style("stroke-width", 3) }); return data.length ? svg.node() : svg2.node(); }34:T4f2,callout = (g, value) => { if (!value) return g.style("display", "none"); g .style("display", null) .style("pointer-events", "none") .style("font", "12px sans-serif"); const path = g.selectAll("rect") .data([null]) .join("rect") .attr("fill", "white") .attr("width", 100) .attr("height", 25) // .attr("stroke", "black"); // const box = g.append('rect') // // .attr('x', x) // // .attr('y', y) // // .attr('width', w) // // .attr('height', h) // .attr('stroke', 'black') // .attr('fill', 'white'); const text = g.selectAll("text") .data([null]) .join("text") .call(text => text .selectAll("tspan") .data((value + "").split(/\n/)) .join("tspan") .attr("x", 0) .attr("y", (d, i) => `${i * 1.5}em`) // .style("font-weight", (_, i) => i ? null : "bold") .text(d => d)); const {x, y, width: w, height: h} = text.node().getBBox(); // box.attr("transform", `translate(${-w},${15 - y})`).attr('width', w).attr('height', w); text.attr("transform", `translate(${10},${16-y})`); path.attr("transform", `translate(${5},${-y})`).attr("width", w+10); // attr("d", `M${-w / 2 - 10},5H${w / 2 + 10}v${h + 20}h-${w}z`); }35:[{"id":"0c5eed4a759fb662ec6b4ff2fac14fa9d4a1fc9fcb9ff494ca0bff71e3d5ed9a34e144791cf6136899e1fac88ef793057dbbb2f7c54143855f310b6d4558692d","href":"https://static.observableusercontent.com/files/0c5eed4a759fb662ec6b4ff2fac14fa9d4a1fc9fcb9ff494ca0bff71e3d5ed9a34e144791cf6136899e1fac88ef793057dbbb2f7c54143855f310b6d4558692d","name":"mapset.csv","type":"text/csv","lastModified":1626475810336.555,"size":13611},{"id":"7cc1e71eebb585e3160c4b5df0b7b2b7979217ee506988ebb32a7f0bbf7dc86d30ddf59642c3606b3e15b94985d9f3fdc33eab8b2b48521b18eae75cf57e93f4","href":"https://static.observableusercontent.com/files/7cc1e71eebb585e3160c4b5df0b7b2b7979217ee506988ebb32a7f0bbf7dc86d30ddf59642c3606b3e15b94985d9f3fdc33eab8b2b48521b18eae75cf57e93f4","name":"SalarySurveyDataCleaned.xlsx","type":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","lastModified":1626975208661.581,"size":196838},{"id":"f51fded0a315a628ab86dc994fba23f07d59967cae7b97d50d2a2a082121e7fe6299cf3c270e4e478b506bbe76a5f1c2f036862ab42e7b035ae2c95ab6097c26","href":"https://static.observableusercontent.com/files/f51fded0a315a628ab86dc994fba23f07d59967cae7b97d50d2a2a082121e7fe6299cf3c270e4e478b506bbe76a5f1c2f036862ab42e7b035ae2c95ab6097c26","name":"SalarySurveyDataCleaned@5.csv","type":"text/csv","lastModified":1626975391549.311,"size":274459},{"id":"3a5a397754c55af15c7b872dc6cb860055e6faa7ed8ef16bbf7332d743b5b14d5c7e7add557002b577a208b82b55150432bf7bc2c564fa92f1f0864755606e71","href":"https://static.observableusercontent.com/files/3a5a397754c55af15c7b872dc6cb860055e6faa7ed8ef16bbf7332d743b5b14d5c7e7add557002b577a208b82b55150432bf7bc2c564fa92f1f0864755606e71","name":"SalarySurveyDataCleaned@2.csv","type":"text/csv","lastModified":1626662220186.836,"size":275673},{"id":"5fd7d4852a8c0e6e3a59555809e99e46bd8d5e86f3c8abe64f2bf265bd3ca14113ce6d10d9e1e48e31877db22a6ea419112a1b9c1cdf01cf40ae8d115bf9bff0","href":"https://static.observableusercontent.com/files/5fd7d4852a8c0e6e3a59555809e99e46bd8d5e86f3c8abe64f2bf265bd3ca14113ce6d10d9e1e48e31877db22a6ea419112a1b9c1cdf01cf40ae8d115bf9bff0","name":"SalarySurveyDataCleaned@1.csv","type":"text/csv","lastModified":1626310240562.891,"size":275389},{"id":"affa34e1566e0d04826ffe5068fd474f250cf72d6ed826adc0334ed22cb82b523c304cc4fdc8d2151d95b3a85e56be8f27b968d859be43232e054bbf862dc742","href":"https://static.observableusercontent.com/files/affa34e1566e0d04826ffe5068fd474f250cf72d6ed826adc0334ed22cb82b523c304cc4fdc8d2151d95b3a85e56be8f27b968d859be43232e054bbf862dc742","name":"SalarySurveyDataCleaned@4.csv","type":"text/csv","lastModified":1626901210644.064,"size":276413},{"id":"5d79ed5893127f28e9dc54bf400c7d45b5a8b9c40a6025cb23099ba864d33bf8a41792ed80dc16c6b621171ecaa1f6346e295e09e55c029d5f1c2cf3274846bf","href":"https://static.observableusercontent.com/files/5d79ed5893127f28e9dc54bf400c7d45b5a8b9c40a6025cb23099ba864d33bf8a41792ed80dc16c6b621171ecaa1f6346e295e09e55c029d5f1c2cf3274846bf","name":"SalarySurveyDataCleaned@7.csv","type":"text/csv","lastModified":1629774589783.874,"size":275803},{"id":"a7bfa8c44ae39f0ac02695817a6a47874eab6200f6119a0cc363ea8b396c8aa67f477d15e5b3199b51e00c7b17392b42091441924ae6f82ece7fdfbc22b9d6c8","href":"https://static.observableusercontent.com/files/a7bfa8c44ae39f0ac02695817a6a47874eab6200f6119a0cc363ea8b396c8aa67f477d15e5b3199b51e00c7b17392b42091441924ae6f82ece7fdfbc22b9d6c8","name":"SalarySurveyDataCleaned@8.csv","type":"text/csv","lastModified":1630376767733.507,"size":275645}] 2f:{"title":"Public Media Salary Survey Interactive \"Database\"","cells":[{"id":0,"value":"md`# Public Media Salary Survey Interactive \"Database\"`","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"// stuff = html`\n//

\n// ${viewof input}\n// ${datatable}\n//

\n//

\n// ${histogram(formFilter(data, {'Role': input.role}), 'steelblue', `Salary Distribution by Role`, 1, input.salary, 0)}\n//

\n// `","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":642,"value":"viewof input3 = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":188,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":397,"value":"statement = filtered.length ?\n html`

Your salary is higher than ${d3.format('.2%')(percentile(input.salary))} of similar survey respondents.

`\n :\n html`

Error: Your search returned no results! Try adjusting your filters again.

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":36,"value":"main = histogram(filtered, 'steelblue', `Salary Distribution`, 1, input.salary, 0)","pinned":true,"hidden":false,"mode":"ojs"},{"id":492,"value":"statement2 = filtered.length ? html`

Explore the filtered data

` : html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":289,"value":"datatable = Inputs.table(filtered.map(d => ({Role: d.Q1, Salary: parseInt(+d.Q2), Organization: d.Q5, Licensee: d.Q6})), {\n layout: 'fixed',\n rows: 25.5,\n width: {\n 'Role': '38%',\n 'Salary': '12%',\n 'Organization': '25%',\n 'Licensee': '25%',\n },\n format: {\n 'Salary': d3.format('($,')\n },\n align: {\n 'Salary': 'center'\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":684,"value":"chart1 = chart(data.filter(d => d.value < someView))","pinned":true,"hidden":false,"mode":"ojs"},{"id":685,"value":"someView = viewof input","pinned":true,"hidden":false,"mode":"ojs"},{"id":688,"value":"chart = (data) => {}","pinned":true,"hidden":false,"mode":"ojs"},{"id":61,"value":"formFilter = (data, fields) => {\n for (const key in fields) {\n if (key == 'COL'&& fields[key]) {\n let range = JSON.parse(fields[key]);\n data = data.filter(d => d[key] > range[0] && d[key] < range[1])\n } else if (key == 'Q12' && fields[key]) {\n let range = JSON.parse(fields[key]);\n data = data.filter(d => d[key] > range[0] && d[key] < range[1])\n } else if (key == 'Q1' && fields[key]) {\n data = data.filter(d => d[key].toLowerCase().includes(fields[key].toLowerCase()))\n } else {\n data = fields[key] ? data.filter(d => d[key].toString().trim() == fields[key].toString().trim()) : data;\n }\n }\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":382,"value":"percentile = (salary) => {\n const filtered = formFilter(data, {'Role': input.role, 'Q15': input.gender, 'Q16': input.race, 'age_group': input.age, 'Q5': input.org, 'Q6': input.licensee, 'COL': input.col});\n return filtered.filter(d => d.Q2 < salary).length / filtered.length\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":357,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":569,"value":"filtered = formFilter(data, {'Role': input.role, 'Q15': input.gender, 'Q16': input.race, 'age_group': input.age, 'Q5': input.org, 'Q6': input.licensee, 'COL': input.col, 'Q1': input.job, 'Q12': input.exp})","pinned":true,"hidden":false,"mode":"ojs"},{"id":176,"value":"data = d3.csvParse(await FileAttachment(\"SalarySurveyDataCleaned@8.csv\").text())","pinned":true,"hidden":false,"mode":"ojs"},{"id":591,"value":"mapdata = d3.csvParse(await FileAttachment(\"mapset.csv\").text())","pinned":true,"hidden":false,"mode":"ojs"},{"id":581,"value":"map = mapFunc(mapFilter(filtered), filtered)","pinned":true,"hidden":false,"mode":"ojs"},{"id":590,"value":"mapFilter = (filteredData) => {\n const cityState = (record) => record.Q7 + record.Code;\n return mapdata.map(d => ({\n ...d,\n Q2: d3.median(filteredData.filter(e => cityState(e) == d['City/State']).map(({ Q2 }) => parseInt(Q2))),\n NAME: filteredData.filter(e => cityState(e) == d['City/State']).length\n })).sort((a, b) => b.Q2 - a.Q2)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":600,"value":"mapFilter(filtered)","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"import {table} from \"@tmcw/tables\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"import {submit} from \"@mbostock/more-deliberate-inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"import {bar} from '@jacoblagesse/public-media-salary-survey-interactives'","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":578,"value":"import {mapFunc} from '@jacoblagesse/us-map-testing'","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}