28:null 29:["$","title",null,{"children":"New 2021 appointees compared to 2020 membership | Zhi Keng He | Observable"}] 2f:Te15,_chart1 = { const items = data.age; const margin = { top: 20, right: 20, bottom: 10, left: 100 }; const barHeight = 60; const height = Math.ceil((items.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, .5]) .range([margin.left, width - margin.right]); const yScale = d3 .scaleBand() .domain(items.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 bar 1 svg .append('g') .attr('fill', '#c1b29b') .selectAll('rect') .data(items) .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 bar 2 svg .append('g') .attr('fill', '#FFDB19') .selectAll('rect') .data(items) .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 labels text .append('g') .selectAll("text") .data(items.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.7) .attr("dy", "0.25em") .attr("dx", 5) .text(d => 'Difference between new applicants and 2020 membership'); //percent labels text .append('g') .selectAll("text") .data(items) .join("text") .attr("class", "percent-label") .attr("x", d => xScale(0)) .attr("y", (d, i) => yScale(d.key) + yScale.bandwidth() * 0.7) .attr("dy", "0.25em") .attr("dx", 2) .text(d => `${format(d.value[1] * 100)}%`); //percent labels for 2020 text .append('g') .selectAll("text") .data(items) .join("text") .attr("class", "percent-label") .attr("x", d => xScale(0)) .attr("y", (d, i) => yScale(d.key) + yScale.bandwidth() * 1.1) .attr("dy", "0.25em") .attr("dx", 2) .text(d => `${format(d.value[0] * 100)}%`); //change labels text .append('g') .selectAll("text") .data(items) .join("text") .attr("class", "change-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", 10) .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)}%`; } }); svg.append('g').call(xAxis); svg.append('g').call(yAxis); return svg.node(); }30:Te18,_chart2 = { const items = data.gender; const margin = { top: 20, right: 20, bottom: 10, left: 100 }; const barHeight = 60; const height = Math.ceil((items.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(items.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 bar 1 svg .append('g') .attr('fill', '#c1b29b') .selectAll('rect') .data(items) .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 bar 2 svg .append('g') .attr('fill', '#FFDB19') .selectAll('rect') .data(items) .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 labels text .append('g') .selectAll("text") .data(items.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.7) .attr("dy", "0.25em") .attr("dx", 5) .text(d => 'Difference between new applicants and 2020 membership'); //percent labels text .append('g') .selectAll("text") .data(items) .join("text") .attr("class", "percent-label") .attr("x", d => xScale(0)) .attr("y", (d, i) => yScale(d.key) + yScale.bandwidth() * 0.7) .attr("dy", "0.25em") .attr("dx", 2) .text(d => `${format(d.value[1] * 100)}%`); //percent labels for 2020 text .append('g') .selectAll("text") .data(items) .join("text") .attr("class", "percent-label") .attr("x", d => xScale(0)) .attr("y", (d, i) => yScale(d.key) + yScale.bandwidth() * 1.1) .attr("dy", "0.25em") .attr("dx", 2) .text(d => `${format(d.value[0] * 100)}%`); //change labels text .append('g') .selectAll("text") .data(items) .join("text") .attr("class", "change-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", 10) .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)}%`; } }); svg.append('g').call(xAxis); svg.append('g').call(yAxis); return svg.node(); }31:Te20,_chart3 = { const items = data.race_ethnicity; const margin = { top: 20, right: 20, bottom: 10, left: 100 }; const barHeight = 60; const height = Math.ceil((items.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, .5]) .range([margin.left, width - margin.right]); const yScale = d3 .scaleBand() .domain(items.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 bar 1 svg .append('g') .attr('fill', '#c1b29b') .selectAll('rect') .data(items) .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 bar 2 svg .append('g') .attr('fill', '#FFDB19') .selectAll('rect') .data(items) .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 labels text .append('g') .selectAll("text") .data(items.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.7) .attr("dy", "0.25em") .attr("dx", 5) .text(d => 'Difference between new applicants and 2020 membership'); //percent labels text .append('g') .selectAll("text") .data(items) .join("text") .attr("class", "percent-label") .attr("x", d => xScale(0)) .attr("y", (d, i) => yScale(d.key) + yScale.bandwidth() * 0.7) .attr("dy", "0.25em") .attr("dx", 2) .text(d => `${format(d.value[1] * 100)}%`); //percent labels for 2020 text .append('g') .selectAll("text") .data(items) .join("text") .attr("class", "percent-label") .attr("x", d => xScale(0)) .attr("y", (d, i) => yScale(d.key) + yScale.bandwidth() * 1.1) .attr("dy", "0.25em") .attr("dx", 2) .text(d => `${format(d.value[0] * 100)}%`); //change labels text .append('g') .selectAll("text") .data(items) .join("text") .attr("class", "change-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", 10) .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)}%`; } }); svg.append('g').call(xAxis); svg.append('g').call(yAxis); return svg.node(); }32:Te17,_chart4 = { const items = data.other; const margin = { top: 20, right: 20, bottom: 10, left: 150 }; const barHeight = 60; const height = Math.ceil((items.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, .5]) .range([margin.left, width - margin.right]); const yScale = d3 .scaleBand() .domain(items.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 bar 1 svg .append('g') .attr('fill', '#c1b29b') .selectAll('rect') .data(items) .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 bar 2 svg .append('g') .attr('fill', '#FFDB19') .selectAll('rect') .data(items) .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 labels text .append('g') .selectAll("text") .data(items.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.7) .attr("dy", "0.25em") .attr("dx", 5) .text(d => 'Difference between new applicants and 2020 membership'); //percent labels text .append('g') .selectAll("text") .data(items) .join("text") .attr("class", "percent-label") .attr("x", d => xScale(0)) .attr("y", (d, i) => yScale(d.key) + yScale.bandwidth() * 0.7) .attr("dy", "0.25em") .attr("dx", 2) .text(d => `${format(d.value[1] * 100)}%`); //percent labels for 2020 text .append('g') .selectAll("text") .data(items) .join("text") .attr("class", "percent-label") .attr("x", d => xScale(0)) .attr("y", (d, i) => yScale(d.key) + yScale.bandwidth() * 1.1) .attr("dy", "0.25em") .attr("dx", 2) .text(d => `${format(d.value[0] * 100)}%`); //change labels text .append('g') .selectAll("text") .data(items) .join("text") .attr("class", "change-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", 10) .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)}%`; } }); svg.append('g').call(xAxis); svg.append('g').call(yAxis); return svg.node(); }33:T5f3,data = { const age = { // 2020, 2021, district (2019) '16-25': [12, 16, 240072], '26-35': [64, 31, 360026], '36-45': [88, 34, 306325], '46-55': [113, 17, 298548], '56-65': [142, 7, 300340], '66-75': [149, 2, 207989], '76-85': [78, 1, 109129], '86+': [14, 0, 51342] // 'No Response': [25, 2, 0] }; const gender = { Male: [338, 38, 1094029], Female: [260, 68, 1159829], Transgender: [1, 0, 0], 'Gender non': [1, 2, 0] // 'No Response': [85, 2, 0] }; const race_ethnicity = { // 2020, 2021, district (2019) White: [215, 30, 876966], Black: [127, 27, 451839], Native: [6, 1, 23535], Asian: [60, 28, 632017], 'Latinx/Hisp': [59, 27, 641496] }; const other = { LGBTQ: [23, 9, 0], 'Person with a Disability': [19, 4, 0], 'Parent with a K-12 Child': [47, 36, 0], Immigrant: [42, 19, 0], Veteran: [25, 3, 0] }; function getPercentage(d, customSums = []) { const sums = Object.values(d).reduce( (p, c) => { c.forEach((v, i) => (p[i] += v)); return p; }, [0, 0, 0] ); return Object.entries(d).map(([k, v]) => { const s = customSums.length ? customSums : sums; return { key: k, value: v.map((e, i) => e / s[i]) }; }); } return { age: getPercentage(age), gender: getPercentage(gender), //select all that apply race_ethnicity: getPercentage(race_ethnicity, [685, 110, 0]), other: getPercentage(other, [685, 110, 0]) }; }34:[] 2c:{"id":"4a67e1bb77d8cfe5","slug":null,"title":"New 2021 appointees compared to 2020 membership","thumbnail":"d0e44ee2296c708e7611cd20c90b6078f3045fc16f87b8da03262d6e5be93615","access_level":"unlisted","create_time":"$D2021-04-04T13:50:55.723Z","update_time":"$D2021-04-05T20:38:15.686Z","view_time":null,"first_public_time":null,"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":153,"publish_version":153,"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":0,"collection":null,"type":"notebook","body":{"title":"New 2021 appointees compared to 2020 membership","cells":[{"id":0,"value":"md`# New 2021 appointees compared to 2020 membership`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"html`\n\n

Legend

2021 New-Appointments

2020 Membership

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"md`## Age`","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"md`*Note*: There were 25 Prefer Not to Answer/No responses for 2020 and 2 for 2021 New Appointees. Percentage calculation uses only filled responses.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"md`## Gender`","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"md`*Note*: There were 85 Prefer Not to Answer/No responses for 2020 and 2 for 2021 New Appointees. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"md`## Race/Ethnicity`","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"md`\nThis question is select that all apply. \n\n*Note*: 'Asian American' selection was not included in the 2021 survey, instead of East Asian/Pacific Islander and South Asian were used to calculate Asian in both 2021 and 2020 surveys.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"md`## Other Demographics`","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"md`This question is select that all apply. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}} 2d:"$2c:body"