24:null 25:["$","title",null,{"children":"Diversion and capture rates from 2016-2019 | Zhi Keng He | Observable"}] 2a:T74e,_nav = { const nav = html`

`; const items = d3 .select(nav) .selectAll('div') .data(types, types => types) .join('div') .style('display', 'flex') .style('padding-right', '0.5em') .style('background', d => (selectedType === d.name ? '#cdecff' : 'white')) .html( d => `${d.name}` ) .on('click', (event, d) => { mutable selectedType = d.name; }); //info popups d3.selectAll('.description-tip') .selectAll('*') .remove(); const tooltip = d3 .select('body') .append('div') .attr('class', 'description-tip') .style('visibility', 'hidden'); items .filter(d => d.description) .append('svg') .style('margin', 'auto') .attr('width', '1.25em') .attr('height', '1em') .attr('viewBox', '0 0 512 512') .append('path') .attr('class', 'info') .attr( 'd', 'M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z' ) .on("mouseover", (event, d) => { tooltip.text(d.description); tooltip.style("visibility", "visible"); }) .on("mousemove", event => { tooltip .style("top", event.y - 10 + "px") .style("left", event.x + 10 + "px"); }) .on("mouseout", () => tooltip.style("visibility", "hidden")); return nav; }2b:Tc6e,_map = { const container = html`

`; const width = 600, height = 500; const svg = d3 .select(container) .append('div') .attr('id', 'map') .append('svg') .attr('width', width) .attr('height', height); const data = await FileAttachment("comm_dist.geojson").json(); const center = d3.geoCentroid(data); const scale = 76000; const offset = [width / 2, height / 2 - 100]; //set up tooltip const div = d3 .select(container) .append("div") .classed("tooltip", true); const tooltip = new Tooltip(div); //render features const projection = d3 .geoMercator() .scale(scale) .center(center) .translate(offset); const path = d3.geoPath(projection); const features = svg .append('g') .selectAll('path') .data(data.features) .enter() .append('path') .attr('d', path) .on('mouseover', (event, d) => tooltip.display(d, tooltipContents)) .on('mousemove', event => tooltip.move(event)) .on('mouseout', event => tooltip.hide(event)) .attr('class', 'district') .attr('fill', d => { //lookup const cb = +d.properties.BoroCD - 400; const districts = selectedRate.find(({ board }) => board === cb); return colorScale(districts.data); }); //add labels const labels = svg .selectAll('.label') .data(data.features) .enter() .append('g') .attr('class', 'label'); labels .append('text') .attr('class', 'buffer') .attr('transform', d => `translate (${path.centroid(d)}) scale(1)`) .text(d => +d.properties.BoroCD - 400); labels .append('text') .attr('class', 'label') .attr('transform', d => `translate (${path.centroid(d)})`) .text(d => +d.properties.BoroCD - 400); return container; }2c:T6a5,function tooltipContents(datum) { const cb = +datum.properties.BoroCD - 400; function lookupRate(metric, cd) { const find = rates[metric].find(({ board }) => board === cb); return `

${metric} (${find.data}): ${find.index + 1} / 14

`; } const text = html`

${lookupRate('Total Diversion', cb) + lookupRate('Paper Capture', cb) + lookupRate('MGPC Capture', cb) + lookupRate('Total Capture', cb)}

`; const diversionIndex = selectedRate.findIndex(({ board }) => board === cb); const height = 100, width = 300, margin = 30; const svg = d3 .select(text) .append('svg') .attr('width', width) .attr('height', height); const xScale = d3 .scaleBand() .domain(selectedRate.map(d => d.board)) .range([margin + 10, width - margin]) .padding(0.1); const yScale = d3 .scaleLinear() .domain([d3.max(selectedRate, d => d.data), 0]) .range([5, height - 5]); const yAxis = g => g .attr("transform", `translate(${margin + 5},0)`) .call(d3.axisLeft(yScale).ticks(2, "%")); svg.append('g').call(yAxis); svg .append('g') .attr('fill', '#8C8C8C') .selectAll('rect') .data(selectedRate) .join('rect') .attr("x", d => xScale(d.board)) .attr("y", d => yScale(d.data)) .attr("height", d => yScale(0) - yScale(d.data)) .attr("width", xScale.bandwidth()) .attr("fill", d => { if (d.board === cb) { return '#4682b4'; } else { return 'grey'; } }); return text.innerHTML; }2d:Te1f,rates = ({ "Paper Capture": [ { board: 11, index: 0, data: 0.55 }, { board: 2, index: 1, data: 0.51 }, { board: 1, index: 2, data: 0.49 }, { board: 7, index: 3, data: 0.48 }, { board: 5, index: 4, data: 0.48 }, { board: 9, index: 5, data: 0.41 }, { board: 10, index: 6, data: 0.38 }, { board: 13, index: 7, data: 0.35 }, { board: 12, index: 8, data: 0.34 }, { board: 4, index: 9, data: 0.34 }, { board: 3, index: 10, data: 0.32 }, { board: 14, index: 11, data: 0.31 }, { board: 6, index: 12, data: 0.3 }, { board: 8, index: 13, data: 0.29 } ], "MGPC Capture": [ { board: 5, index: 0, data: 0.87 }, { board: 13, index: 1, data: 0.87 }, { board: 10, index: 2, data: 0.83 }, { board: 11, index: 3, data: 0.83 }, { board: 9, index: 4, data: 0.77 }, { board: 1, index: 5, data: 0.76 }, { board: 2, index: 6, data: 0.73 }, { board: 6, index: 7, data: 0.71 }, { board: 12, index: 8, data: 0.67 }, { board: 7, index: 9, data: 0.65 }, { board: 3, index: 10, data: 0.62 }, { board: 4, index: 11, data: 0.6 }, { board: 8, index: 12, data: 0.52 }, { board: 14, index: 13, data: 0.42 } ], "Total Capture": [ { board: 11, index: 0, data: 0.64 }, { board: 5, index: 1, data: 0.62 }, { board: 2, index: 2, data: 0.59 }, { board: 1, index: 3, data: 0.59 }, { board: 9, index: 4, data: 0.54 }, { board: 7, index: 5, data: 0.54 }, { board: 10, index: 6, data: 0.53 }, { board: 13, index: 7, data: 0.52 }, { board: 12, index: 8, data: 0.48 }, { board: 4, index: 9, data: 0.44 }, { board: 3, index: 10, data: 0.43 }, { board: 6, index: 11, data: 0.41 }, { board: 8, index: 12, data: 0.35 }, { board: 14, index: 13, data: 0.35 } ], "Total Diversion": [ { board: 11, index: 0, data: 0.25 }, { board: 5, index: 1, data: 0.24 }, { board: 6, index: 2, data: 0.21 }, { board: 2, index: 3, data: 0.21 }, { board: 9, index: 4, data: 0.2 }, { board: 10, index: 5, data: 0.2 }, { board: 1, index: 6, data: 0.2 }, { board: 7, index: 7, data: 0.2 }, { board: 13, index: 8, data: 0.19 }, { board: 8, index: 9, data: 0.17 }, { board: 4, index: 10, data: 0.15 }, { board: 3, index: 11, data: 0.14 }, { board: 12, index: 12, data: 0.14 }, { board: 14, index: 13, data: 0.13 } ] })2e:T54a,//mod from https://observablehq.com/@clhenrick/tooltip-component class Tooltip { constructor(selection) { if (!selection || !selection.size()) { throw "Requires a tooltip div element selection"; } this._selection = selection; } move(event) { if (!event) return; const margin = 20; const { clientX: x, clientY: y } = event; const { width, height } = this.selection.node().getBoundingClientRect(); const left = this.clamp( margin, x - width / 2, window.innerWidth - width - margin ); const top = window.innerHeight > y + margin + height ? y + margin : y - height - margin; this.selection.style("top", `${top}px`).style("left", `${left}px`); } display(datum, callback) { if (!callback || typeof callback !== "function") { throw "ToolTip.display requires a callback function that returns an HTML string"; } this.selection.style("display", "block").html(callback(datum)); } hide() { this.selection.style("display", "none").html(""); } clamp(min, d, max) { return Math.max(min, Math.min(max, d)); } get selection() { return this._selection; } set selection(sel) { if (sel && sel.size()) { this._selection = sel; } else { throw "selection must be a non-empty selected element"; } } }2f:[{"id":"1ad0d505fa6626910c066d1700119211d8df80577d08f1a815a091d260e5ef6136ee9d20f655a4ec23022a96fd1299637e406ca934c3010709c976d36c35d7ce","href":"https://static.observableusercontent.com/files/1ad0d505fa6626910c066d1700119211d8df80577d08f1a815a091d260e5ef6136ee9d20f655a4ec23022a96fd1299637e406ca934c3010709c976d36c35d7ce","name":"comm_dist.geojson","type":"application/geo+json","lastModified":1615909515259.186,"size":47558}] 28:{"id":"90134dfab5b6c784","slug":"diversion-and-capture-rates-from-2016-2019/2","title":"Diversion and capture rates from 2016-2019","thumbnail":"e0e1249f3c519ad365e4e444eea46a20c14b4934d5235613068c82aefeb72fca","access_level":"public","create_time":"$D2021-03-16T15:37:07.872Z","update_time":"$D2021-03-30T22:08:27.741Z","view_time":null,"first_public_time":"$D2021-03-16T19:02:04.436Z","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":603,"publish_version":603,"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":"Diversion and capture rates from 2016-2019","cells":[{"id":0,"value":"_title = md`# Diversion and capture rates from 2016-2019`","pinned":false,"hidden":false,"mode":"ojs"},{"id":319,"value":"$2a","pinned":false,"hidden":false,"mode":"ojs"},{"id":393,"value":"_legend = legend({\n color: colorScale,\n title: `${selectedType} Rate`,\n tickFormat: \".0%\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"$2b","pinned":false,"hidden":false,"mode":"ojs"},{"id":329,"value":"types = [\n {\n name: 'Total Diversion',\n colorScheme: d3.schemePurples[6],\n description:\n 'Percentage of waste placed in a recycling bin as opposed to a trash bin'\n },\n {\n name: 'Paper Capture',\n colorScheme: d3.schemeGreens[6]\n },\n {\n name: 'MGPC Capture',\n colorScheme: d3.schemeBlues[6],\n description:\n 'Metal/Glass/Plastic and carton recycling; NYC\\s “blue bin” recyclables'\n },\n {\n name: 'Total Capture',\n colorScheme: d3.schemeBuPu[6],\n description:\n 'Percentage of total Paper or Metal/Glass/Plastic in the waste stream that is disposed of by recycling'\n }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"$2c","pinned":false,"hidden":false,"mode":"ojs"},{"id":412,"value":"colorScale = {\n return d3\n .scaleQuantile()\n .domain(selectedRate.map(d => d.data))\n .range(types.find(({ name }) => name === selectedType).colorScheme);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":327,"value":"mutable selectedType = types[0].name","pinned":false,"hidden":false,"mode":"ojs"},{"id":495,"value":"$2d","pinned":false,"hidden":false,"mode":"ojs"},{"id":544,"value":"selectedRate = rates[selectedType]","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs"},{"id":365,"value":"import { legend } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 29:"$28:body"