25:["$","title",null,{"children":"d3.line( ) | Luis Abner Torres Rojas | Observable"}] 49:T7e1,style = html``4a:[{"id":"808f1c240aca834ab2f2c25c042cdadecbe54305bbe5c9f8a0f487aa9292a981d5e0912807157c6752f4f493d1005bf8fac7ca23fee0b7e3c49069086f77619a","href":"https://static.observableusercontent.com/files/808f1c240aca834ab2f2c25c042cdadecbe54305bbe5c9f8a0f487aa9292a981d5e0912807157c6752f4f493d1005bf8fac7ca23fee0b7e3c49069086f77619a","name":"search@1.tsv","type":"text/tab-separated-values","lastModified":1687654291029.814,"size":25243}] 29:{"id":"f65bb8059a89b752","slug":null,"title":"d3.line( )","thumbnail":"81504769c30031cbf095358a8adad4344be6efdf232a2b41974caf72979b61f5","access_level":"public","create_time":"$D2023-06-25T00:51:31.029Z","update_time":"$D2023-06-25T00:51:31.029Z","view_time":null,"first_public_time":"$D2023-06-25T00:51:31.029Z","has_unpublished_edits":null,"fork":{"id":"483d4b18008c397a","slug":"line_chart","title":"d3.line( )","owner":{"id":"6661932e6ac85aef","login":"sandraviz","name":"Sandraviz"}},"stars":0,"starred":false,"owner":{"type":"team","id":"1ff1b822c97d981f","login":"luistorres-rojas6","name":"Luis Abner Torres Rojas","avatar_url":"https://avatars-next.observableusercontent.com/1d3aaeb962609e525a68b7783978c3ce485cb8891af7ed357d333427a0af4b25","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":609,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"bd43b447eeaaae53","login":"luistorres-rojas7","name":"Luis Rojas","avatar_url":"https://avatars-next.observableusercontent.com/e286345b05355985708e0ecec780fe18d7d9536a67ba0630b26f55a650016640","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"1ff1b822c97d981f","login":"luistorres-rojas6","name":"Luis Abner Torres Rojas","avatar_url":"https://avatars-next.observableusercontent.com/1d3aaeb962609e525a68b7783978c3ce485cb8891af7ed357d333427a0af4b25","tier":"starter_2024","role":"editor"},{"type":"individual","id":"bd43b447eeaaae53","login":"luistorres-rojas7","name":"Luis Rojas","avatar_url":"https://avatars-next.observableusercontent.com/e286345b05355985708e0ecec780fe18d7d9536a67ba0630b26f55a650016640","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"d3.line( )","cells":[{"id":167,"value":"# d3.line( )","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":480,"value":"## Simple HTML example","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":464,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":484,"value":"## D3 Line chart\nGoogle search results for the term Addiction over time (2015-2021)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3,"value":"chart = {\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]);\n\n svg\n .append(\"path\")\n .datum(data)\n .attr(\"class\", \"line\")\n .attr(\"d\", line);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"md` ### Scale`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"y = d3\n .scaleLinear()\n .domain([0, 25])\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":246,"value":"md` ### Axes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"md` ### Generators`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":419,"value":"line(data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"md` ### Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":404,"value":"data_raw = d3.tsvParse(await FileAttachment(\"search@1.tsv\").text())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"parseDate = d3.timeParse(\"%m%Y\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"formatDate = d3.timeFormat(\"%b%y\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"md` \n---\n### Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"margin = ({top: 20, right: 20, bottom: 30, left: 30})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"height = 200","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null