2e:null 2f:["$","title",null,{"children":"Line and Area Charts | nyuinfovisspring26 | Observable"}] 34: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(); }35: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.36:T45a,{ // 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-width', 2) .attr('fill', 'steelblue') .attr('d', area(injuriesByMonth)); return svg.node(); }37: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(); }38: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(); }39:[] 32:{"id":"5083201703c107db","slug":"line-and-area-charts","title":"Line and Area Charts","thumbnail":"b0970e2eb1b6c18a16b3972917540f2ebcce48089796732a2e9c5fc7f4acba31","access_level":"public","create_time":"$D2024-08-26T19:30:25.364Z","update_time":"$D2024-10-01T23:26:17.676Z","view_time":null,"first_public_time":"$D2024-09-30T19:10:57.118Z","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":"118f9fd118972451","login":"nyuinfovisspring26","name":"nyuinfovisspring26","avatar_url":"https://avatars-next.observableusercontent.com/e0f5d66ee3cf6b6d58d3a4421e06da81d6ad6094744a4a190dcb8dbd26c0f542","tier":"pro_2024"},"version":611,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4ccb8c7aefe8f092","login":"robert-krueger","name":"Robert Krueger","avatar_url":"https://avatars-next.observableusercontent.com/38aea4a405e12671493d571e75c2a4fef2d7a5971986be85a23edf3ba202f3cb","tier":null}],"members":[{"type":"individual","id":"9d973b8b4160d8a4","login":"chahat-kalsi2","name":"Chahat Kalsi","avatar_url":"https://avatars-next.observableusercontent.com/ffa9c19bea26058814dda8d6c3735322ad89e4426d385aba611aafc84df099e1","tier":null,"role":"editor"},{"type":"team","id":"118f9fd118972451","login":"nyuinfovisspring26","name":"nyuinfovisspring26","avatar_url":"https://avatars-next.observableusercontent.com/e0f5d66ee3cf6b6d58d3a4421e06da81d6ad6094744a4a190dcb8dbd26c0f542","tier":"pro_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":17,"collection":{"id":"c1b0c78867fb37e3","slug":"guides-and-examples","title":"Guides and Examples","owner":{"id":"118f9fd118972451","login":"nyuinfovisspring26","name":"nyuinfovisspring26"}},"type":"notebook","body":{"title":"Line and Area Charts","cells":[{"id":0,"value":"md`# Line and Area Charts\n\nIn the [SVG and D3 Basics](/@nyuinfovis/svg-and-d3-basics) 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","output":"$undefined","database":"$undefined"},{"id":6,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$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","output":"","database":"$undefined"},{"id":37,"value":"injuriesByMonth","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","output":"$undefined","database":"$undefined"},{"id":60,"value":"width","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"","database":"$undefined"},{"id":557,"value":"dateExtent = d3.extent(injuriesByMonth, d => d.date)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":563,"value":"maxInjuries = d3.max(injuriesByMonth, d => d.injuries)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","output":"","database":"$undefined"},{"id":571,"value":"injuriesByMonth[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"line = d3.line()\n .x(d => x(d.date))\n .y(d => y(d.injuries))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":43,"value":"line(injuriesByMonth)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":575,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":51,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":464,"value":"$35","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$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","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","output":"$undefined","database":"$undefined"},{"id":114,"value":"area(injuriesByMonth)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":584,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":107,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":116,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"md`------------\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","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","output":"$undefined","database":"$undefined"},{"id":255,"value":"import {legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"d3 = require(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W39","stdlib":"1","titling":"auto"}} 33:"$32:body"