2b:null 2c:["$","title",null,{"children":"Demographics of 2022 New appointments and Re-appointments | Zhi Keng He | Observable"}] 32:T9b7,_charts_new = { const container = html`

`; const total = 92; const format = d3.format(".1f"); Object.entries(data).map(([title, rows]) => { const items = rows.map((i) => ({ key: Object.keys(i)[0], value: Object.values(i)[0] })); const margin = { top: 20, right: 25, bottom: 10, left: 200 }; const barHeight = 30; const height = Math.ceil((rows.length + 0.1) * barHeight) + margin.top + margin.bottom; const chart_container = d3.select(container).append("div"); chart_container.append("h3").text(title); const svg = chart_container .append("svg") .attr("viewBox", [0, 0, width, height]); //scale const xScale = d3 .scaleLinear() .domain([0, 1.1]) .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.6rem"); 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() * 0.25) .attr("width", (d) => xScale(d.value[1] / total) - xScale(0)) .attr("height", yScale.bandwidth() * 0.5); //labels const text = svg .append("g") .attr("fill", "black") .attr("text-anchor", "start") .attr("font-family", "sans-serif") .attr("font-size", 12); text .append("g") .selectAll("text") .data(items) .join("text") .attr("class", "label") .attr("x", (d) => xScale(d.value[1] / total)) .attr("y", (d, i) => yScale(d.key) + yScale.bandwidth() * 0.5) .attr("dy", "0.25em") .attr("dx", 3) .text((d) => d.value[1] > 0 ? `${d.value[1]}(${format((d.value[1] / total) * 100)}%)` : d.value[1] ); svg.append("g").call(xAxis); svg.append("g").call(yAxis); }); return container; }33:Tb6a,_charts = { const container = html`

`; const total = 344; const format = d3.format(".1f"); Object.entries(data).map(([title, rows]) => { if (title === "My main forms of transportation") return null; const items = rows.map((i) => ({ key: Object.keys(i)[0], value: Object.values(i)[0] })); const margin = { top: 20, right: 25, bottom: 10, left: 250 }; const barHeight = 30; const height = Math.ceil((rows.length + 0.1) * barHeight) + margin.top + margin.bottom; const chart_container = d3.select(container).append("div"); chart_container.append("h3").text(title); const svg = chart_container .append("svg") .attr("viewBox", [0, 0, width, height]); //scale const xScale = d3 .scaleLinear() .domain([0, 1.1]) .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.6rem"); //create bars svg .append("g") .attr("fill", "steelblue") .selectAll("rect") .data(items) .join("rect") .attr("x", xScale(0)) .attr("y", (d, i) => yScale(d.key) + yScale.bandwidth() * 0.25) .attr("width", (d) => xScale(d.value[0] / total) - xScale(0)) .attr("height", yScale.bandwidth() * 0.5); 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() * 0.25) .attr("width", (d) => xScale(d.value[1] / total) - xScale(0)) .attr("height", yScale.bandwidth() * 0.5); //labels const text = svg .append("g") .attr("fill", "black") .attr("text-anchor", "start") .attr("font-family", "sans-serif") .attr("font-size", 12); text .append("g") .selectAll("text") .data(items) .join("text") .attr("class", "label") .attr("x", (d) => xScale(d.value[0] / total)) .attr("y", (d, i) => yScale(d.key) + yScale.bandwidth() * 0.5) .attr("dy", "0.25em") .attr("dx", 3) .text( (d) => `${d.value[0] + d.value[1]}(${format( ((d.value[0] + d.value[1]) / total) * 100 )}%)` ); svg.append("g").call(xAxis); svg.append("g").call(yAxis); }); return container; }34:T98b,data = ({ Age: [ { "16-17 years old": [0, 1] }, { "18-19": [0, 2] }, { "20-29": [1, 16] }, { "30-39": [27, 26] }, { "40-49": [28, 20] }, { "50-59": [55, 13] }, { "60+": [126, 13] }, { "No Response/ Prefer Not to Answer": [15, 1] } ], Gender: [ { Male: [145, 47] }, { Female: [102, 43] }, { "Gender non-conforming or non-binary": [0, 2] }, { "No Response/ Prefer Not to Answer": [5, 1] } ], "Self-Identification": [ { "African American/Black": [56, 20] }, { "Caribbean/West Indian": [23, 7] }, { "East Asian/Pacific Islander": [16, 10] }, { "South Asian": [17, 11] }, { "Latinx/Hispanic": [23, 16] }, { "European/White": [82, 28] }, { "Native American/American Indian": [2, 0] }, { "Middle Eastern": [3, 2] }, { LGBTQ: [13, 6] }, { "Person with a Disability": [5, 5] }, { "Parent with a K-12 Child": [17, 21] }, { Immigrant: [12, 17] }, { Veteran: [8, 2] }, { "No Response/ Prefer Not to Answer": [42, 3] } ], "Edu Attainment": [ { "Some High School": [2, 1] }, { "High School Graduate or Equ.": [13, 6] }, { "Some College": [27, 13] }, { "Trade or Vocational Degree": [4, 2] }, { "Associate Degree": [22, 6] }, { "Bachelor's Degree": [68, 20] }, { "Some Grad School or Prof. School": [15, 3] }, { "Master's Degree": [68, 27] }, { "Doctoral Degree": [5, 3] }, { "Law Degree": [19, 10] }, { "Medical Degree": [2, 0] }, { "Prefer Not to Answer": [7, 1] } ], Housing: [ { "Apartment Rental (Market Rate)": [35, 22] }, { "Co-op": [23, 13] }, { Condo: [8, 2] }, { "House Rental (Market Rate)": [7, 6] }, { "Mitchell-Lama Co-op": [2, 1] }, { "Own a House": [142, 25] }, { "Public Housing/NYCHA": [2, 3] }, { "Rent Regulated Apt": [10, 3] }, { "Roommate, Lodger, Rent a Room, SRO": [1, 6] }, { "Live with parents/ Intergenerational household": [3, 3] }, { "Prefer not to answer": [19, 8] } ], "My main forms of transportation": [ { "Subway/ Train": [0, 49] }, { Walking: [0, 42] }, { "Private Bus Service (Dollar Van)": [0, 0] }, { "Access-a-ride or other paratransit service": [0, 0] }, { "Personal vehicle": [0, 50] }, { Bus: [0, 40] }, { "Bike or micro mobility device (ex. e-scooter, ...": [0, 16] }, { "For-hire vehicle (Uber, Lyft, etc)": [0, 18] }, { "Prefer Not to Answer": [0, 0] } ] })35:[] 2f:{"id":"b7d5b5166e101d0c","slug":"demographics-of-2022-new-appointments-and-re-appointments","title":"Demographics of 2022 New appointments and Re-appointments","thumbnail":"71cc1d0ccd6ffa895e06c6b65057d2c54b9d5a58e061354135898f84e77a3ce8","access_level":"public","create_time":"$D2022-03-29T16:23:27.700Z","update_time":"$D2022-04-01T14:12:39.093Z","view_time":null,"first_public_time":"$D2022-03-29T16:36:15.940Z","fork":true,"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":190,"publish_version":190,"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":"Demographics of 2022 New appointments and Re-appointments","cells":[{"id":0,"value":"md`# Demographics of 2022 New appointments and Re-appointments`","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"md`## All 2022 appointments (both New and Re-appointments)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"md`There were *92* new appointments and *252* reappointments, for a total of **344** for 2022.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"html`\n\n

Legend

Re-Appointments

New Appointments

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"d3 = require('d3')","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}} 30:"$2f:body"