30:T7e1,style = html``31:[{"id":"808f1c240aca834ab2f2c25c042cdadecbe54305bbe5c9f8a0f487aa9292a981d5e0912807157c6752f4f493d1005bf8fac7ca23fee0b7e3c49069086f77619a","href":"https://static.observableusercontent.com/files/808f1c240aca834ab2f2c25c042cdadecbe54305bbe5c9f8a0f487aa9292a981d5e0912807157c6752f4f493d1005bf8fac7ca23fee0b7e3c49069086f77619a","name":"search@1.tsv","type":"text/tab-separated-values","lastModified":1620648643739.139,"size":25243}] 2e:{"title":"d3.line( )","cells":[{"id":167,"value":"# d3.line( )","pinned":false,"hidden":false,"mode":"md"},{"id":250,"value":"md`\n\nSVG and Canvas are intentionally generic; they allow for any type of graphic. D3 meanwhile is intended for visualization, and so provides a specialized vocabulary of *shapes* which are functions that generate path data.\n\nA path’s shape is specified in the [SVG path data language](https://www.w3.org/TR/SVG/paths.html#TheDProperty), which is akin to commands you’d give such as:\n\n* Mx,y - move to the specified point [*x*, *y*]\n* Lx,y - draw a line to the specified point [*x*, *y*]\n\nAs with other aspects of D3, d3.line are driven by data: the line generator exposes accessors that control how the input data are mapped to a visual representation. For example, you might define a line generator for a time series by scaling fields of your data to fit the chart.\n\nPlease find the detailed information in the d3 api documentation: [d3.line](https://github.com/d3/d3-shape) and this [notebook](https://observablehq.com/@d3/learn-d3-shapes) \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":480,"value":"## Simple HTML example","pinned":false,"hidden":false,"mode":"md"},{"id":464,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":484,"value":"## D3 Line chart\nGoogle search results for the term Addiction over time (2015-2021)","pinned":false,"hidden":false,"mode":"md"},{"id":3,"value":"chart = {\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]);\n\n svg.append(\"path\").datum(data).attr(\"class\", \"line\").attr(\"d\", line);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":192,"value":"md` ### Scale`","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"x = d3.scaleTime()\n .domain(d3.extent(data, d => d.date))\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"y = d3\n .scaleLinear()\n .domain(d3.extent(data, (d) => d.Addiction))\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs"},{"id":246,"value":"md` ### Axes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .attr(\"class\",\"y-axis\")\n .call(d3.axisLeft(y)\n .tickValues([0, 10, 20])\n .tickSize(-width))","pinned":true,"hidden":false,"mode":"ojs"},{"id":235,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .attr(\"class\",\"x-axis\")\n .call(d3.axisBottom(x)\n .tickFormat(formatDate)\n .ticks(14))","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":"md` ### Generators`","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"line = d3.line()\n .defined(d => d.Addiction > 0)\n .x(d => x(d.date))\n .y(d => y(d.Addiction))","pinned":true,"hidden":false,"mode":"ojs"},{"id":419,"value":"line(data)","pinned":true,"hidden":false,"mode":"ojs"},{"id":189,"value":"md` ### Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"data = d3.tsvParse(await FileAttachment(\"search@1.tsv\").text(), ({date, Addiction}) => ({date: parseDate(date), Addiction: +Addiction}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":404,"value":"data_raw = d3.tsvParse(await FileAttachment(\"search@1.tsv\").text())","pinned":true,"hidden":false,"mode":"ojs"},{"id":93,"value":"parseDate = d3.timeParse(\"%m%Y\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":289,"value":"formatDate = d3.timeFormat(\"%b%y\");","pinned":true,"hidden":false,"mode":"ojs"},{"id":173,"value":"md` \n---\n### Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"margin = ({top: 20, right: 20, bottom: 30, left: 30})","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"height = 200","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}