31:Tb92,histogram = (data, color, title) => { const height = 500; const margin = ({top: 50, right: 20, bottom: 30, left: 40}); const median = d3.median(data, d => d.Q2); console.log(median) const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); // const bins = d3.bin().thresholds(40)(data.map(({ Q2 }) => Q2)); const x = d3.scaleLinear() .domain([0, 360000]) .range([margin.left, width - margin.right]); // to get constant bin sizes for comparing datasets const binFunc = d3.histogram().domain(x.domain()).thresholds(x.ticks(40)); const bins = binFunc(data.map(({ Q2 }) => Q2)); console.log(bins) 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") .text("Salary")); 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") .text("Number of respondents")) 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)) //<<== change your code here .attr("y1", 0 + margin.top) .attr("x2", x(median)) //<<== and here .attr("y2", height - margin.bottom) .style("stroke-width", 1) .style("stroke", "black") .style("fill", "none"); svg.append("line") .attr("x1", x(median)) //<<== change your code here .attr("y1", margin.top + 15) .attr("x2", x(median + 3000)) //<<== and here .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 => x(median + 5000)) .attr('text-anchor', 'start') // .attr("font-weight", "bold") .text("Median Salary: " + d3.format("($,.2f")(median)); svg.append("text") .attr("x", 0) .attr("y", 0 + (margin.top / 2)) .attr("text-anchor", "left") .style("font-size", "16px") .style("font-weight", "bold") .text(title); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); return svg.node(); }32:Tbab,histogram2 = (data, color, title) => { const height = 500; const margin = ({top: 50, right: 20, bottom: 30, left: 40}); const median = d3.median(data, d => d.COL); console.log(median) const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); // const bins = d3.bin().thresholds(40)(data.map(({ Q2 }) => Q2)); const x = d3.scaleLinear() .domain([80, 150]) .range([margin.left, width - margin.right]); // to get constant bin sizes for comparing datasets const binFunc = d3.histogram().domain(x.domain()).thresholds(x.ticks(40)); const bins = binFunc(data.map(({ COL }) => COL)); console.log(bins) 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") .text("Cost of living index")); 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") .text("Number of respondents")) 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)) //<<== change your code here .attr("y1", 0 + margin.top) .attr("x2", x(median)) //<<== and here .attr("y2", height - margin.bottom) .style("stroke-width", 1) .style("stroke", "black") .style("fill", "none"); svg.append("line") .attr("x1", x(median)) //<<== change your code here .attr("y1", margin.top + 15) .attr("x2", x(median + 0.5)) //<<== and here .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 => x(median + 1)) .attr('text-anchor', 'start') // .attr("font-weight", "bold") .text("Median Cost of Living Index: " + d3.format("(,.2f")(median)); svg.append("text") .attr("x", 0) .attr("y", 0 + (margin.top / 2)) .attr("text-anchor", "left") .style("font-size", "16px") .style("font-weight", "bold") .text(title); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); return svg.node(); }33:Tb8f,scatter = (data) => { const height = 600; const margin = ({top: 25, right: 20, bottom: 35, left: 50}); data = data.filter(d => d.Q12 && d.Q2 && d.Q2 < 300000); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); const x = d3.scaleLinear() .domain(d3.extent(data, d => +d.Q12)).nice() .range([margin.left, width - margin.right]); const y = d3.scaleLinear() .domain(d3.extent(data, d => +d.Q2)).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)) .call(g => g.select(".domain").remove()) .call(g => g.append("text") .attr("x", width) .attr("y", margin.bottom - 4) .attr("fill", "currentColor") .attr("font-weight", "bold") .attr("text-anchor", "end") .text("Years working in public media")); const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y)) .call(g => g.select(".domain").remove()) .call(g => g.append("text") .attr("x", -margin.left) .attr("y", 10) .attr("fill", "currentColor") .attr("font-weight", "bold") .attr("text-anchor", "start") .text("Salary")); const line = d3.line() .defined(d => !isNaN(d.value)) .x(d => x(d.Q12)) .y(d => y(d.Q2)) const grid = g => g .attr("stroke", "currentColor") .attr("stroke-opacity", 0.1) .call(g => g.append("g") .selectAll("line") .data(x.ticks()) .join("line") .attr("x1", d => 0.5 + x(d)) .attr("x2", d => 0.5 + x(d)) .attr("y1", margin.top) .attr("y2", height - margin.bottom)) .call(g => g.append("g") .selectAll("line") .data(y.ticks()) .join("line") .attr("y1", d => 0.5 + y(d)) .attr("y2", d => 0.5 + y(d)) .attr("x1", margin.left) .attr("x2", width - margin.right)); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); svg.append("g") .call(grid); svg.append("g") .attr("stroke", "steelblue") .attr("stroke-width", 1.5) .attr("fill", "none") .selectAll("circle") .data(data) .join("circle") .attr("cx", d => x(d.Q12)) .attr("cy", d => y(d.Q2)) .attr("r", 3); svg.append("path") .datum(data) .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line); // svg.append("g") // .attr("font-family", "sans-serif") // .attr("font-size", 10) // .selectAll("text") // .data(data) // .join("text") // .attr("dy", "0.35em") // .attr("x", d => x(d.x) + 7) // .attr("y", d => y(d.y)) // .text(d => d.name); return svg.node(); }34:T886,colorBar = (raw, xField, yField) => { const data = raw.sort(function(a, b) { return d3.descending(+a[xField], +b[xField]) }) const barHeight = 42 const margin = ({top: 30, right: 30, bottom: 10, left: 175}) const height = Math.ceil((data.length + 0.1) * barHeight) + margin.top + margin.bottom const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); console.log(d3.max(data, d => d[xField])) const x = d3.scaleLinear() .domain([0, d3.max(data, d => +d[xField])]) .range([margin.left, width - margin.right]) const y = d3.scaleBand() .domain(d3.range(data.length)) .rangeRound([margin.top, height - margin.bottom]) .padding(0.1) const format = x.tickFormat(20, data.format) const xAxis = g => g .attr("transform", `translate(0,${margin.top})`) .call(d3.axisTop(x).ticks(width / 80, data.format)) .call(g => g.select(".domain").remove()) const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).tickFormat(i => data[i][yField]).tickSizeOuter(0)) const color = d3.scaleOrdinal() .domain(data.map(d => d[yField])) .range(d3.quantize(t => d3.interpolateInferno(t * 0.8 + 0.1), data.length).reverse()) svg.append("g") .selectAll("rect") .data(data) .join("rect") .attr("fill", (d, i) => colorScale1(i)) .attr("x", x(0)) .attr("y", (d, i) => y(i)) .attr("width", d => x(d[xField]) - x(0)) .attr("height", y.bandwidth()); svg.append("g") .attr("fill", "white") .attr("text-anchor", "end") .attr("font-family", "sans-serif") .attr("font-size", 12) .selectAll("text") .data(data) .join("text") .attr("x", d => x(d[xField])) .attr("y", (d, i) => y(i) + y.bandwidth() / 2) .attr("dy", "0.35em") .attr("dx", -4) .text(d => d3.format("($,.2f")(d[xField])) .call(text => text.filter(d => x(d[xField]) - x(0) < 20) // short bars .attr("dx", +4) .attr("fill", "black") .attr("text-anchor", "start")); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); return svg.node(); }35:T7f1,bar3 = (raw, xField, yField, color, orderBy) => { const data = raw.filter(d => d[yField]).sort(function(a, b) { return d3.descending(a[orderBy], b[orderBy]) }) const barHeight = 42 const margin = ({top: 30, right: 30, bottom: 10, left: 175}) const height = Math.ceil((data.length + 0.1) * barHeight) + margin.top + margin.bottom const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); console.log(d3.max(data, d => d[xField])) const x = d3.scaleLinear() .domain([0, d3.max(data, d => +d[xField])]) .range([margin.left, width - margin.right]) const y = d3.scaleBand() .domain(d3.range(data.length)) .rangeRound([margin.top, height - margin.bottom]) .padding(0.1) const format = x.tickFormat(20, data.format) const xAxis = g => g .attr("transform", `translate(0,${margin.top})`) .call(d3.axisTop(x).ticks(width / 80, data.format)) .call(g => g.select(".domain").remove()) const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).tickFormat(i => data[i][yField]).tickSizeOuter(0)) svg.append("g") .selectAll("rect") .data(data) .join("rect") .attr("fill", color) .attr("x", x(0)) .attr("y", (d, i) => y(i)) .attr("width", d => x(d[xField]) - x(0)) .attr("height", y.bandwidth()); svg.append("g") .attr("fill", "white") .attr("text-anchor", "end") .attr("font-family", "sans-serif") .attr("font-size", 12) .selectAll("text") .data(data) .join("text") .attr("x", d => x(d[xField])) .attr("y", (d, i) => y(i) + y.bandwidth() / 2) .attr("dy", "0.35em") .attr("dx", -4) .text(d => d3.format("($,.2f")(d[xField])) .call(text => text.filter(d => x(d[xField]) - x(0) < 20) // short bars .attr("dx", +4) .attr("fill", "black") .attr("text-anchor", "start")); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); return svg.node(); }36:T7e7,bar2 = (raw, xField, yField, color) => { const data = raw.filter(d => d[yField]).sort(function(a, b) { return d3.descending(+a[xField], +b[xField]) }) const barHeight = 42 const margin = ({top: 30, right: 30, bottom: 10, left: 175}) const height = Math.ceil((data.length + 0.1) * barHeight) + margin.top + margin.bottom const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); console.log(d3.max(data, d => d[xField])) const x = d3.scaleLinear() .domain([0, d3.max(data, d => +d[xField])]) .range([margin.left, width - margin.right]) const y = d3.scaleBand() .domain(d3.range(data.length)) .rangeRound([margin.top, height - margin.bottom]) .padding(0.1) const format = x.tickFormat(20, data.format) const xAxis = g => g .attr("transform", `translate(0,${margin.top})`) .call(d3.axisTop(x).ticks(width / 80, data.format)) .call(g => g.select(".domain").remove()) const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).tickFormat(i => data[i][yField]).tickSizeOuter(0)) svg.append("g") .selectAll("rect") .data(data) .join("rect") .attr("fill", color) .attr("x", x(0)) .attr("y", (d, i) => y(i)) .attr("width", d => x(d[xField]) - x(0)) .attr("height", y.bandwidth()); svg.append("g") .attr("fill", "white") .attr("text-anchor", "end") .attr("font-family", "sans-serif") .attr("font-size", 12) .selectAll("text") .data(data) .join("text") .attr("x", d => x(d[xField])) .attr("y", (d, i) => y(i) + y.bandwidth() / 2) .attr("dy", "0.35em") .attr("dx", -4) .text(d => d3.format("(,.2f")(d[xField])) .call(text => text.filter(d => x(d[xField]) - x(0) < 20) // short bars .attr("dx", +4) .attr("fill", "black") .attr("text-anchor", "start")); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); return svg.node(); }37:T7e7,bar = (raw, xField, yField, color) => { const data = raw.filter(d => d[yField]).sort(function(a, b) { return d3.descending(+a[xField], +b[xField]) }) const barHeight = 42 const margin = ({top: 30, right: 30, bottom: 10, left: 175}) const height = Math.ceil((data.length + 0.1) * barHeight) + margin.top + margin.bottom const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); console.log(d3.max(data, d => d[xField])) const x = d3.scaleLinear() .domain([0, d3.max(data, d => +d[xField])]) .range([margin.left, width - margin.right]) const y = d3.scaleBand() .domain(d3.range(data.length)) .rangeRound([margin.top, height - margin.bottom]) .padding(0.1) const format = x.tickFormat(20, data.format) const xAxis = g => g .attr("transform", `translate(0,${margin.top})`) .call(d3.axisTop(x).ticks(width / 80, data.format)) .call(g => g.select(".domain").remove()) const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).tickFormat(i => data[i][yField]).tickSizeOuter(0)) svg.append("g") .selectAll("rect") .data(data) .join("rect") .attr("fill", color) .attr("x", x(0)) .attr("y", (d, i) => y(i)) .attr("width", d => x(d[xField]) - x(0)) .attr("height", y.bandwidth()); svg.append("g") .attr("fill", "white") .attr("text-anchor", "end") .attr("font-family", "sans-serif") .attr("font-size", 12) .selectAll("text") .data(data) .join("text") .attr("x", d => x(d[xField])) .attr("y", (d, i) => y(i) + y.bandwidth() / 2) .attr("dy", "0.35em") .attr("dx", -4) .text(d => d3.format("($,.2f")(d[xField])) .call(text => text.filter(d => x(d[xField]) - x(0) < 20) // short bars .attr("dx", +4) .attr("fill", "black") .attr("text-anchor", "start")); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); return svg.node(); }38:T650,pieChart = (data) => { const width = 800 const height = 400 const svg = d3 .create('svg') .attr('width', width) .attr('height', height); const radius = Math.min(width, height) / 2 const labelHeight = 18 const pie = d3.pie().value(d => d.Count) const pieData = pie(data) console.log(pieData) const arc = d3 .arc() .innerRadius(0) .outerRadius(radius) const chart = svg .append('g') .attr('transform', `translate(${radius},${radius})`); const color = d3.scaleOrdinal() .domain(data.map(d => d.name)) .range(d3.quantize(t => d3.interpolateSpectral(t * 0.8 + 0.1), data.length).reverse()) chart .selectAll(null) .data(pieData) .enter() .append('path') .attr('d', arc) .attr('fill', (d, i) => color(i)) .attr('stroke', 'white') .style('stroke-width', '1px'); const legend = svg .append('g') .attr('transform', `translate(${radius * 2 + 20},0)`); legend .selectAll(null) .data(pieData) .enter() .append('rect') .attr('y', (d, i) => labelHeight * i * 1.8) .attr('width', labelHeight) .attr('height', labelHeight) .attr('fill', (d, i) => color(i)) .attr('stroke', 'white') .style('stroke-width', '1px'); legend .selectAll(null) .data(pieData) .enter() .append('text') .text(d => d.data.Field + ': ' + d.data.Count) .attr('x', labelHeight * 1.2) .attr('y', (d, i) => labelHeight * i * 1.8 + labelHeight) .style('font-family', 'sans-serif') .style('font-size', `${labelHeight}px`); return svg.node(); }39:T7b3,singleBar = (raw) => { const margin = ({top: 0, right: 0, bottom: 0, left: 0}) const height = 80 const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .style("display", "block"); const x = d3.scaleLinear([0, 1], [margin.left, width - margin.right]) const formatPercent = x.tickFormat(null, "%") let value = 0; const data = raw.sort(function(a, b) { return d3.descending(+a.Count, +b.Count) }) const total = d3.sum(data, d => d.Count); const stack = data.map(d => ({ name: d.Field, salary: d.MedianSalary, value: +d.Count / total, startValue: value / total, endValue: (value += +d.Count) / total })); const color = d3.scaleOrdinal() .domain(stack.map(d => d.name)) .range(d3.quantize(t => d3.interpolateInferno(t * 0.8 + 0.1), data.length).reverse()) svg.append("g") .attr("stroke", "white") .selectAll("rect") .data(stack) .join("rect") .attr("fill", (d, i) => colorScale1(i)) .attr("x", d => x(d.startValue)) .attr("y", margin.top) .attr("width", d => x(d.endValue) - x(d.startValue)) .attr("height", height - margin.top - margin.bottom) .append("title") .text(d => `${d.name} ${formatPercent(d.value)}`); svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 12) .selectAll("text") .data(stack.filter(d => x(d.endValue) - x(d.startValue) > 200)) .join("text") .attr("fill", d => d3.lab(color(d.name)).l < 50 ? "white" : "black") .attr("transform", d => `translate(${x(d.startValue) + 6}, 6)`) .call(text => text.append("tspan") .attr("y", "0.7em") .attr("font-weight", "bold") .text(d => d.name)) .call(text => text.append("tspan") .attr("x", 0) .attr("y", "1.7em") .attr("fill-opacity", 0.7) .text(d => formatPercent(d.value))); return svg.node(); }3a:[{"id":"dd0afb0600866977dbc878a9239ad783414021513f6d59395fc8412b1ea4db79601f41484db8598a89deeeb08cc845651522c8d2d131f57798bbf6588fb15ed9","href":"https://static.observableusercontent.com/files/dd0afb0600866977dbc878a9239ad783414021513f6d59395fc8412b1ea4db79601f41484db8598a89deeeb08cc845651522c8d2d131f57798bbf6588fb15ed9","name":"Current Salary Survey_v2.csv","type":"text/csv","lastModified":1622925005243.244,"size":249038},{"id":"1fed834735c997a940743d0ac34494e721fc2e994e9510e4cd157acf6aee520a0738152ca19b2fb1f1450425962785b85dfd48955ee73a795998f4562650c17c","href":"https://static.observableusercontent.com/files/1fed834735c997a940743d0ac34494e721fc2e994e9510e4cd157acf6aee520a0738152ca19b2fb1f1450425962785b85dfd48955ee73a795998f4562650c17c","name":"ByRole@1.csv","type":"text/csv","lastModified":1624551748910.56,"size":450},{"id":"d07afcc6052b7e8c808209af241add0a75695782f73ed4264064f1ab9ad5a3968606b4e8b4caf7e725f178122e9e87b2b20d3d0cacfe14e877f20fe4d32f0e73","href":"https://static.observableusercontent.com/files/d07afcc6052b7e8c808209af241add0a75695782f73ed4264064f1ab9ad5a3968606b4e8b4caf7e725f178122e9e87b2b20d3d0cacfe14e877f20fe4d32f0e73","name":"SalarySurveyDataCleaned@1.csv","type":"text/csv","lastModified":1624551889126.381,"size":276083},{"id":"a9b628284c769ab683b41a84002bb5b1c2e5807e005dd5e3a5e724c31b5d5e233009faac11bc6ba2f06293fa64e23b9aab994de602da45416be6f07199e93c28","href":"https://static.observableusercontent.com/files/a9b628284c769ab683b41a84002bb5b1c2e5807e005dd5e3a5e724c31b5d5e233009faac11bc6ba2f06293fa64e23b9aab994de602da45416be6f07199e93c28","name":"ByRole@3.csv","type":"text/csv","lastModified":1624829562965.962,"size":507},{"id":"d69ca5e0bd91226c2b6835c8630fc1f1a47cba62ebfcfd1b8dd19fd5e081c41dd94477d93f0658db11cc30134821d474150936d15d2f7ecf97946c772db0e55b","href":"https://static.observableusercontent.com/files/d69ca5e0bd91226c2b6835c8630fc1f1a47cba62ebfcfd1b8dd19fd5e081c41dd94477d93f0658db11cc30134821d474150936d15d2f7ecf97946c772db0e55b","name":"SalarySurveyDataCleaned.csv","type":"text/csv","lastModified":1624244813332.229,"size":276282},{"id":"8c2569b3ab1a4b9b9e1a96292ac5fd208936fff58ac4964c9076cb657a1553ff8f6f344a9c4a5b73993d8b0e99d5f4123db4a07caa74684ee8726c038fae3b09","href":"https://static.observableusercontent.com/files/8c2569b3ab1a4b9b9e1a96292ac5fd208936fff58ac4964c9076cb657a1553ff8f6f344a9c4a5b73993d8b0e99d5f4123db4a07caa74684ee8726c038fae3b09","name":"ByRole.csv","type":"text/csv","lastModified":1624247322662.708,"size":341},{"id":"8635fa27a5dcd75b654524eaefbd4f93e89df9cfdf054df193d59e14f7c38a656a6f5124140d5826437bde1cf8bad1a0fb47d4ecdb81269c2716df28ef4e7c5d","href":"https://static.observableusercontent.com/files/8635fa27a5dcd75b654524eaefbd4f93e89df9cfdf054df193d59e14f7c38a656a6f5124140d5826437bde1cf8bad1a0fb47d4ecdb81269c2716df28ef4e7c5d","name":"ByRole@4.csv","type":"text/csv","lastModified":1624924680108.29,"size":476},{"id":"51a42e12119dcf2a9f38a2bb5333d6ae808da7205aad3b287bfcc563ba213ab1c71ed585da0f95552ad7489861da9ccb53670d333d5b2a86466bc6ed452aa515","href":"https://static.observableusercontent.com/files/51a42e12119dcf2a9f38a2bb5333d6ae808da7205aad3b287bfcc563ba213ab1c71ed585da0f95552ad7489861da9ccb53670d333d5b2a86466bc6ed452aa515","name":"ByRace.csv","type":"text/csv","lastModified":1624285869381.297,"size":338}] 2f:{"title":"Public Media Salary Survey","cells":[{"id":0,"value":"md`# Public Media Salary Survey`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":209,"value":"import {rangeSlider} from '@mootari/range-slider'","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"md`## Data Cleaning`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"data = d3.csvParse(await FileAttachment(\"SalarySurveyDataCleaned@1.csv\").text())","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"cleaned = data.map(d => {\n d.Q2 = +d.Q2.replace('$', '').replace(',', '').replace(' ', '')\n return d\n}).filter(d => d.Q2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":409,"value":"roleData = d3.csvParse(await FileAttachment(\"ByRole@4.csv\").text())","pinned":false,"hidden":false,"mode":"ojs"},{"id":469,"value":"raceData = d3.csvParse(await FileAttachment(\"ByRace.csv\").text())","pinned":true,"hidden":false,"mode":"ojs"},{"id":156,"value":"filter = (data, key, value) => {\n if (value == \"All\")\n return data\n return data.filter(d => d[key] == value);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":227,"value":"filterRange = (data, key, range) => {\n return data.filter(d => d > range[0] && d < range[1]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":357,"value":"fuzzyFilter = (data, key, value) => {\n return data.filter(d => d[key].toLowerCase().includes(value.toLowerCase()))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"unique = (data, key) => {\n return [...new Set(data.map(item => item[key]))]\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":281,"value":"groupByCity = (data) => {\n const cities = unique(data)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":299,"value":"mean = (data, key) => {\n let mapped = data.map(d => d[key]);\n return mapped.reduce((a, b) => a + b) / mapped.length;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":360,"value":"fuzzyFilter(data, \"Q1\", \"Producer\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":98,"value":"md`### Some questions:\n\n- One salary of $630,000 for role of motion graphic designer, possibly a typo by respondant? Should we remove this point?\n- Will have to do some normalization of city names to do any analysis by location`","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"md`## Interface`","pinned":false,"hidden":false,"mode":"ojs"},{"id":212,"value":"viewof salaryRange = rangeSlider({\n title: 'Salary Range',\n min: 0,\n max: 400000,\n value: [0, 400000],\n format: '$,.0f',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":296,"value":"md`Org type`","pinned":false,"hidden":false,"mode":"ojs"},{"id":250,"value":"viewof type = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":290,"value":"md`Gender`","pinned":false,"hidden":false,"mode":"ojs"},{"id":288,"value":"viewof gender = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"histogram(filter(cleaned.filter(d => d.Q2 > salaryRange[0] && d.Q2 < salaryRange[1]), \"Q5\", type), \"#ffc87c\", \"Reporter\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":264,"value":"scatter(filter(cleaned.filter(d => d.Q2 > salaryRange[0] && d.Q2 < salaryRange[1]), \"Q5\", type))","pinned":false,"hidden":false,"mode":"ojs"},{"id":413,"value":"bar(roleData, 'Q2', 'Role', 'steelblue')","pinned":true,"hidden":false,"mode":"ojs"},{"id":472,"value":"pieChart(raceData, \"Race\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":191,"value":"singleBar(raceData)","pinned":false,"hidden":false,"mode":"ojs"},{"id":572,"value":"colorBar(raceData, 'MedianSalary', 'Field')","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"md`## Charting`","pinned":false,"hidden":false,"mode":"ojs"},{"id":406,"value":"colorScale1 = (index) => {\n switch(index) {\n case 0:\n return \"steelblue\"\n break\n case 1:\n return \"#37bddb\"\n break\n case 2:\n return \"#b66ecc\"\n break\n case 3:\n return \"#e67ea2\"\n break\n case 4: \n return \"#ffc87c\"\n break\n case 5: \n return \"#f6f794\"\n break\n case 6:\n return \"#94db86\"\n default:\n return \"#49ad5b\"\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":45,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":609,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":567,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":631,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":628,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":398,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":454,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":527,"value":"$39","pinned":true,"hidden":false,"mode":"ojs"},{"id":232,"value":"md`## Interactivity`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3a","stdlib":"1","titling":"auto"}