28:null 29:["$","title",null,{"children":"District population compared to 2019 and 2021 membership | Zhi Keng He | Observable"}] 2f:T1089,_chart1 = { const label = 'age_'; const counts = Object.fromEntries( Object.entries(selectedData).filter( ([k, v]) => k.includes(label) && !k.includes('No Response') ) ); const sums = Object.values(counts).reduce( (p, c) => { c.forEach((v, i) => (p[i] += v)); return p; }, [0, 0, 0] ); const percents = Object.entries(counts).map(([k, v]) => { return { key: k.replace(label, ''), value: v.map((e, i) => e / sums[i]) }; }); const margin = { top: 20, right: 20, bottom: 10, left: 100 }; const barHeight = 60; const height = Math.ceil((percents.length + 0.1) * barHeight) + margin.top + margin.bottom; const svg = d3.create('svg').attr('viewBox', [0, 0, width, height]); const xScale = d3 .scaleLinear() .domain([0, .9]) .range([margin.left, width - margin.right]); const yScale = d3 .scaleBand() .domain(percents.map(i => i.key)) .rangeRound([margin.top, height - margin.bottom]) .padding(0.1); const xAxis = g => g .attr("transform", `translate(0,${margin.top})`) .call(d3.axisTop(xScale).ticks(width / 150, "%")) .call(g => g.select(".domain").remove()); const yAxis = g => g .attr("transform", `translate(${margin.left - 10},0)`) .call( d3 .axisLeft(yScale) .tickFormat(i => i) .tickSizeOuter(0) ) .style("font-size", "0.8rem"); const format = d3.format('.1f'); //board - 2019 svg .append('g') .attr('fill', '#c1b29b') .selectAll('rect') .data(percents) .join('rect') .attr('x', xScale(0)) .attr('y', (d, i) => yScale(d.key) + yScale.bandwidth() * .9) .attr("width", d => xScale(d.value[0]) - xScale(0)) .attr("height", yScale.bandwidth() * .4); //board - 2021 svg .append('g') .attr('fill', 'steelblue') .selectAll('rect') .data(percents) .join('rect') .attr('x', xScale(0)) .attr('y', (d, i) => yScale(d.key) + yScale.bandwidth() * .5) .attr("width", d => xScale(d.value[1]) - xScale(0)) .attr("height", yScale.bandwidth() * .4); //district proficiency line svg .append('g') .attr('stroke', '#E71919') .style("stroke-width", 4) .style("stroke-opacity", 0.6) .selectAll('line') .data(percents) .join('line') .attr('x1', d => xScale(d.value[2])) .attr('x2', d => xScale(d.value[2])) .attr('y1', (d, i) => yScale(d.key) + yScale.bandwidth() * 0.5) .attr('y2', (d, i) => yScale(d.key) + yScale.bandwidth() * 1.3); const text = svg .append("g") .attr("fill", "black") .attr("text-anchor", "start") .attr("font-family", "sans-serif") .attr("font-size", 12); //help labels text .append('g') .selectAll("text") .data(percents.slice(0, 1)) .join("text") .attr("class", "label-helper") .attr("x", d => xScale(d.value[1])) .attr("y", (d, i) => yScale(d.key) + yScale.bandwidth() * 0.4) .attr("dy", "0.25em") .attr("dx", 3) .text(d => 'Shift between 2019 to 2021'); text .append('g') .selectAll("text") .data(percents.slice(1, 2)) .join("text") .attr("class", "label-helper") .attr("x", d => xScale(d.value[2])) .attr("y", (d, i) => yScale(d.key) + yScale.bandwidth() * 1.3) .attr("dy", "0.25em") .attr("dx", 3) .text(d => '(equal with district)'); //change labels text .append('g') .selectAll("text") .data(percents) .join("text") .attr("class", "label") .attr("x", d => xScale(d.value[1])) .attr("y", (d, i) => yScale(d.key) + yScale.bandwidth() * 0.7) .attr("dy", "0.25em") .attr("dx", 3) .text(d => { const change = d.value[1] - d.value[0]; if (change > 0) { return `→${format(change * 100)}%`; } else if (change < 0) { return `←${format(change * -1 * 100)}%`; } else { return `${format(change * 100)}%`; } }) .call(text => text .filter(d => d.value[1] - d.value[0] < -0.8) // neg .attr("dx", -4) .attr("fill", "white") .attr("text-anchor", "end") ); svg.append('g').call(xAxis); svg.append('g').call(yAxis); return svg.node(); }30:Tf53,_chart2 = { const label = 'gender_'; const counts = Object.fromEntries( Object.entries(selectedData).filter( ([k, v]) => k.includes(label) && !k.includes('No Response') ) ); const sums = Object.values(counts).reduce( (p, c) => { c.forEach((v, i) => (p[i] += v)); return p; }, [0, 0, 0] ); const percents = Object.entries(counts).map(([k, v]) => { return { key: k.replace(label, ''), value: v.map((e, i) => e / sums[i]) }; }); const margin = { top: 20, right: 20, bottom: 10, left: 100 }; const barHeight = 60; const height = Math.ceil((percents.length + 0.1) * barHeight) + margin.top + margin.bottom; const svg = d3.create('svg').attr('viewBox', [0, 0, width, height]); const xScale = d3 .scaleLinear() .domain([0, .9]) .range([margin.left, width - margin.right]); const yScale = d3 .scaleBand() .domain(percents.map(i => i.key)) .rangeRound([margin.top, height - margin.bottom]) .padding(0.1); const xAxis = g => g .attr("transform", `translate(0,${margin.top})`) .call(d3.axisTop(xScale).ticks(width / 150, "%")) .call(g => g.select(".domain").remove()); const yAxis = g => g .attr("transform", `translate(${margin.left - 10},0)`) .call( d3 .axisLeft(yScale) .tickFormat(i => i) .tickSizeOuter(0) ) .style("font-size", "0.8rem"); const format = d3.format('.1f'); //board - 2019 svg .append('g') .attr('fill', '#c1b29b') .selectAll('rect') .data(percents) .join('rect') .attr('x', xScale(0)) .attr('y', (d, i) => yScale(d.key) + yScale.bandwidth() * .9) .attr("width", d => xScale(d.value[0]) - xScale(0)) .attr("height", yScale.bandwidth() * .4); //board - 2021 svg .append('g') .attr('fill', 'steelblue') .selectAll('rect') .data(percents) .join('rect') .attr('x', xScale(0)) .attr('y', (d, i) => yScale(d.key) + yScale.bandwidth() * .5) .attr("width", d => xScale(d.value[1]) - xScale(0)) .attr("height", yScale.bandwidth() * .4); //district proficiency line svg .append('g') .attr('stroke', '#E71919') .style("stroke-width", 4) .style("stroke-opacity", 0.6) .selectAll('line') .data(percents.slice(0, 2)) .join('line') .attr('x1', d => xScale(d.value[2])) .attr('x2', d => xScale(d.value[2])) .attr('y1', (d, i) => yScale(d.key) + yScale.bandwidth() * 0.5) .attr('y2', (d, i) => yScale(d.key) + yScale.bandwidth() * 1.3); const text = svg .append("g") .attr("fill", "black") .attr("text-anchor", "start") .attr("font-family", "sans-serif") .attr("font-size", 12); //help labels text .append('g') .selectAll("text") .data(percents.slice(0, 1)) .join("text") .attr("class", "label-helper") .attr("x", d => xScale(d.value[1])) .attr("y", (d, i) => yScale(d.key) + yScale.bandwidth() * 0.4) .attr("dy", "0.25em") .attr("dx", 3) .text(d => 'Shift between 2019 to 2021'); //change labels text .append('g') .selectAll("text") .data(percents) .join("text") .attr("class", "label") .attr("x", d => xScale(d.value[1])) .attr("y", (d, i) => yScale(d.key) + yScale.bandwidth() * 0.7) .attr("dy", "0.25em") .attr("dx", 3) .text(d => { const change = d.value[1] - d.value[0]; if (change > 0) { return `→${format(change * 100)}%`; } else if (change < 0) { return `←${format(change * -1 * 100)}%`; } else { return `${format(change * 100)}%`; } }) .call(text => text .filter(d => d.value[1] - d.value[0] < -0.05) // neg .attr("dx", -4) .attr("fill", "white") .attr("text-anchor", "end") ); svg.append('g').call(xAxis); svg.append('g').call(yAxis); return svg.node(); }31:T109c,_chart3 = { const label = "raceeh_"; const counts = Object.fromEntries( Object.entries(selectedData).filter( ([k, v]) => k.includes(label) && !k.includes("No Response") ) ); //use age to get count in board/district const counts1 = Object.fromEntries( Object.entries(selectedData).filter(([k, v]) => k.includes("age_")) ); const sums = Object.values(counts1).reduce( (p, c) => { c.forEach((v, i) => (p[i] += v)); return p; }, [0, 0, 0] ); const na = Object.entries(selectedData).filter( ([k, v]) => k === "No Response" )[0][1]; const percents = Object.entries(counts).map(([k, v]) => { return { key: k.replace(label, ""), value: v.map((e, i) => e / (sums[i] - na[i])) // count / respondent }; }); const margin = { top: 20, right: 20, bottom: 10, left: 120 }; const barHeight = 60; const height = Math.ceil((percents.length + 0.1) * barHeight) + margin.top + margin.bottom; const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); const xScale = d3 .scaleLinear() .domain([0, 0.9]) .range([margin.left, width - margin.right]); const yScale = d3 .scaleBand() .domain(percents.map((i) => i.key)) .rangeRound([margin.top, height - margin.bottom]) .padding(0.1); const xAxis = (g) => g .attr("transform", `translate(0,${margin.top})`) .call(d3.axisTop(xScale).ticks(width / 150, "%")) .call((g) => g.select(".domain").remove()); const yAxis = (g) => g .attr("transform", `translate(${margin.left - 10},0)`) .call( d3 .axisLeft(yScale) .tickFormat((i) => i) .tickSizeOuter(0) ) .style("font-size", "0.7rem"); const format = d3.format(".1f"); //board - 2019 svg .append("g") .attr("fill", "#c1b29b") .selectAll("rect") .data(percents) .join("rect") .attr("x", xScale(0)) .attr("y", (d, i) => yScale(d.key) + yScale.bandwidth() * 0.9) .attr("width", (d) => xScale(d.value[0]) - xScale(0)) .attr("height", yScale.bandwidth() * 0.4); //board - 2021 svg .append("g") .attr("fill", "steelblue") .selectAll("rect") .data(percents) .join("rect") .attr("x", xScale(0)) .attr("y", (d, i) => yScale(d.key) + yScale.bandwidth() * 0.5) .attr("width", (d) => xScale(d.value[1]) - xScale(0)) .attr("height", yScale.bandwidth() * 0.4); //district proficiency line svg .append("g") .attr("stroke", "#E71919") .style("stroke-width", 4) .style("stroke-opacity", 0.6) .selectAll("line") .data(percents) .join("line") .attr("x1", (d) => xScale(d.value[2])) .attr("x2", (d) => xScale(d.value[2])) .attr("y1", (d, i) => yScale(d.key) + yScale.bandwidth() * 0.5) .attr("y2", (d, i) => yScale(d.key) + yScale.bandwidth() * 1.3); const text = svg .append("g") .attr("fill", "black") .attr("text-anchor", "start") .attr("font-family", "sans-serif") .attr("font-size", 12); //help labels text .append("g") .selectAll("text") .data(percents.slice(0, 1)) .join("text") .attr("class", "label-helper") .attr("x", (d) => xScale(d.value[1])) .attr("y", (d, i) => yScale(d.key) + yScale.bandwidth() * 0.4) .attr("dy", "0.25em") .attr("dx", 3) .text((d) => "Shift between 2019 to 2021"); //change labels text .append("g") .selectAll("text") .data(percents) .join("text") .attr("class", "label") .attr("x", (d) => xScale(d.value[1])) .attr("y", (d, i) => yScale(d.key) + yScale.bandwidth() * 0.7) .attr("dy", "0.25em") .attr("dx", 3) .text((d) => { const change = d.value[1] - d.value[0]; if (change > 0) { return `→${format(change * 100)}%`; } else if (change < 0) { return `←${format(change * -1 * 100)}%`; } else { return `${format(change * 100)}%`; } }) .call((text) => text .filter((d) => d.value[1] - d.value[0] < -0.05) // neg .attr("dx", -4) .attr("fill", "white") .attr("text-anchor", "end") ); svg.append("g").call(xAxis); svg.append("g").call(yAxis); return svg.node(); }32:Tf2f,_chart4 = { const label = 'other_'; const counts = Object.fromEntries( Object.entries(selectedData).filter( ([k, v]) => k.includes(label) && !k.includes('No Response') ) ); //use age to get count in board/district const counts1 = Object.fromEntries( Object.entries(selectedData).filter(([k, v]) => k.includes('age_')) ); const sums = Object.values(counts1).reduce( (p, c) => { c.forEach((v, i) => (p[i] += v)); return p; }, [0, 0, 0] ); const na = Object.entries(selectedData).filter( ([k, v]) => k === 'No Response' )[0][1]; const percents = Object.entries(counts).map(([k, v]) => { return { key: k.replace(label, ''), value: v.map((e, i) => e / (sums[i] - na[i])) // count / respondent }; }); const margin = { top: 20, right: 20, bottom: 10, left: 100 }; const barHeight = 60; const height = Math.ceil((percents.length + 0.1) * barHeight) + margin.top + margin.bottom; const svg = d3.create('svg').attr('viewBox', [0, 0, width, height]); const xScale = d3 .scaleLinear() .domain([0, .9]) .range([margin.left, width - margin.right]); const yScale = d3 .scaleBand() .domain(percents.map(i => i.key)) .rangeRound([margin.top, height - margin.bottom]) .padding(0.1); const xAxis = g => g .attr("transform", `translate(0,${margin.top})`) .call(d3.axisTop(xScale).ticks(width / 150, "%")) .call(g => g.select(".domain").remove()); const yAxis = g => g .attr("transform", `translate(${margin.left - 10},0)`) .call( d3 .axisLeft(yScale) .tickFormat(i => i) .tickSizeOuter(0) ) .style("font-size", "0.7rem"); const format = d3.format('.1f'); //board - 2019 svg .append('g') .attr('fill', '#c1b29b') .selectAll('rect') .data(percents) .join('rect') .attr('x', xScale(0)) .attr('y', (d, i) => yScale(d.key) + yScale.bandwidth() * .9) .attr("width", d => xScale(d.value[0]) - xScale(0)) .attr("height", yScale.bandwidth() * .4); //board - 2021 svg .append('g') .attr('fill', 'steelblue') .selectAll('rect') .data(percents) .join('rect') .attr('x', xScale(0)) .attr('y', (d, i) => yScale(d.key) + yScale.bandwidth() * .5) .attr("width", d => xScale(d.value[1]) - xScale(0)) .attr("height", yScale.bandwidth() * .4); const text = svg .append("g") .attr("fill", "black") .attr("text-anchor", "start") .attr("font-family", "sans-serif") .attr("font-size", 12); //help labels934 text .append('g') .selectAll("text") .data(percents.slice(0, 1)) .join("text") .attr("class", "label-helper") .attr("x", d => xScale(d.value[1])) .attr("y", (d, i) => yScale(d.key) + yScale.bandwidth() * 0.4) .attr("dy", "0.25em") .attr("dx", 3) .text(d => 'Shift between 2019 to 2021'); //change labels text .append('g') .selectAll("text") .data(percents) .join("text") .attr("class", "label") .attr("x", d => xScale(d.value[1])) .attr("y", (d, i) => yScale(d.key) + yScale.bandwidth() * 0.7) .attr("dy", "0.25em") .attr("dx", 3) .text(d => { const change = d.value[1] - d.value[0]; if (change > 0) { return `→${format(change * 100)}%`; } else if (change < 0) { return `←${format(change * -1 * 100)}%`; } else { return `${format(change * 100)}%`; } }) .call(text => text .filter(d => d.value[1] - d.value[0] < -0.05) // neg .attr("dx", -4) .attr("fill", "white") .attr("text-anchor", "end") ); svg.append('g').call(xAxis); const yAxisG = svg.append('g').call(yAxis); setTimeout(() => { yAxisG.selectAll(".tick text").call(wrap, 70); }, 0); return svg.node(); }33:Td6c,{ const container = html`

`; const label = 'age_'; const age_data = Object.keys(data).map(key => { const d2 = data[key]; const counts = Object.fromEntries( Object.entries(d2).filter( ([k, v]) => k.includes(label) && !k.includes('No Response') ) ); const sums = Object.values(counts).reduce( (p, c) => { c.forEach((v, i) => (p[i] += v)); return p; }, [0, 0, 0] ); const percents = Object.entries(counts).map(([k, v]) => { return { key: k.replace(label, ''), value: v.map((e, i) => e / sums[i]) }; }); return percents; }); const format = d3.format('.1f'); const margin = { top: 50, right: 50, bottom: 10, left: 50 }; const cellSize = 45; const height = Math.ceil(age_data[0].length * (cellSize + 5)) + margin.top + margin.bottom; const svg = d3 .select(container) .append('svg') .attr('viewBox', [0, 0, width, height]); //create labels const x = svg .append('g') .selectAll('text') .data(Object.keys(data)) .join('text') .attr('y', (d, i) => cellSize / 2) .attr('x', (d, i) => i * cellSize + 5 * i + margin.left) .attr('dy', '.35em') .text(d => d); const y = svg .append('g') .selectAll('text') .data(age_data[0]) .join('text') .attr('y', (d, i) => i * cellSize + 5 * i + cellSize / 2 + margin.top) .text(d => d.key.replace('age_', '')); //create cells const districtGroups = svg .append('g') .attr('class', 'groups') .selectAll('g') .data(age_data) .join('g') .attr( 'transform', (d, i) => `translate(${i * cellSize + 5 * i + margin.left}, ${margin.top})` ); const colorScale = d3 .scaleQuantize() .domain([-15, 15]) .range(d3.schemeRdYlGn[9]); const cells = districtGroups .selectAll('rect') .data(d => d) .join('rect') .attr('class', 'cell') .attr('width', cellSize) .attr('height', cellSize) .attr('y', (d, i) => i * cellSize + 5 * i) .attr('fill', d => { //which one has the lower difference const d2021 = Math.abs(d.value[2] - d.value[1]); const d2019 = Math.abs(d.value[2] - d.value[0]); //by how much const diff = Math.abs(d2021 - d2019); if (d2021 < d2019) { return colorScale(diff * 100); } else { return colorScale(diff * 100 * -1); } }) .on('mouseover', (event, d) => tooltip.display(d, tooltipContents)) .on('mousemove', event => tooltip.move(event)) .on('mouseout', event => tooltip.hide(event)); const cellsText = districtGroups .selectAll('text') .data(d => d) .join('text') .attr('class', 'cell-text') .attr('text-anchor', 'middle') .text(d => { //which one has the lower difference const d2021 = Math.abs(d.value[2] - d.value[1]); const d2019 = Math.abs(d.value[2] - d.value[0]); //by how much const diff = Math.abs(d2021 - d2019); if (d2021 < d2019) { return format(diff * 100); } else { return format(diff * 100 * -1); } }) .attr('y', (d, i) => i * cellSize + 5 * i + cellSize / 2) .attr('x', (d, i) => cellSize / 2) .attr('dy', '.35em') .raise(); //set up tooltip const div = d3 .select(container) .append("div") .classed("tooltip", true); const tooltip = new Tooltip(div); return container; }34:Tda9,{ const container = html`

`; const label = 'gender_'; const age_data = Object.keys(data).map(key => { const d2 = data[key]; const counts = Object.fromEntries( Object.entries(d2).filter( ([k, v]) => k.includes(label) && !k.includes('No Response') ) ); const sums = Object.values(counts).reduce( (p, c) => { c.forEach((v, i) => (p[i] += v)); return p; }, [0, 0, 0] ); const percents = Object.entries(counts) .map(([k, v]) => { return { key: k.replace(label, ''), value: v.map((e, i) => e / sums[i]) }; }) .slice(0, 2); return percents; }); const format = d3.format('.1f'); const margin = { top: 50, right: 50, bottom: 10, left: 70 }; const cellSize = 45; const height = Math.ceil(age_data[0].length * (cellSize + 5)) + margin.top + margin.bottom; const svg = d3 .select(container) .append('svg') .attr('viewBox', [0, 0, width, height]); //create labels const x = svg .append('g') .selectAll('text') .data(Object.keys(data)) .join('text') .attr('y', (d, i) => cellSize / 2) .attr('x', (d, i) => i * cellSize + 5 * i + margin.left) .attr('dy', '.35em') .text(d => d); const y = svg .append('g') .selectAll('text') .data(age_data[0]) .join('text') .attr('y', (d, i) => i * cellSize + 5 * i + cellSize / 2 + margin.top) .text(d => d.key.replace('age_', '')); //create cells const districtGroups = svg .append('g') .attr('class', 'groups') .selectAll('g') .data(age_data) .join('g') .attr( 'transform', (d, i) => `translate(${i * cellSize + 5 * i + margin.left}, ${margin.top})` ); const colorScale = d3 .scaleQuantize() .domain([-15, 15]) .range(d3.schemeRdYlGn[9]); const cells = districtGroups .selectAll('rect') .data(d => d) .join('rect') .attr('class', 'cell') .attr('width', cellSize) .attr('height', cellSize) .attr('y', (d, i) => i * cellSize + 5 * i) .attr('fill', d => { //which one has the lower difference const d2021 = Math.abs(d.value[2] - d.value[1]); const d2019 = Math.abs(d.value[2] - d.value[0]); //by how much const diff = Math.abs(d2021 - d2019); if (d2021 < d2019) { return colorScale(diff * 100); } else { return colorScale(diff * 100 * -1); } }) .on('mouseover', (event, d) => tooltip.display(d, tooltipContents)) .on('mousemove', event => tooltip.move(event)) .on('mouseout', event => tooltip.hide(event)); const cellsText = districtGroups .selectAll('text') .data(d => d) .join('text') .attr('class', 'cell-text') .attr('text-anchor', 'middle') .text(d => { //which one has the lower difference const d2021 = Math.abs(d.value[2] - d.value[1]); const d2019 = Math.abs(d.value[2] - d.value[0]); //by how much const diff = Math.abs(d2021 - d2019); if (d2021 < d2019) { return format(diff * 100); } else { return format(diff * 100 * -1); } }) .attr('y', (d, i) => i * cellSize + 5 * i + cellSize / 2) .attr('x', (d, i) => cellSize / 2) .attr('dy', '.35em') .raise(); //set up tooltip const div = d3 .select(container) .append("div") .classed("tooltip", true); const tooltip = new Tooltip(div); return container; }35:Te72,function tooltipContents(datum) { const percents = [datum]; const margin = { top: 10, right: 20, bottom: 10, left: 10 }; const barHeight = 60; const width = 300; const height = Math.ceil((percents.length + 0.1) * barHeight) + margin.top + margin.bottom; const tooltip = html`

`; const svg = d3 .select(tooltip) .append('svg') .attr('width', width) .attr('height', height); const xScale = d3 .scaleLinear() .domain([0, .9]) .range([margin.left, width - margin.right]); const yScale = d3 .scaleBand() .domain(percents.map(i => i.key)) .rangeRound([margin.top, height - margin.bottom]) .padding(0.1); const format = d3.format('.1f'); //board - 2019 svg .append('g') .attr('fill', '#c1b29b') .selectAll('rect') .data(percents) .join('rect') .attr('x', xScale(0)) .attr('y', (d, i) => yScale(d.key) + yScale.bandwidth() * .9) .attr("width", d => xScale(d.value[0]) - xScale(0)) .attr("height", yScale.bandwidth() * .4); //board - 2021 svg .append('g') .attr('fill', '#90B4D2') .selectAll('rect') .data(percents) .join('rect') .attr('x', xScale(0)) .attr('y', (d, i) => yScale(d.key) + yScale.bandwidth() * .5) .attr("width", d => xScale(d.value[1]) - xScale(0)) .attr("height", yScale.bandwidth() * .4); //district proficiency line svg .append('g') .attr('stroke', '#E71919') .style("stroke-width", 4) .style("stroke-opacity", 0.6) .selectAll('line') .data(percents) .join('line') .attr('x1', d => xScale(d.value[2])) .attr('x2', d => xScale(d.value[2])) .attr('y1', (d, i) => yScale(d.key) + yScale.bandwidth() * 0.5) .attr('y2', (d, i) => yScale(d.key) + yScale.bandwidth() * 1.3); const text = svg .append("g") .attr("fill", "black") .attr("text-anchor", "start") .attr("font-family", "sans-serif") .attr("font-size", 12); //2020 labels text .append('g') .selectAll("text") .data(percents.slice(0, 1)) .join("text") .attr("class", "label-value") .attr("fill", "black") .attr("x", d => xScale(0)) .attr("y", (d, i) => yScale(d.key) + yScale.bandwidth() * 0.7) .attr("dy", "0.25em") .attr("dx", 1) .text(d => `${format(d.value[1] * 100)}%`); //2019 labels text .append('g') .selectAll("text") .data(percents.slice(0, 1)) .join("text") .attr("class", "label-value") .attr("fill", "black") .attr("x", d => xScale(0)) .attr("y", (d, i) => yScale(d.key) + yScale.bandwidth() * 1.1) .attr("dy", "0.25em") .attr("dx", 1) .text(d => `${format(d.value[0] * 100)}%`); //help labels text .append('g') .selectAll("text") .data(percents.slice(0, 1)) .join("text") .attr("class", "label-helper") .attr("x", d => xScale(d.value[1] > d.value[0] ? d.value[1] : d.value[0])) .attr("y", (d, i) => yScale(d.key) + yScale.bandwidth() * 0.6) .attr("dy", "0.25em") .attr("dx", 5) .text(d => 'Shift'); //change labels text .append('g') .selectAll("text") .data(percents) .join("text") .attr("class", "label") .attr("x", d => xScale(d.value[1] > d.value[0] ? d.value[1] : d.value[0])) .attr("y", (d, i) => yScale(d.key) + yScale.bandwidth() * 0.9) .attr("dy", "0.25em") .attr("dx", 5) .text(d => { const change = d.value[1] - d.value[0]; if (change > 0) { return `→${format(change * 100)}%`; } else if (change < 0) { return `←${format(change * -1 * 100)}%`; } else { return `${format(change * 100)}%`; } }); return tooltip.innerHTML; }36:T33e3,data = ({ Borough: { "age_16-25": [7, 22, 240072], "age_26-35": [47, 72, 360026], "age_36-45": [68, 114, 306325], "age_46-55": [94, 105, 298548], "age_56-65": [138, 136, 300340], "age_66-75": [144, 127, 207989], "age_76-85": [75, 73, 109129], "age_86+": [14, 15, 51342], "age_No Response": [76, 39, 0], gender_Male: [300, 359, 1094029], gender_Female: [224, 313, 1159829], gender_Transgender: [1, 0, 0], "gender_Gender non": [1, 3, 0], "gender_No Response": [137, 28, 0], raceeh_White: [202, 253, 876966], raceeh_Black: [107, 142, 451839], raceeh_Native: [5, 5, 23535], raceeh_Asian: [46, 106, 632017], "raceeh_Latinx/Hispanic": [49, 81, 641496], other_LGBTQ: [19, 29, 0], "other_Person with a Disability": [18, 29, 0], "other_Parent with a K-12 Child": [38, 103, 0], other_Immigrant: [36, 71, 0], other_Veteran: [21, 33, 0], "No Response": [183, 86, 0] }, "1": { "age_16-25": [0, 0, 13903], "age_26-35": [6, 8, 44081], "age_36-45": [7, 13, 24548], "age_46-55": [6, 4, 20898], "age_56-65": [9, 9, 18422], "age_66-75": [11, 8, 12582], "age_76-85": [5, 4, 7688], "age_86+": [1, 0, 2470], "age_No Response": [5, 5, 0], gender_Male: [19, 22, 81961], gender_Female: [18, 25, 84108], gender_Transgender: [0, 0, 0], "gender_Gender non": [0, 0, 0], "gender_No Response": [13, 4, 0], raceeh_White: [21, 19, 109680], raceeh_Black: [4, 6, 12469], raceeh_Native: [1, 2, 1496], raceeh_Asian: [2, 5, 28085], "raceeh_Latinx/Hispanic": [1, 5, 41632], other_LGBTQ: [6, 5, 0], "other_Person with a Disability": [3, 3, 0], "other_Parent with a K-12 Child": [2, 9, 0], other_Immigrant: [5, 8, 0], other_Veteran: [2, 2, 0], "No Response": [13, 7, 0] }, "2": { "age_16-25": [0, 2, 10971], "age_26-35": [8, 14, 30352], "age_36-45": [6, 7, 23328], "age_46-55": [11, 11, 18992], "age_56-65": [3, 7, 13268], "age_66-75": [9, 6, 9602], "age_76-85": [3, 1, 5657], "age_86+": [1, 0, 2874], "age_No Response": [9, 2, 0], gender_Male: [16, 19, 66971], gender_Female: [19, 28, 69087], gender_Transgender: [0, 0, 0], "gender_Gender non": [0, 1, 0], "gender_No Response": [15, 2, 0], raceeh_White: [18, 20, 69158], raceeh_Black: [2, 5, 4595], raceeh_Native: [0, 0, 1177], raceeh_Asian: [5, 12, 54908], "raceeh_Latinx/Hispanic": [5, 11, 41573], other_LGBTQ: [3, 6, 0], "other_Person with a Disability": [1, 1, 0], "other_Parent with a K-12 Child": [3, 5, 0], other_Immigrant: [3, 4, 0], other_Veteran: [1, 0, 0], "No Response": [17, 2, 0] }, "3": { "age_16-25": [0, 1, 20571], "age_26-35": [3, 3, 28286], "age_36-45": [7, 10, 26499], "age_46-55": [9, 11, 23176], "age_56-65": [9, 6, 20860], "age_66-75": [8, 8, 15197], "age_76-85": [8, 7, 7046], "age_86+": [2, 3, 3711], "age_No Response": [4, 1, 0], gender_Male: [24, 28, 91870], gender_Female: [18, 22, 83405], gender_Transgender: [0, 0, 0], "gender_Gender non": [1, 0, 0], "gender_No Response": [7, 0, 0], raceeh_White: [9, 14, 70651], raceeh_Black: [14, 14, 10535], raceeh_Native: [0, 0, 2125], raceeh_Asian: [4, 10, 34913], "raceeh_Latinx/Hispanic": [9, 8, 113321], other_LGBTQ: [1, 3, 0], "other_Person with a Disability": [1, 2, 0], "other_Parent with a K-12 Child": [3, 8, 0], other_Immigrant: [3, 6, 0], other_Veteran: [1, 3, 0], "No Response": [11, 3, 0] }, "4": { "age_16-25": [2, 1, 17857], "age_26-35": [7, 13, 29268], "age_36-45": [8, 9, 23318], "age_46-55": [4, 7, 19550], "age_56-65": [4, 3, 17464], "age_66-75": [10, 8, 9243], "age_76-85": [2, 4, 6440], "age_86+": [1, 0, 3152], "age_No Response": [7, 5, 0], gender_Male: [15, 21, 78654], gender_Female: [17, 26, 77420], gender_Transgender: [0, 0, 0], "gender_Gender non": [0, 0, 0], "gender_No Response": [13, 3, 0], raceeh_White: [7, 12, 39838], raceeh_Black: [7, 6, 13503], raceeh_Native: [0, 0, 1942], raceeh_Asian: [3, 14, 58377], "raceeh_Latinx/Hispanic": [9, 13, 74837], other_LGBTQ: [1, 1, 0], "other_Person with a Disability": [0, 1, 0], "other_Parent with a K-12 Child": [2, 7, 0], other_Immigrant: [0, 10, 0], other_Veteran: [0, 1, 0], "No Response": [16, 7, 0] }, "5": { "age_16-25": [0, 1, 19312], "age_26-35": [3, 5, 24923], "age_36-45": [5, 8, 24749], "age_46-55": [6, 8, 23021], "age_56-65": [10, 9, 20385], "age_66-75": [13, 13, 13258], "age_76-85": [4, 3, 6862], "age_86+": [1, 2, 3271], "age_No Response": [4, 1, 0], gender_Male: [25, 31, 80754], gender_Female: [12, 17, 85141], gender_Transgender: [0, 0, 0], "gender_Gender non": [0, 0, 0], "gender_No Response": [9, 2, 0], raceeh_White: [24, 33, 132145], raceeh_Black: [0, 0, 8719], raceeh_Native: [1, 0, 1267], raceeh_Asian: [0, 4, 15748], "raceeh_Latinx/Hispanic": [4, 9, 69782], other_LGBTQ: [1, 1, 0], "other_Person with a Disability": [2, 1, 0], "other_Parent with a K-12 Child": [4, 10, 0], other_Immigrant: [1, 4, 0], other_Veteran: [4, 3, 0], "No Response": [13, 5, 0] }, "6": { "age_16-25": [1, 2, 5559], "age_26-35": [8, 7, 15824], "age_36-45": [4, 14, 16580], "age_46-55": [8, 7, 14215], "age_56-65": [7, 9, 16065], "age_66-75": [12, 7, 10459], "age_76-85": [4, 3, 6409], "age_86+": [1, 0, 3173], "age_No Response": [4, 1, 0], gender_Male: [22, 28, 51277], gender_Female: [20, 20, 54309], gender_Transgender: [0, 0, 0], "gender_Gender non": [0, 1, 0], "gender_No Response": [7, 1, 0], raceeh_White: [25, 28, 65342], raceeh_Black: [1, 4, 3036], raceeh_Native: [0, 0, 1096], raceeh_Asian: [2, 6, 35097], "raceeh_Latinx/Hispanic": [4, 8, 17715], other_LGBTQ: [4, 6, 0], "other_Person with a Disability": [5, 5, 0], "other_Parent with a K-12 Child": [5, 14, 0], other_Immigrant: [3, 8, 0], other_Veteran: [2, 2, 0], "No Response": [10, 3, 0] }, "7": { "age_16-25": [0, 0, 20484], "age_26-35": [1, 2, 31379], "age_36-45": [5, 4, 29952], "age_46-55": [5, 6, 34894], "age_56-65": [16, 15, 34001], "age_66-75": [14, 15, 27743], "age_76-85": [5, 3, 16666], "age_86+": [1, 3, 7702], "age_No Response": [3, 2, 0], gender_Male: [34, 36, 111725], gender_Female: [11, 13, 128144], gender_Transgender: [0, 0, 0], "gender_Gender non": [0, 0, 0], "gender_No Response": [5, 1, 0], raceeh_White: [17, 18, 72095], raceeh_Black: [2, 2, 6374], raceeh_Native: [0, 0, 1406], raceeh_Asian: [5, 13, 138927], "raceeh_Latinx/Hispanic": [1, 1, 43179], other_LGBTQ: [1, 1, 0], "other_Person with a Disability": [2, 2, 0], "other_Parent with a K-12 Child": [4, 4, 0], other_Immigrant: [7, 10, 0], other_Veteran: [2, 2, 0], "No Response": [13, 15, 0] }, "8": { "age_16-25": [0, 0, 22428], "age_26-35": [1, 3, 23454], "age_36-45": [1, 5, 20692], "age_46-55": [5, 6, 20172], "age_56-65": [14, 11, 21793], "age_66-75": [9, 9, 15545], "age_76-85": [10, 10, 8079], "age_86+": [5, 2, 4012], "age_No Response": [5, 4, 0], gender_Male: [23, 28, 80506], gender_Female: [14, 19, 87965], gender_Transgender: [0, 0, 0], "gender_Gender non": [0, 0, 0], "gender_No Response": [13, 3, 0], raceeh_White: [18, 23, 62259], raceeh_Black: [4, 5, 32255], raceeh_Native: [0, 0, 2056], raceeh_Asian: [5, 8, 57126], "raceeh_Latinx/Hispanic": [1, 1, 32211], other_LGBTQ: [0, 1, 0], "other_Person with a Disability": [0, 0, 0], "other_Parent with a K-12 Child": [1, 4, 0], other_Immigrant: [0, 1, 0], other_Veteran: [0, 0, 0], "No Response": [20, 13, 0] }, "9": { "age_16-25": [0, 3, 19286], "age_26-35": [1, 3, 24608], "age_36-45": [0, 4, 18184], "age_46-55": [11, 11, 20050], "age_56-65": [8, 7, 21042], "age_66-75": [10, 9, 12121], "age_76-85": [5, 7, 4744], "age_86+": [0, 2, 1154], "age_No Response": [4, 5, 0], gender_Male: [22, 27, 72272], gender_Female: [10, 21, 71484], gender_Transgender: [0, 0, 0], "gender_Gender non": [0, 0, 0], "gender_No Response": [7, 3, 0], raceeh_White: [14, 16, 47672], raceeh_Black: [0, 1, 14874], raceeh_Native: [0, 0, 1898], raceeh_Asian: [5, 8, 43853], "raceeh_Latinx/Hispanic": [4, 7, 63843], other_LGBTQ: [0, 1, 0], "other_Person with a Disability": [0, 1, 0], "other_Parent with a K-12 Child": [0, 6, 0], other_Immigrant: [2, 3, 0], other_Veteran: [2, 2, 0], "No Response": [11, 7, 0] }, "10": { "age_16-25": [1, 3, 12074], "age_26-35": [0, 4, 16342], "age_36-45": [2, 3, 16496], "age_46-55": [3, 5, 14923], "age_56-65": [12, 9, 19043], "age_66-75": [16, 13, 14114], "age_76-85": [8, 9, 4932], "age_86+": [0, 1, 2440], "age_No Response": [4, 3, 0], gender_Male: [21, 25, 57226], gender_Female: [18, 22, 61342], gender_Transgender: [0, 0, 0], "gender_Gender non": [0, 0, 0], "gender_No Response": [7, 3, 0], raceeh_White: [14, 17, 46773], raceeh_Black: [8, 10, 23901], raceeh_Native: [1, 1, 1828], raceeh_Asian: [0, 3, 36924], "raceeh_Latinx/Hispanic": [3, 4, 33978], other_LGBTQ: [1, 2, 0], "other_Person with a Disability": [1, 3, 0], "other_Parent with a K-12 Child": [1, 3, 0], other_Immigrant: [0, 3, 0], other_Veteran: [2, 4, 0], "No Response": [11, 5, 0] }, "11": { "age_16-25": [1, 2, 10351], "age_26-35": [1, 3, 13512], "age_36-45": [8, 11, 13883], "age_46-55": [7, 8, 15959], "age_56-65": [7, 10, 19748], "age_66-75": [7, 7, 14764], "age_76-85": [5, 4, 6351], "age_86+": [1, 1, 2536], "age_No Response": [8, 4, 0], gender_Male: [19, 26, 55340], gender_Female: [17, 23, 59222], gender_Transgender: [0, 0, 0], "gender_Gender non": [0, 0, 0], "gender_No Response": [9, 1, 0], raceeh_White: [19, 27, 55197], raceeh_Black: [1, 1, 8944], raceeh_Native: [0, 0, 911], raceeh_Asian: [4, 10, 48230], "raceeh_Latinx/Hispanic": [3, 4, 13876], other_LGBTQ: [0, 1, 0], "other_Person with a Disability": [2, 3, 0], "other_Parent with a K-12 Child": [5, 13, 0], other_Immigrant: [5, 5, 0], other_Veteran: [1, 5, 0], "No Response": [14, 8, 0] }, "12": { "age_16-25": [0, 0, 29275], "age_26-35": [2, 2, 35671], "age_36-45": [7, 12, 30842], "age_46-55": [7, 7, 31032], "age_56-65": [12, 15, 32289], "age_66-75": [4, 5, 21531], "age_76-85": [6, 6, 9755], "age_86+": [0, 0, 5236], "age_No Response": [11, 3, 0], gender_Male: [17, 18, 110759], gender_Female: [21, 28, 130516], gender_Transgender: [0, 0, 0], "gender_Gender non": [0, 1, 0], "gender_No Response": [11, 3, 0], raceeh_White: [1, 2, 17684], raceeh_Black: [32, 41, 149109], raceeh_Native: [1, 1, 2582], raceeh_Asian: [3, 5, 37938], "raceeh_Latinx/Hispanic": [0, 0, 38196], other_LGBTQ: [0, 0, 0], "other_Person with a Disability": [0, 3, 0], "other_Parent with a K-12 Child": [4, 4, 0], other_Immigrant: [3, 4, 0], other_Veteran: [2, 3, 0], "No Response": [11, 1, 0] }, "13": { "age_16-25": [0, 2, 23010], "age_26-35": [6, 3, 28433], "age_36-45": [4, 8, 22295], "age_46-55": [6, 5, 28502], "age_56-65": [11, 11, 29720], "age_66-75": [13, 12, 20763], "age_76-85": [6, 7, 10961], "age_86+": [0, 1, 6417], "age_No Response": [4, 1, 0], gender_Male: [27, 27, 94291], gender_Female: [12, 22, 106369], gender_Transgender: [1, 0, 0], "gender_Gender non": [0, 0, 0], "gender_No Response": [10, 1, 0], raceeh_White: [6, 8, 29785], raceeh_Black: [19, 27, 114589], raceeh_Native: [0, 0, 2511], raceeh_Asian: [8, 8, 37125], "raceeh_Latinx/Hispanic": [1, 2, 26479], other_LGBTQ: [0, 0, 0], "other_Person with a Disability": [1, 2, 0], "other_Parent with a K-12 Child": [2, 6, 0], other_Immigrant: [2, 3, 0], other_Veteran: [0, 3, 0], "No Response": [7, 4, 0] }, "14": { "age_16-25": [2, 5, 14991], "age_26-35": [0, 2, 13893], "age_36-45": [4, 6, 14959], "age_46-55": [6, 9, 13164], "age_56-65": [16, 15, 16240], "age_66-75": [8, 7, 11067], "age_76-85": [4, 5, 7539], "age_86+": [0, 0, 3194], "age_No Response": [4, 2, 0], gender_Male: [16, 23, 60423], gender_Female: [17, 27, 61317], gender_Transgender: [0, 0, 0], "gender_Gender non": [0, 0, 0], "gender_No Response": [11, 1, 0], raceeh_White: [9, 16, 58687], raceeh_Black: [13, 20, 48936], raceeh_Native: [1, 1, 1240], raceeh_Asian: [0, 0, 4766], "raceeh_Latinx/Hispanic": [4, 8, 30874], other_LGBTQ: [1, 1, 0], "other_Person with a Disability": [0, 1, 0], "other_Parent with a K-12 Child": [2, 10, 0], other_Immigrant: [2, 2, 0], other_Veteran: [2, 3, 0], "No Response": [16, 6, 0] } })37:T922,districts = [ { id: 1, name: 'Astoria, Astoria Heights, Queensbridge, Dutch Kills, Long Island City, Ravenswood, Rikers Island (BX), Steinway', members19: 50, members21: 51 }, { id: 2, name: 'Blissville, Hunters Point, Long Island City, Sunnyside, Sunnyside Gardens, Woodside', members19: 50, members21: 50 }, { id: 3, name: 'East Elmhurst, Jackson Heights, North Corona ', members19: 50, members21: 50 }, { id: 4, name: 'Corona, Corona Heights, Elmhurst, Lefrak City ', members19: 49, members21: 50 }, { id: 5, name: 'Glendale, Maspeth, Middle Village, Ridgewood ', members19: 46, members21: 50 }, { id: 6, name: 'Forest Hills, Forest Hills Gardens, Rego Park ', members19: 49, members21: 50 }, { id: 7, name: 'Auburndale, Bay Terrace, Beechhurst, Clearview, College Point, Downtown Flushing, East Flushing, Flushing, Malba, Murray Hill, Queensboro Hill, Waldheim, Whitestone ', members19: 50, members21: 50 }, { id: 8, name: 'Briarwood, Fresh Meadows, Hillcrest, Holliswood, Jamaica, Jamaica Estates, Jamaica Hills, Kew Gardens Hills, Pomonok, Utopia ', members19: 50, members21: 50 }, { id: 9, name: 'Kew Gardens, Ozone Park, Richmond Hill, Woodhaven ', members19: 39, members21: 51 }, { id: 10, name: 'Howard Beach, Lindenwood, Old Howard Beach, Ozone Park, South Ozone Park ', members19: 46, members21: 50 }, { id: 11, name: 'Auburndale, Bayside, Douglaston, Hollis Hills, Little Neck, Oakland Gardens ', members19: 45, members21: 50 }, { id: 12, name: 'Hollis, Jamaica, Jamaica Center, North Springfield Gardens, Rochdale, South Jamaica, St. Albans', members19: 49, members21: 50 }, { id: 13, name: 'Bellaire, Bellerose, Brookville, Cambria Heights, Floral Park, Glen Oaks, Laurelton, New Hyde Park, Queens Village, Rosedale, Springfield Gardens ', members19: 50, members21: 50 }, { id: 14, name: 'Arverne, Bayswater, Belle Harbor, Breezy Point, Broad Channel, Edgemere, Far Rockaway, Hammels, Neponsit, Rockaway Park, The Rockaways, Roxbury, Seaside, Somerville ', members19: 44, members21: 51 } ]38:T54a,//mod from https://observablehq.com/@clhenrick/tooltip-component class Tooltip { constructor(selection) { if (!selection || !selection.size()) { throw "Requires a tooltip div element selection"; } this._selection = selection; } move(event) { if (!event) return; const margin = 20; const { clientX: x, clientY: y } = event; const { width, height } = this.selection.node().getBoundingClientRect(); const left = this.clamp( margin, x - width / 2, window.innerWidth - width - margin ); const top = window.innerHeight > y + margin + height ? y + margin : y - height - margin; this.selection.style("top", `${top}px`).style("left", `${left}px`); } display(datum, callback) { if (!callback || typeof callback !== "function") { throw "ToolTip.display requires a callback function that returns an HTML string"; } this.selection.style("display", "block").html(callback(datum)); } hide() { this.selection.style("display", "none").html(""); } clamp(min, d, max) { return Math.max(min, Math.min(max, d)); } get selection() { return this._selection; } set selection(sel) { if (sel && sel.size()) { this._selection = sel; } else { throw "selection must be a non-empty selected element"; } } }39:[] 2c:{"id":"1327e2463518195e","slug":null,"title":"District population compared to 2019 and 2021 membership","thumbnail":"34a04b71666a7653a0a63bc17687225df01ce42c641e576b934f7697de0c6e08","access_level":"public","create_time":"$D2021-04-04T17:06:03.263Z","update_time":"$D2022-05-10T23:58:29.482Z","view_time":null,"first_public_time":"$D2022-12-15T15:24:49.522Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"16506c8d98fe0d4f","login":"zhik","name":"Zhi Keng He","avatar_url":"https://avatars-next.observableusercontent.com/1921c3cb8ffa82cde953aa4417dc8b601dbd05384629c1f8ecf0544be068a204","tier":"starter_2024"},"version":743,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"215e59083f0e53f8","login":"zhik","name":"Zhi Keng He","avatar_url":"https://avatars-next.observableusercontent.com/1921c3cb8ffa82cde953aa4417dc8b601dbd05384629c1f8ecf0544be068a204","tier":null}],"members":[{"type":"individual","id":"215e59083f0e53f8","login":"zhik","name":"Zhi Keng He","avatar_url":"https://avatars-next.observableusercontent.com/1921c3cb8ffa82cde953aa4417dc8b601dbd05384629c1f8ecf0544be068a204","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"District population compared to 2019 and 2021 membership","cells":[{"id":0,"value":"md`# District population compared to 2019 and 2021 membership`","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"viewof selectedDistrict = Select(Object.keys(data), {\n label: 'Community Board/District',\n value: 'Borough'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"{\n if (selectedDistrict === \"Borough\") {\n return md`\n# Queens:\n\n*Board Members in 2019: ${districts.reduce(\n (sum, district) => (sum += district.members19),\n 0\n )} /700*\n\n*Expected Board Members in 2021: ${districts.reduce(\n (sum, district) => (sum += district.members21),\n 0\n )} /700*\n`;\n } else {\n const { members19, members21, name, id } = districts.find(\n (district) => district.id === +selectedDistrict\n );\n return md`\n# Community Board/ District ${id}\n*${name}* \n\n*Members on the Board in 2019: ${members19} /50*\n\n*Members on the Board in 2021: ${members21} /50*`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"html`\n\n

Legend

% of All Members 2021

2019

% of Borough/District Population

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"md`## Age`","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"md`\n*Note:* Age is recorded by the Census Bureau (borough/district data) slightly different from how board data was collected, so age categories are a year off. *(ie: 15-24 vs 16-25; 25-34 vs 26-35)*. The district data calculates percentage from the population ages 15+.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"{\n const label = 'age_';\n\n const na = Object.entries(selectedData).filter(\n ([k, v]) => k.includes(label) && k.includes('No Response')\n )[0][1];\n\n return md`There were **${na[0]}** *Prefer Not to Answer/No responses* in 2019 and **${na[1]}** in 2021. Percentage calculation uses only filled responses.`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"md`## Sex and Gender`","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"md`\n*Note:* Gender is not recorded by the Census Bureau (borough/district data).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":158,"value":"{\n const label = 'gender_';\n\n const na = Object.entries(selectedData).filter(\n ([k, v]) => k.includes(label) && k.includes('No Response')\n )[0][1];\n\n return md`There were **${na[0]}** *Prefer Not to Answer/No responses* in 2019 and **${na[1]}** in 2021. Percentage calculation uses only filled responses.`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"md`## Race and Ethnicity`","pinned":false,"hidden":false,"mode":"ojs"},{"id":171,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"md`\n*Note1:* Both district and board data show those who identify as the race alone or in combination with one or more other races. The Latinx/Hispanic includes people of any race.\n\n*Note2*: 'Asian American' selection was not included in the 2021 survey, instead East Asian/Pacific Islander and South Asian were used to calculate Asian population in both 2021 and 2019 surveys. Numbers might be off due to confusion in 2019.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"{\n const na = Object.entries(selectedData).filter(\n ([k, v]) => k === 'No Response'\n )[0][1];\n\n return md`There were **${na[0]}** *Prefer Not to Answer/No responses* in 2019 and **${na[1]}** in 2021. Percentage calculation uses only filled responses.`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":207,"value":"md`## Other Demographics`","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":256,"value":"{\n const na = Object.entries(selectedData).filter(\n ([k, v]) => k === 'No Response'\n )[0][1];\n\n return md`There were **${na[0]}** *Prefer Not to Answer/No responses* in 2019 and **${na[1]}** in 2021. Percentage calculation uses only filled responses.`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":270,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":272,"value":"md`# Summary Tables`","pinned":false,"hidden":false,"mode":"ojs"},{"id":716,"value":"md`Ignore: work in progress`","pinned":false,"hidden":false,"mode":"ojs"},{"id":528,"value":"md`### Age`","pinned":false,"hidden":false,"mode":"ojs"},{"id":520,"value":"legend({\n color: d3.scaleQuantize([-15, 15], d3.schemeRdYlGn[9]),\n title: \"Shift compared to district(%)\",\n tickFormat: \".0f\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":291,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":672,"value":"md`### Sex and Gender`","pinned":false,"hidden":false,"mode":"ojs"},{"id":675,"value":"legend({\n color: d3.scaleQuantize([-15, 15], d3.schemeRdYlGn[9]),\n title: \"Shift compared to district(%)\",\n tickFormat: \".0f\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":664,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":376,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":576,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"selectedData = data[selectedDistrict]","pinned":false,"hidden":false,"mode":"ojs"},{"id":721,"value":"{\n const d = Object.keys(data).map((cd) => {\n const v = data[cd];\n return {\n cd,\n \"age_16-25\": v[\"age_16-25\"][2],\n \"age_26-35\": v[\"age_26-35\"][2],\n \"age_36-45\": v[\"age_36-45\"][2],\n \"age_46-55\": v[\"age_46-55\"][2],\n \"age_56-65\": v[\"age_56-65\"][2],\n \"age_66-75\": v[\"age_66-75\"][2],\n \"age_76-85\": v[\"age_76-85\"][2],\n \"age_86+\": v[\"age_86+\"][2],\n gender_Male: v[\"gender_Male\"][2],\n gender_Female: v[\"gender_Female\"][2]\n };\n });\n\n return Table(d);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":735,"value":"Object.keys(data[1])","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"md`*Sources*: \n- U.S. Census Bureau - ACS 2019 (1 year estimates)\n- [CY 2019 Queens Community Board Report ](https://www.queensbp.org/wp-content/uploads/2020/07/CY2019-Queens-Community-Board-Report.pdf) (uploaded 7/2020)\n- CY 2021 Queens Community Board Report (upcoming)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":563,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"function wrap(text, wrapWidth, xAxisAdjustment = -9) {\n text.each(function() {\n var text = d3.select(this),\n words = text\n .text()\n .split(/\\s+/)\n .reverse(),\n word,\n line = [],\n lineNumber = 0,\n lineHeight = 1.1, // ems\n y = text.attr(\"y\"),\n dy = parseFloat(text.attr(\"dy\")) - 0,\n tspan = text\n .text(null)\n .append(\"tspan\")\n .attr(\"x\", xAxisAdjustment)\n .attr(\"y\", y)\n .attr(\"dy\", `${dy}em`);\n while ((word = words.pop())) {\n line.push(word);\n tspan.text(line.join(\" \"));\n if (tspan.node().getComputedTextLength() > wrapWidth) {\n line.pop();\n tspan.text(line.join(\" \"));\n line = [word];\n tspan = text\n .append(\"tspan\")\n .attr(\"x\", xAxisAdjustment)\n .attr(\"y\", y)\n .attr(\"dy\", ++lineNumber * lineHeight + dy + \"em\")\n .text(word);\n }\n }\n });\n return 0;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"import { Select } from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":524,"value":"import { legend, swatches } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":723,"value":"import { Table } from \"@observablehq/inputs\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W39","stdlib":"1","titling":"auto"}} 2d:"$2c:body"