3f:null 40:["$","title",null,{"children":"简单折线图＋grid lines | onepisya | Observable"}] 46:[{"id":"8e95377e3c9c4e85b1c7ea3a07f70a30bd23c1b1e307b8a623e62cec1dab785b0c730c26259d9f38fbdc297c4a80111607e8b19296362622778b162aaa424d20","href":"https://static.observableusercontent.com/files/8e95377e3c9c4e85b1c7ea3a07f70a30bd23c1b1e307b8a623e62cec1dab785b0c730c26259d9f38fbdc297c4a80111607e8b19296362622778b162aaa424d20","name":"GOOG.csv","type":"text/csv","lastModified":1660997960678.568,"size":20077}] 44:{"id":"90b1c62f927fe32e","slug":"grid-lines","title":"简单折线图＋grid lines","thumbnail":"a29cf54240d715d31224ffcd0ddbf6145360c29f921355ba2d68b61a9d95c42f","access_level":"public","create_time":"$D2022-08-20T12:19:20.678Z","update_time":"$D2022-08-20T12:26:00.024Z","view_time":null,"first_public_time":"$D2022-08-20T12:20:20.502Z","has_unpublished_edits":null,"fork":{"id":"102525e50426c122","slug":"simple-line-chart-with-grid-lines","title":"Simple line chart with grid lines","owner":{"id":"c5b28440eed0ca02","login":"jeantimex","name":"Su"}},"stars":1,"starred":false,"owner":{"type":"team","id":"0fe483e8c08c0572","login":"onepisya","name":"onepisya","avatar_url":"https://avatars-next.observableusercontent.com/f153ff05aa3994274d5a61ed6d97bdf9e0a9ab1fe7549a7e79705384d2fc880a","tier":"starter_2024","bio":"","following":false},"version":162,"publish_version":162,"role":null,"authored":false,"authors":[{"type":"individual","id":"821368b74f0848d2","login":"onepisya","name":"onepisya","avatar_url":"https://avatars-next.observableusercontent.com/f153ff05aa3994274d5a61ed6d97bdf9e0a9ab1fe7549a7e79705384d2fc880a","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"821368b74f0848d2","login":"onepisya","name":"onepisya","avatar_url":"https://avatars-next.observableusercontent.com/f153ff05aa3994274d5a61ed6d97bdf9e0a9ab1fe7549a7e79705384d2fc880a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"d75b5bb613c35fe2","slug":"d3learn","title":"D3Learn","owner":{"id":"0fe483e8c08c0572","login":"onepisya","name":"onepisya"}},"type":"notebook","body":{"titling":"auto","title":"简单折线图＋grid lines","cells":[{"id":0,"value":"md`# 简单折线图＋grid lines`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"md`# Simple line chart with grid lines`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md`This is a follow up of my previous tutorial [How to draw a simple line chart](https://observablehq.com/@jeantimex/how-to-draw-a-basic-line-chart). We are going to add some grid lines to the following line chart.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"{\n // Create an empty SVG with specified width and height.\n const svg = d3.select(DOM.svg(width, height));\n \n // Draw the x and y axes.\n svg.append('g').call(xAxis)\n svg.append('g').call(yAxis)\n \n // Draw the line.\n svg.append('path')\n .datum(data)\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":54,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"width = 960","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"margin = ({top: 20, right: 20, bottom: 30, left: 40})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"data = (d3.csvParse(await FileAttachment(\"GOOG.csv\").text(), d3.autoType)).map(({Date, Close}) => ({date: Date, value: Close}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"xScale = d3.scaleTime()\n .domain(d3.extent(data, d => d.date))\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"yScale = d3.scaleLinear()\n .domain([0, d3.max(data, (d) => d.value)]).nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"xAxis = (g) => g\n .attr('transform', `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(xScale))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"yAxis = (g) => g\n .attr('transform', `translate(${margin.left},0)`)\n .call(d3.axisLeft(yScale))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"line = d3.line()\n .defined(d => !isNaN(d.value))\n .x(d => xScale(d.date))\n .y(d => yScale(d.value))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"md`Above is what we have for a simple line chart, now let's create two extra functions that draw the grid lines on x and y axes:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"xGrid = (g) => g\n .attr('class', 'grid-lines')\n .selectAll('line')\n .data(xScale.ticks())\n .join('line')\n .attr('x1', d => xScale(d))\n .attr('x2', d => xScale(d))\n .attr('y1', margin.top)\n .attr('y2', height - margin.bottom)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"md`[*scale*.ticks](https://github.com/d3/d3-scale/blob/master/README.md#continuous_ticks) returns an array of values sampled from the scale’s domain. The ticks depend on the scale’s type and domain, but not its range. In this case, *xScale.ticks()* will return the sampled dates based on the provided data.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"md`[*selection*.join](https://github.com/d3/d3-selection/blob/master/README.md#selection_join) appends, removes and reorders elements as necessary to match the data that was previously bound by [*selection*.data](https://github.com/d3/d3-selection/blob/master/README.md#selection_data), returning the [merged](https://github.com/d3/d3-selection/blob/master/README.md#selection_merge) enter and update selection.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"md`So we don't need to do *.data(xScale.ticks()).enter().append('line')*, we just do *.data(xScale.ticks()).join('line')*.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"md`Let's do the same to create the yGrid function:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"yGrid = (g) =>\n g\n .attr(\"class\", \"grid-lines\")\n // 后面如果没有 line 元素我们使用 join 之后会添加上的。\n .selectAll(\"line\")\n .data(yScale.ticks())\n .join(\"line\")\n // 这里的 data 其实唯一的作用就是确定我们画几根线。我们并没有去使用这个数据。\n .attr(\"x1\", margin.left)\n .attr(\"x2\", width - margin.right)\n .attr(\"y1\", (d) => yScale(d))\n .attr(\"y2\", (d) => yScale(d))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"yScale.ticks()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"md`Now let's draw the grid lines on the SVG:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"{\n // Create an empty SVG with specified width and height.\n const svg = d3.select(DOM.svg(width, height));\n \n // Draw the x and y axes.\n svg.append('g').call(xAxis)\n svg.append('g').call(yAxis)\n \n // Draw the grid lines.\n svg.append('g').call(xGrid)\n svg.append('g').call(yGrid)\n \n // Draw the line.\n svg.append('path')\n .datum(data)\n .attr('d', line);\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"## 使用 htl 画图","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":127,"value":"{\n return htl.html`\n`\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"html`\n`\n// 定义样式网格颜色以及透明度","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"md`The source code can be found [here](https://bl.ocks.org/jeantimex/68e456aa4a536b245997b28330adace2).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 45:"$44:body"