28:null 29:["$","title",null,{"children":"Demographics of 2021 New appointments and Re-appointments | Zhi Keng He | Observable"}] 2f:T9a4,_charts_new = { const container = html`

`; const total = 109; 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() * .25) .attr("width", d => xScale(d.value[1] / total) - xScale(0)) .attr("height", yScale.bandwidth() * .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; }30:Tac1,_charts = { const container = html`

`; const total = 372; 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"); //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() * .25) .attr("width", d => xScale(d.value[0] / total) - xScale(0)) .attr("height", yScale.bandwidth() * .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() * .25) .attr("width", d => xScale(d.value[1] / total) - xScale(0)) .attr("height", yScale.bandwidth() * .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]}(${format((d.value[0] / total) * 100)}%)`); svg.append('g').call(xAxis); svg.append('g').call(yAxis); }); return container; }31:Tba8,data = ({ Age: [ { "16-25": [18, 16] }, { "26-35": [48, 31] }, { "36-45": [67, 34] }, { "46-55": [59, 17] }, { "56-65": [69, 7] }, { "66-75": [53, 2] }, { "76-85": [36, 1] }, { "86-95": [3, 0] }, { "96+": [2, 0] }, { "No Response/ Prefer Not to Answer": [20, 2] } ], Gender: [ { Male: [182, 38] }, { Female: [177, 68] }, // { Transgender: [0, 0] }, { "Gender non-conforming or non-binary": [3, 2] }, { "No Response/ Prefer Not to Answer": [13, 2] } ], "Self-Identification": [ { "African American/Black": [71, 27] }, { "Caribbean/West Indian": [31, 11] }, { "East Asian/Pacific Islander": [41, 12] }, { "South Asian": [33, 16] }, { "Latinx/Hispanic": [48, 27] }, { "European/White": [156, 30] }, { "Native American/American Indian": [3, 1] }, { "Middle Eastern": [2, 2] }, { LGBTQ: [13, 9] }, { "Person with a Disability": [21, 4] }, { "Parent with a K-12 Child": [79, 36] }, { Immigrant: [54, 19] }, { Veteran: [19, 3] }, { "No Response/ Prefer Not to Answer": [86, 2] } ], "Edu Attainment": [ { "Some High School": [3, 1] }, { "High School Graduate or Equ.": [20, 6] }, { "Some College": [44, 10] }, { "Trade or Vocational Degree": [8, 1] }, { "Associate Degree": [17, 5] }, { "Bachelor's Degree": [95, 35] }, { "Some Grad School or Prof. School": [19, 4] }, { "Master's Degree": [101, 35] }, { "Doctoral Degree": [14, 2] }, { "Law Degree": [32, 7] }, { "Medical Degree": [4, 2] }, { "Prefer Not to Answer": [17, 2] } ], Housing: [ { "Apartment Rental (Market Rate)": [76, 39] }, { "Co-op": [49, 9] }, { Condo: [8, 2] }, { "House Rental (Market Rate)": [12, 6] }, { "Mitchell-Lama Co-op": [1, 0] }, { "Own a House": [177, 35] }, { "Public Housing/NYCHA": [7, 4] }, { "Rent Regulated Apt": [16, 7] }, { "Roommate, Lodger, Rent a Room, Parents": [10, 7] }, { "Prefer not to answer": [19, 1] } ], Transportation: [ { "Subway/ Train": [206, 75] }, { Walking: [165, 55] }, { "Private Bus Service (Dollar Van)": [6, 2] }, { "Access-a-ride or other paratransit service": [8, 2] }, { "Personal vehicle": [274, 72] }, { Bus: [151, 54] }, { "Bike or micro mobility (ex. e-scooter..)": [62, 23] }, { "For-hire vehicle (Uber, Lyft, etc)": [69, 26] }, { "Prefer Not to Answer": [6, 0] } ], Techonlogy: [ { Yes: [361, 110] }, { No: [4, 0] }, { "Prefer Not to Answer/ NA": [10, 0] } ], "Type of Internet": [ { "Broadband / Fiber": [335, 105] }, { "Mobile Hotspot": [5, 2] }, { "Dial-Up": [2, 0] }, { None: [3, 0] }, { Other: [10, 1] }, { Unsure: [8, 2] }, { "Prefer Not to Answer/ NA": [12, 0] } ], "Video conferencing": [ { "1": [6, 0] }, { "2": [5, 1] }, { "3": [19, 2] }, { "4": [35, 5] }, { "5": [302, 101] }, { "Prefer Not to Answer/ NA": [8, 1] } ] })32:[] 2c:{"id":"84ffe6b0df718c9c","slug":null,"title":"Demographics of 2021 New appointments and Re-appointments","thumbnail":"b1fb0fa7498d7b6763543e9a7dbd8f383ca3eaa6f31f2ae9e8fcbdc0068fb7d1","access_level":"unlisted","create_time":"$D2021-04-02T10:56:44.459Z","update_time":"$D2021-04-07T03:36:55.446Z","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":165,"publish_version":165,"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":"Demographics of 2021 New appointments and Re-appointments","cells":[{"id":0,"value":"md`# Demographics of 2021 New appointments and Re-appointments`","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"md`## All 2021 appointments (both New and Re-appointments)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"md`There were *110* new appointments and *265* reappointments, for a total of **375** for 2021.`","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":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"d3 = require('d3')","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2d:"$2c:body"