3c:null 3d:["$","title",null,{"children":"Line and Area Charts | DataaVizHMC | Observable"}] 43:T478,{ // Setup const svg = d3.create('svg') .attr('width', width) .attr('height', height); // Create the axes const xAxis = d3.axisBottom(x) // change the format of the tick marks to only show month names .tickFormat(d3.timeFormat('%B')); svg.append('g') // move x-axis down to the bottom .attr('transform', `translate(0,${height - margin.bottom})`) .call(xAxis); const yAxis = d3.axisLeft(y); svg.append('g') // move y-axis to the left to account for left margin .attr('transform', `translate(${margin.left})`) .call(yAxis) .call(g => g.select('.domain').remove()) // add axis label .append('text') .attr('fill', 'black') .attr('text-anchor', 'start') .attr('dominant-baseline', 'hanging') .attr('font-weight', 'bold') .text('Collision Injuries, 2019'); // Draw the line // We are only drawing one line, so we can append one path svg.append('path') .attr('stroke', 'steelblue') .attr('stroke-width', 2) .attr('fill', 'none') .attr('d', line(injuriesByMonth)); return svg.node(); }44:T410,The code for adding the line could be written as ```javascript svg.append('path') .attr('stroke', 'steelblue') .attr('fill', 'none') .attr('d', line(injuriesByMonth)); ``` or ```javascript svg.append('g') .selectAll('path') .data([injuriesByMonth]) // note the brackets .join('path') .attr('stroke', 'steelblue') .attr('fill', 'none') .attr('d', d => line(d)); ``` or ```javascript svg.append('path') .datum(injuriesByMonth) .attr('stroke', 'steelblue') .attr('fill', 'none') .attr('d', d => line(d)); ``` or ```javascript svg.append('path') .datum(injuriesByMonth) .attr('stroke', 'steelblue') .attr('fill', 'none') .attr('d', line); ``` Note that in second example we wrap `injuriesByMonth` in an array before passing it to `data()` and in the last two, we are using `append` and `datum` instead of `data` and `join`. This is because we want to bind the entire `injuriesByMonth` array to a single path, rather than binding each element of the array to a different path.45:T47d,{ // Setup const svg = d3.create('svg') .attr('width', width) .attr('height', height); // Create the axes const xAxis = d3.axisBottom(x) // change the format of the tick marks to only show month names .tickFormat(d3.timeFormat('%B')); svg.append('g') // move x-axis down to the bottom .attr('transform', `translate(0,${height - margin.bottom})`) .call(xAxis); const yAxis = d3.axisLeft(y); svg.append('g') // move y-axis to the left to account for left margin .attr('transform', `translate(${margin.left})`) .call(yAxis) .call(g => g.select('.domain').remove()) // add axis label .append('text') .attr('fill', 'black') .attr('text-anchor', 'start') .attr('dominant-baseline', 'hanging') .attr('font-weight', 'bold') .text('Collision Injuries, 2019'); // Draw the area // we are only drawing one line, so we can append one path svg.append('path') .attr('stroke', 'steelblue') .attr('stroke-width', 2) .attr('fill', 'steelblue') .attr('d', area(injuriesByMonth)); return svg.node(); }46:T4ee,{ // Setup const svg = d3.create('svg') .attr('width', width) .attr('height', height); // Create the axes const xAxis = d3.axisBottom(xband) // change the format of the tick marks to only show month names .tickFormat(d3.timeFormat('%B')); svg.append('g') // move x-axis down to the bottom .attr('transform', `translate(0,${height - margin.bottom})`) .call(xAxis); const yAxis = d3.axisLeft(y); svg.append('g') // move y-axis to the left to account for left margin .attr('transform', `translate(${margin.left})`) .call(yAxis) .call(g => g.select('.domain').remove()) // add axis label .append('text') .attr('fill', 'black') .attr('text-anchor', 'start') .attr('dominant-baseline', 'hanging') .attr('font-weight', 'bold') .text('Collision Injuries, 2019'); // Draw the line // We are only drawing one line, so we can append one path svg.selectAll('rect') .data(injuriesByMonth) .enter().append('rect') .attr('x', d => xband(d.date)) .attr('width', d => xband.bandwidth()) .attr('y', d => y(d.injuries)) .attr('height', d => y(0) - y(d.injuries)) .attr('fill', 'steelblue') return svg.node(); }47:T745,{ const margin = {top: 20, right: 30, bottom: 20, left: 40}; const width = 600; const height = 400; const svg = d3.create('svg') .attr('width', width) .attr('height', height); const row = d3.scaleBand() .domain(boroughs) .range([margin.top, height - margin.bottom]) .paddingInner(0.3); const x = d3.scaleTime() .domain(d3.extent(months)) .range([margin.left, width - margin.right]); const y = d3.scaleLinear() .domain([0, maxSingleBoroughInjuries]).nice() .range([row.bandwidth(), 0]); const xAxis = d3.axisBottom(x).tickFormat(d3.timeFormat('%B')); const yAxis = d3.axisLeft(y).ticks(5); const area = d3.area() .x(d => x(d.date)) .y1(d => y(d.injuries)) .y0(y(0)); const rows = svg.append('g') .selectAll('g') .data(injuriesByBorough) .join('g') .attr('class', 'row') .attr('fill', d => boroughColor(d.borough)) .attr('transform', d => `translate(0,${row(d.borough)})`); svg.append('g') .attr('transform', `translate(0,${height - margin.bottom})`) .call(xAxis) .call(g => g.select('.domain').remove()); rows.append('g') .attr('transform', `translate(${margin.left})`) .attr('class', 'y-axis') .call(yAxis) .call(g => g.select('.domain').remove()); svg.select('.y-axis') .append('text') .attr('text-anchor', 'start') .attr('dominant-baseline', 'middle') .attr('fill', 'black') .attr('x', 5) .attr('y', 7) .text('Injured Count'); rows.append('text') .text(d => d.borough) .attr('font-size', 12) .attr('fill', 'black') .attr('font-family', 'sans-serif') .attr('y', -5) .attr('x', 5); rows.append('path') .datum(d => d.counts) .attr('d', area); return svg.node(); }48:T819,{ const margin = {top: 20, right: 30, bottom: 20, left: 40}; const width = 600; const height = 400; const svg = d3.create('svg') .attr('width', width) .attr('height', height); const row = d3.scaleBand() .domain(boroughs) .range([margin.top, height - margin.bottom]) .paddingInner(0.3); const x = d3.scaleTime() .domain(d3.extent(months)) .range([margin.left, width - margin.right]); const y = d3.scaleLinear() .domain([0, maxSingleBoroughInjuries]).nice() .range([row.bandwidth(), 0]); const xAxis = d3.axisBottom(x).tickFormat(d3.timeFormat('%B')); const yAxis = d3.axisLeft(y).ticks(5); const line = d3.line() .x(d => x(d.date)) .y(d => y(d.injuries)) const rows = svg.append('g') .selectAll('g') .data(injuriesByBorough) .join('g') .attr('transform', d => `translate(0,${row(d.borough)})`); svg.append('g') .attr('transform', `translate(0,${height - margin.bottom})`) .call(xAxis) .call(g => g.select('.domain').remove()); rows.append('g') .attr('transform', `translate(${margin.left})`) .attr('class', 'y-axis') .call(yAxis) .call(g => g.select('.domain').remove()); svg.select('.y-axis') .append('text') .attr('text-anchor', 'start') .attr('dominant-baseline', 'middle') .attr('fill', 'black') .attr('x', 5) .attr('y', 7) .text('Injured Count'); rows.append('text') .text(d => d.borough) .attr('font-size', 12) .attr('fill', 'black') .attr('font-family', 'sans-serif') .attr('y', -5) .attr('x', 5); rows.append('path') .attr('stroke', d => boroughColor(d.borough)) .attr('stroke-width', 2) .attr('fill', 'none') .attr('d', d => line(d.counts)); // baseline rows.append('line') .attr('stroke', '#d3d3d3') .attr('x1', margin.left) .attr('x2', width - margin.left) .attr('y1', row.bandwidth()) .attr('y2', row.bandwidth()) return svg.node(); }49:[{"id":"38a74bdf2955d6def6f599e3bb0dcc9dfc6d37b5f2ff58983f47d497d4d4c4b43dcb920514f34debe082fbe6ff433b65ec9a5a543c89ac44430cff473f8b0b88","href":"https://static.observableusercontent.com/files/38a74bdf2955d6def6f599e3bb0dcc9dfc6d37b5f2ff58983f47d497d4d4c4b43dcb920514f34debe082fbe6ff433b65ec9a5a543c89ac44430cff473f8b0b88","name":"imports-exports.csv","type":"text/csv","lastModified":1739997027081.798,"size":2768},{"id":"2d902b89083d0f46dc942aea6c558c259850b68e44bda24fc8966a766745c2948bdab69c7d9d1e27ae88ab2baa5493fd389ef3d0f2e6ff35eacaa94bb20e1377","href":"https://static.observableusercontent.com/files/2d902b89083d0f46dc942aea6c558c259850b68e44bda24fc8966a766745c2948bdab69c7d9d1e27ae88ab2baa5493fd389ef3d0f2e6ff35eacaa94bb20e1377","name":"image.png","type":"image/png","lastModified":1739997263130.291,"size":1428188}] 41:{"id":"fa4385ab84ba8f62","slug":null,"title":"Line and Area Charts","thumbnail":"9696d6ca0e4327c004f805ee3d0f989f4b7c4690cf82ea72193640703007d26a","access_level":"unlisted","create_time":"$D2025-02-19T20:28:16.297Z","update_time":"$D2025-04-09T19:34:54.793Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":{"id":"33d112bda2056d78","slug":"lines-and-maps","title":"Line and Area Charts","owner":{"id":"c5bcb913b5b2fffd","login":"nyuvis","name":"EBVL"}},"stars":0,"starred":false,"owner":{"type":"team","id":"9aa36b4aa72e6b7c","login":"dataavizhmc","name":"DataaVizHMC","avatar_url":"https://avatars-next.observableusercontent.com/f2d727851ab4dd36ae51dde52223c9a775470157acb8c109a24c78435ec11037","tier":"starter_2024","bio":""},"version":672,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"74942dd6d6baa727","login":"gabe-hope3","name":"Gabe Hope","avatar_url":"https://avatars-next.observableusercontent.com/d4aa0361a0af1ee7fd565ca01cfe4c6274d25c9d4ec3891b0e82e5307ad05c45","tier":null,"bio":""}],"members":[{"type":"team","id":"9aa36b4aa72e6b7c","login":"dataavizhmc","name":"DataaVizHMC","avatar_url":"https://avatars-next.observableusercontent.com/f2d727851ab4dd36ae51dde52223c9a775470157acb8c109a24c78435ec11037","tier":"starter_2024","role":"editor"},{"type":"individual","id":"74942dd6d6baa727","login":"gabe-hope3","name":"Gabe Hope","avatar_url":"https://avatars-next.observableusercontent.com/d4aa0361a0af1ee7fd565ca01cfe4c6274d25c9d4ec3891b0e82e5307ad05c45","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Line and Area Charts","cells":[{"id":0,"value":"md`# Line and Area Charts\n\n[Link to Bar Plots Notebook](https://observablehq.com/d/128049c5d62ea2dd)\n\nIn the [SVG and D3 Basics](/@nyuvis/d3-introduction) notebook, we learned that we can use an SVG [\\`\\`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path) element to draw complex lines.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"The `d` attribute sets the path's shape. It would be annoying for us to have to calculate the appropriate value for that attribute ourselves. Thankfully, we can use D3's [line generator](https://d3js.org/d3-shape/line) to handle that.\n\nIn this notebook, we'll use the NYC vehicle collision data from [NYC Open Data](https://data.cityofnewyork.us/Public-Safety/Motor-Vehicle-Collisions-Crashes/h9gi-nx95). For our first example, let's say we want to make a line chart that shows the total number of injuries by month.\n\nBelow we have an array of objects where each object has a `date` and `injuries` property. The date property contains a [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) object.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":37,"value":"injuriesByMonth","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"md`To start, we define the size of our visualization.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"margin = ({top: 30, right: 30, bottom: 20, left: 40})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"width","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"Next, we make our scales. For our x-scale, we are using [`d3.scaleTime`](https://d3js.org/d3-scale/time), which is a linear scale where the domain contains `Date` objects. Note that `d3.scaleTime` only works with `Date` objects. If our months were represented as integers, for example, then we would use a normal linear scale.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":557,"value":"dateExtent = d3.extent(injuriesByMonth, d => d.date)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"x = d3.scaleTime()\n .domain(dateExtent)\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":563,"value":"maxInjuries = d3.max(injuriesByMonth, d => d.injuries)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"y = d3.scaleLinear()\n .domain([0, maxInjuries]).nice()\n .range([height - margin.bottom, margin.top]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":660,"value":"dateUnique = [...new Set(injuriesByMonth.map(d => d.date))]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":658,"value":"xband = d3.scaleBand()\n .domain(dateUnique)\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"Now that we have our scales, we can use `d3.line()` to create a line generator. We will pass it functions to define how to get the x position and y position of a data point. As a reminder, one data point looks like this:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":571,"value":"injuriesByMonth[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"line = d3.line()\n .x(d => x(d.date))\n .y(d => y(d.injuries))\n .curve(d3.curveCardinal)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"md`\\`line\\` is a function. If we pass our data to it, then it will return the appropriate value for our \\`d\\` attribute. Note that the data that you pass to \\`line\\` must be sorted by time.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"line(injuriesByMonth)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":575,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":90,"value":"md`Now we can draw the line chart.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"$43","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":464,"value":"$44","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":103,"value":"md`If we want to have an area chart instead of a line chart, then we can use \\`d3.area()\\`. It behaves similarly to \\`d3.line()\\`. One difference is that instead of just specifiying one y-position, we specify two. \\`y1\\` sets the top position of the area and \\`y0\\` sets the bottom position.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"area = d3.area()\n .x(d => x(d.date))\n .y1(d => y(d.injuries))\n .y0(d => y(0))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"area(injuriesByMonth)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":584,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":107,"value":"$45","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":656,"value":"dateBand = d3.scaleBand().dom","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":654,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"md`Using areas instead of lines can make smaller charts easier to read. Compare these two examples.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":617,"value":"## Exercise\n\n![image.png](${await FileAttachment(\"image.png\").url()})\n\nBelow is a dataset of imports and exports similar the Playfair visualizations shown above. Try to use this dataset to recreate the two visualizations above.\n\n*Note: this data does not include the dates, you can just plot the index of each observation on the x-axis.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":613,"value":"imports_exports = FileAttachment(\"imports-exports.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":623,"value":"// Write your answer here","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":632,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":625,"value":"**Challenge:** Consider how you might represent the missing information from the first chart in the second, while still using a positional encoding for \"balance\". ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":627,"value":"// Write your answer here","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"md`------------\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"dataset = (await d3.csv(url, crash => ({\n date: d3.timeParse('%m/%d/%Y')(crash.date),\n zip: crash.zip,\n borough: crash.borough,\n injured: +crash.injured,\n}))).filter(d => d.borough !== '' && d.injured >= 1 && d.zip !== '')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"injuriesByMonth = {\n const counts = d3.rollup(dataset,\n collisions => d3.sum(collisions, c => c.injured),\n d => d3.timeMonth(d.date).getTime());\n \n return Array.from(counts, (([date, count]) => ({\n date: new Date(date),\n injuries: count\n })));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"import {\n url,\n color as boroughColor,\n boroughs,\n months,\n dataByBorough as injuriesByBorough,\n maxSingleBoroughInjuries\n} from \"@nyuvis/graphical-encoding-examples\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"import {legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"d3 = require(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 42:"$41:body"