2a:T437,md`From diveresitydatakids.org, the Child Opportunity Index (COI) 2.0 measures conditions crucial to child development in over 72,000 census tracts around the U.S. For each tract, 29 indicators across three major domains — Education, Health & Environment, Social & Economic — are used to calculate a final score from 0 to 100. This post examines the final scores of tracts across seven counties in New York City (five) and Long Island (two) — and scores for each domain. All scores are *nationally* standardized. This means that if a tract has a score of 90, its level of opportunity is considered to be higher than 89 percent of (recorded) tracts across the U.S. In addition, scores reflect opportunity levels in *2015*. *A lot may have changed since then.* Census tracts comply to 2010 census information. For more information on the data and methodology, refer here.`2b:Td57,chart1 = { const height = 610; const margin = { top: 0, right: 20, bottom: 20, left: 60 }; const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); // x-scale const x = d3 .scaleLinear() .domain([0, 100]) .range([margin.left, width - margin.right]); // x-axis function xAxis(g) { g.call(d3.axisBottom(x)) .attr("transform", `translate(0,${height - margin.bottom})`) .call(g => { g.select(".domain").remove(); g.selectAll(".tick line") .clone() .attr("stroke-opacity", 0.2) .attr("y2", -(height - margin.bottom - margin.top)); const text = g .select(".tick:last-of-type text") .clone() .attr("y", -15) .attr("text-anchor", "middle") .attr("font-weight", "bold") .attr("fill", "none") .attr("stroke", "white") .attr("stroke-width", 3) .text("Score") .clone(true) .attr("fill", "black") .attr("stroke", null); }); } // y-scale const y = d3 .scaleBand() .domain([...countyColors.keys()]) .range([height - margin.bottom, margin.top]); // y-axis function yAxis(g) { g.call(d3.axisLeft(y)) .attr("transform", `translate(${margin.left},0)`) .call(g => g.select(".domain").remove()); } svg.append("g").call(xAxis); svg.append("g").call(yAxis); // y-jitter control const jitterStep = y.step() / 2.5; // Bubble radius const r = 3.5; // Initial plot const circle = svg .append("g") .selectAll("circle") .data(data) .join("circle") .attr("cx", d => x(d.r_COI_nat)) .attr( "cy", d => y(d.countyname) + y.step() / 2 + Math.random() * jitterStep - jitterStep / 2 ) .attr("r", r) .attr("fill", d => countyColors.get(d.countyname)) .attr("fill-opacity", 0.7); function mark(g, pctile) { g.selectAll("line") .data([...countyColors.keys()]) .join("line") .attr("stroke", "black") .attr("y1", d => y(d) + (y.step() / 2 - jitterStep / 2) - r - 6) .attr("y2", d => y(d) + (y.step() / 2 - jitterStep / 2) - r) .attr("x1", d => x(findPercentile(d, pctile, "r_COI_nat"))) .attr("x2", d => x(findPercentile(d, pctile, "r_COI_nat"))); } function markLabel(g, pctile) { g.selectAll("text") .data([...countyColors.keys()]) .join("text") .style("font", "10px sans-serif") .attr("text-anchor", "middle") .attr("x", d => x(findPercentile(d, pctile, "r_COI_nat"))) .attr("y", d => y(d) + (y.step() / 2 - jitterStep / 2) - r - 9) .text(() => (pctile === 0.5 ? "Med." : d3.format(".0%")(pctile))); } const medMarks = svg .append("g") .call(mark, 0.5) .selectAll("line"); const medLabels = svg .append("g") .call(markLabel, 0.5) .selectAll("text"); return Object.assign(svg.node(), { // x-position update function update(domainCol) { const t = svg.transition().duration(750); circle.transition(t).attr("cx", d => x(d[domainCol])); medMarks .transition(t) .attr("x1", d => x(findPercentile(d, 0.5, domainCol))) .attr("x2", d => x(findPercentile(d, 0.5, domainCol))); medLabels .transition(t) .attr("x", d => x(findPercentile(d, 0.5, domainCol))); } }); }2c:Tc03,chart2 = { const svg = d3 .create("svg") .attr("width", width) .attr("height", height); // Zoom const zoom = d3 .zoom() .scaleExtent([1, 8]) .on("zoom", zoomed); const map = svg.append("g"); // Color map .selectAll("path") .data(nyc_li.features) .join("path") .attr("class", "tract") .attr("fill", d => tracts.get(d.properties.GEO_ID.slice(-11)) ? color(tracts.get(d.properties.GEO_ID.slice(-11)).r_COI_nat) : "#ccc" ) .attr("d", path); // County boundaries map .append("path") .attr("fill", "none") .attr("stroke", "white") .attr("d", path(boundaries)); svg.call(zoom); // Zoom function function zoomed() { const { transform } = d3.event; map.attr("transform", transform); map.attr("stroke-width", 1 / transform.k); } d3.select(".legend").style("color", "white"); // Tooltip function function mouseUpdate(g, domainCol2) { g.selectAll(".tract") .on("mouseover", function(d) { if (tracts.get(d.properties.GEO_ID.slice(-11))) { mutable score = tracts.get(d.properties.GEO_ID.slice(-11))[ domainCol2 ]; mutable county = tracts.get( d.properties.GEO_ID.slice(-11) ).countyname; //const rankCol = `c5_${domainCol2.slice(2)}`; //mutable rank = tracts.get(d.properties.GEO_ID.slice(-11))[rankCol]; d3.select(this) .attr("stroke", "red") .raise(); d3.select(".legend").style("color", "black"); } }) .on("mouseout", function() { d3.select(this) .attr("stroke", null) .lower(); d3.select(".legend").style("color", "white"); }); } map.call(mouseUpdate, "r_COI_nat"); return Object.assign(svg.node(), { // Color update function upon domain selection colorUpdate(domainCol2) { svg .selectAll(".tract") .transition() .duration(500) .attr("fill", d => tracts.get(d.properties.GEO_ID.slice(-11)) ? color(tracts.get(d.properties.GEO_ID.slice(-11))[domainCol2]) : "#ccc" ); map.call(mouseUpdate, domainCol2); }, // Reset zoom zoomReset() { svg .transition() .duration(750) .call( zoom.transform, d3.zoomIdentity, d3.zoomTransform(svg.node()).invert([width / 2, height / 2]) ); }, // Zoom update function upon county selection zoomUpdate(countySelect) { const [[x0, y0], [x1, y1]] = path.bounds( boundaries.features.filter(d => d.properties.NAME === countySelect)[0] ); svg .transition() .duration(750) .call( zoom.transform, d3.zoomIdentity .translate(width / 2, height / 2) .scale( Math.min(8, 0.9 / Math.max((x1 - x0) / width, (y1 - y0) / height)) ) .translate(-(x0 + x1) / 2, -(y0 + y1) / 2) ); } }); }2d:T459,md`Moreover, Manhattan's polarization is evident here: COIs drops by 70-80 points as we move from the Upper East Side or the Upper West Side to Harlem, and as we move from Tribeca or Greenwich Village to the Lower East Side. Harlem, like The Bronx, is historically and predominantly a black neighborhood. The Lower East Side features a cluster of low-income housing projects. The Upper East Side and Tribeca are among Manhattan's priciest neighborhoods. Polarization is also happening in Brooklyn. Heavily gentrified neighborhoods such as Brooklyn Heights and Park Slope have very high levels of opportunity, but as we move further away from Manhattan — also into black neighborhoods — scores fall drastically. What else can you notice? Send me your suggestions or bones to pick at *dkn259 at nyu dot edu*. You can also examine diversitydatakids.org's methodology here.`2e:[{"id":"1dcfd9b5e6938d45a9b4b8a71c1440c9c5d6ceb960d131224b3276ef6f1d79a0e473dd5fa9eafc94bf2f11957075df2a1036847350c93eb02e7a3da9fff6c205","href":"https://static.observableusercontent.com/files/1dcfd9b5e6938d45a9b4b8a71c1440c9c5d6ceb960d131224b3276ef6f1d79a0e473dd5fa9eafc94bf2f11957075df2a1036847350c93eb02e7a3da9fff6c205","name":"gz_2010_36_140_00_500k.json","type":"application/json","lastModified":1583779548432.699,"size":1892011},{"id":"d8687310599d0d94a8c8f85f15f16559e712e3e8859cfaa4f370ddd12a42245d5ca39a17f89b3b552c18fff73147d1127cf7e26ee16ffeb3ccc957ad456af315","href":"https://static.observableusercontent.com/files/d8687310599d0d94a8c8f85f15f16559e712e3e8859cfaa4f370ddd12a42245d5ca39a17f89b3b552c18fff73147d1127cf7e26ee16ffeb3ccc957ad456af315","name":"gz_2010_us_050_00_500k.json","type":"application/json","lastModified":1583779548432.699,"size":5116098},{"id":"7483291ba621bf0a0fae0452e597fadb6f32ec3a454200b00d71f725827e94d96d8d259d7238495137831ff54ec2fe9c9236a2186494a465c30c0f09dadf3e73","href":"https://static.observableusercontent.com/files/7483291ba621bf0a0fae0452e597fadb6f32ec3a454200b00d71f725827e94d96d8d259d7238495137831ff54ec2fe9c9236a2186494a465c30c0f09dadf3e73","name":"data.csv","type":"text/csv","lastModified":1583779548432.699,"size":180595}] 29:{"title":"NYC & LI 2015 Child Opportunity Index","cells":[{"id":0,"value":"md`# NYC & LI 2015 Child Opportunity Index`","pinned":false,"hidden":false,"mode":"ojs"},{"id":782,"value":"md`*A data-driven explanation of why it might be better to raise your child in the suburbs*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":777,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":789,"value":"$2a","pinned":false,"hidden":false,"mode":"ojs"},{"id":711,"value":"{\n let output = \"\";\n [...codeToName.keys()].forEach(key => {\n let intl = `

${missing.get(key)} out of ${\n nyc_li.features.filter(d => d.properties.COUNTY === key).length\n } tracts in ${codeToName.get(key)} County`;\n if (\n [\"Bronx\", \"Kings\", \"New York\", \"Richmond\"].indexOf(\n codeToName.get(key)\n ) !== -1\n ) {\n intl += ` (a.k.a. ${nameToBorough.get(codeToName.get(key))})`;\n }\n output += intl + \"

\";\n });\n return html`Final disclaimer: data is provided by nextLI and missing in ${d3.sum(\n [...missing.values()]\n )} out of ${format(\n nyc_li.features.length\n )} census tracts:

${output}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":847,"value":"md`___\n### Long Island neighborhoods tend to have better opportunity levels`","pinned":false,"hidden":false,"mode":"ojs"},{"id":914,"value":"md`As shown in the pseudo-bubble chart below, most tracts in Suffolk and Nassau have higher COIs (70-90) compared to those in New York City.\n\nBrooklyn and The Bronx have the lowest median COIs. Meanwhile, polarization is happening within Manhattan: while some tracts have excellent levels of opportunity — even best in the nation — many others are stuck with COIs between 0 and 30.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"viewof domainCol = radio({\n title: \"Domain\",\n description: \"Select one to inspect\",\n options: [\n { label: \"Education\", value: \"r_ED_nat\" },\n { label: \"Health & Environment\", value: \"r_HE_nat\" },\n { label: \"Social & Economic\", value: \"r_SE_nat\" },\n { label: \"Overall\", value: \"r_COI_nat\" }\n ],\n value: \"r_COI_nat\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"$2b","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"html`\n

\n \n Scores are nationally standardized. BOO! represents New York City counties, while BOO! represents those in Long Island. Med. stands for median.\n \n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":952,"value":"md`When it comes to education, Manhattan overtakes Suffolk and Nassau in terms of median score, but the two counties in Long Island have much better median health-and-environment scores than any county in New York City.\n\nSocial-and-economic scores more or less reflect overall COIs. Switching between the two doesn't produce as big a shift as switching from education or health-and-environment to overall.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1079,"value":"md`___\n### It's better at the center`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1136,"value":"md`In the following choropleth map, the overall score tends to increase as we move out of New York City into Nassau County. As we move out of Nassau County and deeper into Suffolk County, the score tends to decrease moderately. Switching from overall to any of the three domains more or less yields a similar result.\n\nNassau, between Queens and Suffolk, has the highest concentration of tracts with excellent opportunity levels.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":305,"value":"viewof domainCol2 = radio({\n title: \"Domain\",\n options: [\n { label: \"Education\", value: \"r_ED_nat\" },\n { label: \"Health & Environment\", value: \"r_HE_nat\" },\n { label: \"Social & Economic\", value: \"r_SE_nat\" },\n { label: \"Overall\", value: \"r_COI_nat\" }\n ],\n value: \"r_COI_nat\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":381,"value":"viewof countySelect = {\n reset;\n yield radio({\n title: \"County\",\n description:\n \"Select one to zoom in, or zoom and pan directly on the map. Hover to inspect.\",\n options: [...countyColors.keys()].map(d => ({\n label: d,\n value: d\n }))\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":428,"value":"viewof reset = button({\n value: \"Reset Zoom\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":324,"value":"legend({\n color,\n title: \"Score\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":616,"value":"html`\n

\n County: ${county}. Score: ${score}\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":252,"value":"$2c","pinned":false,"hidden":false,"mode":"ojs"},{"id":883,"value":"html`\n

\n \n Scores are nationally standardized. BOO! represents census tracts where data is missing; it's easy to see that these tend to be where parks are.\n \n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1167,"value":"$2d","pinned":false,"hidden":false,"mode":"ojs"},{"id":749,"value":"md`___\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1201,"value":"md`More technical gobbledygook.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1231,"value":"cellInspection","pinned":false,"hidden":false,"mode":"ojs"},{"id":761,"value":"md`**Bubble**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":982,"value":"findPercentile = (name, pctile, domainCol) => {\n return d3.quantile(\n data\n .filter(d => d.countyname === name)\n .map(d => d[domainCol])\n .sort((a, b) => a - b),\n pctile\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"xPosUpdate = {\n chart1.update(domainCol);\n //chart1.\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"countyColors = new Map(\n d3\n .nest()\n .key(d => d.countyname)\n .entries(data)\n .map(({ key }) => {\n if ([\"Nassau\", \"Suffolk\"].indexOf(key) === -1) {\n return [key, d3.schemeSet2[0]];\n } else {\n return [key, d3.schemeSet2[1]];\n }\n })\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":752,"value":"md`**Choropleth**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":630,"value":"//mutable rank = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":596,"value":"mutable county = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":588,"value":"mutable score = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":410,"value":"colorControl = {\n chart2.colorUpdate(domainCol2);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":545,"value":"zoomUpdate = {\n chart2.zoomUpdate(countySelect);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":430,"value":"zoomReset = {\n reset;\n chart2.zoomReset();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":278,"value":"tracts = new Map(\n d3\n .nest()\n .key(d => d.geoid)\n .entries(data)\n .map(({ key, values }) => [key, values[0]])\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":269,"value":"color = d3\n .scaleSequential()\n .domain([0, 100])\n .interpolator(d3.interpolateCividis)\n .unknown(\"#ccc\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"path = d3.geoPath(projection)","pinned":false,"hidden":false,"mode":"ojs"},{"id":260,"value":"projection = d3.geoMercator().fitSize([width, height], nyc_li)","pinned":false,"hidden":false,"mode":"ojs"},{"id":255,"value":"height = 450","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"nyc_li = {\n const output = topojson.feature(\n nyState,\n nyState.objects.gz_2010_36_140_00_500k\n );\n const countyfips = [\n ...new Set(data.map(d => d.countyfips.toString().slice(2)))\n ];\n output.features = output.features.filter(\n //d => data.map(d => d.geoid).indexOf(+d.properties.GEO_ID.slice(-11)) !== -1\n d => countyfips.indexOf(d.properties.COUNTY) !== -1\n );\n return output;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":229,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":223,"value":"nyState = await FileAttachment(\"gz_2010_36_140_00_500k.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":341,"value":"boundaries = {\n const us = await FileAttachment(\"gz_2010_us_050_00_500k.json\").json();\n\n const output = topojson.feature(us, us.objects.gz_2010_us_050_00_500k);\n\n output.features = output.features.filter(\n d => d.properties.STATE === \"36\" && countyColors.get(d.properties.NAME)\n );\n /*const output = topojson.mesh(\n us,\n us.objects.gz_2010_us_050_00_500k,\n (a, b) => a !== b\n );*/\n\n return output;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":321,"value":"import { legend } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":425,"value":"import { button } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":757,"value":"md`**General**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":708,"value":"codeToName = new Map([\n [\"005\", \"Bronx\"],\n [\"047\", \"Kings\"],\n [\"059\", \"Nassau\"],\n [\"061\", \"New York\"],\n [\"081\", \"Queens\"],\n [\"085\", \"Richmond\"],\n [\"103\", \"Suffolk\"]\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":858,"value":"nameToBorough = new Map([\n [\"Bronx\", \"The Bronx\"],\n [\"Kings\", \"Brooklyn\"],\n [\"New York\", \"Manhattan\"],\n [\"Richmond\", \"Staten Island\"]\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"data = d3.csvParse(await FileAttachment(\"data.csv\").text(), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":696,"value":"missing = {\n const missings = nyc_li.features\n .filter(d => !tracts.get(d.properties.GEO_ID.slice(-11)))\n .map(d => d.properties.COUNTY);\n const quantity = new Map(\n d3\n .nest()\n .key(d => d)\n .entries(missings)\n .map(({ key, values }) => [key, values.length])\n );\n return quantity;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"import { radio } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1227,"value":"import { cellInspection } from \"@duynguyen1678/helper-gifs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":816,"value":"format = d3.format(\",\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W2e","stdlib":"1","titling":"auto"}