${data.title[0]}${labels[j] && ` (${labels[j]})`} ${data.title[1]}${labels[i] && ` (${labels[i]})`}

2a:null 2b:["$","title",null,{"children":"Tree Cover and Household Median Income by tract | Zhi Keng He | Observable"}] 31:T81f,chart = { const container = html``; const width = 800, height = 600; const svg = d3 .select(container) .append("svg") .attr("viewBox", [0, 0, width, height]); const div = d3 .select(container) .append("div") .classed("tooltip", true); const tooltip = new Tooltip(div); const projection = d3.geoMercator().fitExtent([[20, 20], [width, height]], { type: "FeatureCollection", features }); const path = d3.geoPath().projection(projection); const g = svg .append('g') .selectAll('path') .data(features) .enter() .append('path') .attr('d', path) .attr("fill", d => { if (showOnlyVeg) { let [a, b] = data.get(d.properties.GISJOIN); return colors[y(0) + x(a) * n]; } if (showOnlyIncome) { let [a, b] = data.get(d.properties.GISJOIN); return colors[y(b) + 0 * n]; } return color(data.get(d.properties.GISJOIN)); }) .on("mouseover", function(event, d) { tooltip.display(d, tooltipContents); d3.select(this) .style('stroke', 'yellow') .style('stroke-width', 0.6); }) .on("mouseout", function() { tooltip.hide(); d3.select(this) .style('stroke', 'white') .style('stroke-width', 0); }) .on("mousemove", event => { tooltip.move(event); }); //add zoom const zoom = d3 .zoom() .scaleExtent([1, 8]) .on("zoom", zoomed); function zoomed(event) { const { transform } = event; g.attr("transform", transform); g.attr("stroke-width", 1 / transform.k); } svg.call(zoom); //legend svg.append(legend).attr("transform", `translate(${100},${100})`); return container; }32:T905,tooltipContents = { const margin = { top: 20, right: 20, bottom: 15, left: 10 }, barHeight = 15, width = 250, height = barHeight * 3 + margin.top + margin.bottom; return datum => { const { GISJOIN, ntaname, boro_name } = datum.properties; const value = data.get(GISJOIN); let [a, b] = value; const aArray = Array.from(data.values(), d => d[0]); const scaleA = d3 .scaleLinear() .domain([0, d3.max(aArray)]) .range([margin.left, width - margin.right]); const bArray = Array.from(data.values(), d => d[1]); const scaleB = d3 .scaleLinear() .domain([30000, d3.max(bArray)]) .range([margin.left, width - margin.right]); const format_dollars = d => '$' + d3.format(',.0f')(d); const format_percent = d3.format('.1%'); const tooltip = html`

`; const svg = d3 .select(tooltip) .append('svg') .attr('width', width) .attr('height', height); const chart = svg.append('g'); //title chart .append('text') .attr("class", "title") .text(() => ntaname) .attr('x', 0) .attr('y', 10) .attr("dy", "0.25em") .attr("dx", 0); //labels chart .append('text') .attr("class", "label") .text(() => `Tree Cover: ${format_percent(a)}`) .attr('x', 0) .attr('y', 25) .attr("dy", "0.25em") .attr("dx", 0); chart .append('text') .attr("class", "label") .text(() => `Household MedIncome: ${format_dollars(b)}`) .attr('x', 0) .attr('y', barHeight + 45) .attr("dy", "0.25em") .attr("dx", 0); //bars chart .append('rect') .attr('x', 0) .attr('y', () => 30) .attr("width", () => scaleA(a) - scaleA(0)) .attr("height", barHeight) .attr('fill', () => colors[y(0) + x(a) * n]); chart .append('rect') .attr('x', 0) .attr('y', (d, i) => barHeight + 50) .attr("width", () => scaleB(b)) .attr("height", barHeight) .attr('fill', () => colors[y(b)]); return tooltip.innerHTML; //return `

${format_percent(a)},${format_dollars(b)}

`; }; }33:T49e,legend = () => { const k = 24; const arrow = DOM.uid(); return svg` ${d3.cross(d3.range(n), d3.range(n)).map( ([i, j]) => svg` ${data.title[0]}${labels[j] && ` (${labels[j]})`} ${data.title[1]}${labels[i] && ` (${labels[i]})`} ` )} ${data.title[0]} ${data.title[1]} `; }34:[{"id":"8e9a8df7c7286ea039c15e698fdecf8a053f47d1cd50e7c86b84496551bf2db782aa7494622200842781cefe70f401276f5d4de243de11fea68a0870faba0fcf","href":"https://static.observableusercontent.com/files/8e9a8df7c7286ea039c15e698fdecf8a053f47d1cd50e7c86b84496551bf2db782aa7494622200842781cefe70f401276f5d4de243de11fea68a0870faba0fcf","name":"nyc.geojson","type":"application/geo+json","lastModified":1628267163850.244,"size":89348},{"id":"7992943acfcfc796f36d5227d25ee5df8725ec03d441bda7754091f09963a5fec89b9db421eac0f6c4365e585de6f12e8fdfe0d05cb08f6c2f543052c8bc273a","href":"https://static.observableusercontent.com/files/7992943acfcfc796f36d5227d25ee5df8725ec03d441bda7754091f09963a5fec89b9db421eac0f6c4365e585de6f12e8fdfe0d05cb08f6c2f543052c8bc273a","name":"bivar-treecover@4.geojson","type":"application/geo+json","lastModified":1628523106603.947,"size":2848555},{"id":"092a074d0fc425c3dfe8df016fd040c78aca25f61167825845cf0bb9c4959b164c9b9576ef9a70552db108fca2b92eb6b56060eb90f71f4f8793ae5a3d9cc9df","href":"https://static.observableusercontent.com/files/092a074d0fc425c3dfe8df016fd040c78aca25f61167825845cf0bb9c4959b164c9b9576ef9a70552db108fca2b92eb6b56060eb90f71f4f8793ae5a3d9cc9df","name":"bivar-treecover@3.geojson","type":"application/geo+json","lastModified":1628266668399.113,"size":5563800}] 2e:{"id":"79c78ce3d2f93336","slug":"tree-cover-and-household-median-income-by-tract","title":"Tree Cover and Household Median Income by tract","thumbnail":"f70b73a6c46f923cc6aecba580d5b2c2f4ef181cd28df46a34c54ccc5775be8c","access_level":"public","create_time":"$D2021-08-06T14:09:02.103Z","update_time":"$D2021-08-09T18:56:33.373Z","view_time":null,"first_public_time":"$D2021-08-06T14:38:36.405Z","fork":{"id":"8b1da0468b5f1e92","slug":"bivariate-choropleth","title":"Bivariate choropleth","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":3,"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":819,"publish_version":819,"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":2,"collection":null,"type":"notebook","body":{"title":"Tree Cover and Household Median Income by tract","cells":[{"id":0,"value":"headline = md`# Tree Cover and Household Median Income by tract`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":746,"value":"credits = md`\nForked from [Bivariate Choropleth](https://observablehq.com/@d3/bivariate-choropleth).\nColors: [Joshua Stevens](http://www.joshuastevens.net/cartography/make-a-bivariate-choropleth-map/.) Data: [Land Cover Raster Data (2017) – 6in](https://data.cityofnewyork.us/Environment/Land-Cover-Raster-Data-2017-6in-Resolution/he6d-2qns), NHGIS ACS 5 year Estimates 2015-2019.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":504,"value":"viewof colors = Inputs.select(new Map(schemes.map(s => [s.name, s.colors])), {\n key: \"GrBu\",\n label: \"Color scheme\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":697,"value":"viewof showOnlyVeg = Inputs.toggle({\n label: \"Show Only Tree Canopy\",\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":736,"value":"viewof showOnlyIncome = Inputs.toggle({\n label: \"Show Only Income\",\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":539,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":359,"value":"schemes = [\n {\n name: \"GnBu\",\n colors: [\n \"#e8e8e8\",\n \"#b5c0da\",\n \"#6c83b5\",\n \"#b8d6be\",\n \"#90b2b3\",\n \"#567994\",\n \"#73ae80\",\n \"#5a9178\",\n \"#2a5a5b\"\n ]\n },\n {\n name: \"RdBu\",\n colors: [\n \"#e8e8e8\",\n \"#e4acac\",\n \"#c85a5a\",\n \"#b0d5df\",\n \"#ad9ea5\",\n \"#985356\",\n \"#64acbe\",\n \"#627f8c\",\n \"#574249\"\n ]\n },\n {\n name: \"BuPu\",\n colors: [\n \"#e8e8e8\",\n \"#ace4e4\",\n \"#5ac8c8\",\n \"#dfb0d6\",\n \"#a5add3\",\n \"#5698b9\",\n \"#be64ac\",\n \"#8c62aa\",\n \"#3b4994\"\n ]\n },\n {\n name: \"PuOr\",\n colors: [\n \"#e8e8e8\",\n \"#e4d9ac\",\n \"#c8b35a\",\n \"#cbb8d7\",\n \"#c8ada0\",\n \"#af8e53\",\n \"#9972af\",\n \"#976b82\",\n \"#804d36\"\n ]\n }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"labels = [\"low\", \"med\", \"high\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":207,"value":"n = Math.floor(Math.sqrt(colors.length))","pinned":false,"hidden":false,"mode":"ojs"},{"id":209,"value":"x = d3.scaleQuantile(Array.from(data.values(), d => d[0]), d3.range(n))","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"y = d3.scaleQuantile(Array.from(data.values(), d => d[1]), d3.range(n))","pinned":false,"hidden":false,"mode":"ojs"},{"id":395,"value":"path = d3.geoPath()","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"color = {\n return value => {\n if (!value) return \"#ccc\";\n let [a, b] = value;\n return colors[y(b) + x(a) * n];\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"format = (value) => {\n if (!value) return \"N/A\";\n let [a, b] = value;\n return `${a}% ${data.title[0]}${labels[x(a)] && ` (${labels[x(a)]})`}\n${b}% ${data.title[1]}${labels[y(b)] && ` (${labels[y(b)]})`}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":714,"value":"nyc = await await FileAttachment(\"nyc.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":434,"value":"data = {\n const d = features.map(\n ({ properties: { GISJOIN, percent_1, income_hhi } }) => [\n GISJOIN,\n [+percent_1, +income_hhi]\n ]\n );\n\n return Object.assign(new Map(d), {\n title: ['% Tree Cover', 'Median HH Income']\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":422,"value":"features = await (await FileAttachment(\"bivar-treecover@4.geojson\").json())\n .features","pinned":false,"hidden":false,"mode":"ojs"},{"id":522,"value":"import { Tooltip } from \"@clhenrick/tooltip-component\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}} 2f:"$2e:body"