2b:null 2c:["$","title",null,{"children":"Multi-Line Chart (random data) | 3sam3 | Observable"}] 31:T62d,function hover(svg, path) { if ("ontouchstart" in document) svg .style("-webkit-tap-highlight-color", "transparent") .on("touchmove", moved) .on("touchstart", entered) .on("touchend", left) else svg .on("mousemove", moved) .on("mouseenter", entered) .on("mouseleave", left); const dot = svg.append("g") .attr("display", "none"); dot.append("circle") .attr("r", 2.5); dot.append("text") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("text-anchor", "middle") .attr("y", -8); function moved() { d3.event.preventDefault(); const mouse = d3.mouse(this); // dates const xm = x.invert(mouse[0]); const ym = y.invert(mouse[1]); // idx const i1 = d3.bisectLeft(data.dates, xm, 1); const i0 = i1 - 1; // index where dot is going to be. const i = xm - data.dates[i0] > data.dates[i1] - xm ? i1 : i0; const s = d3.least(data.series, d => Math.abs(d.values[i] - ym)); // closest date path.attr("stroke", d => d === s ? null : "#ddd").filter(d => d === s).raise(); dot.attr("transform", `translate(${x(data.dates[i])},${y(s.values[i])})`); // console.log(y(s.values[i])) // console.log(s.values[i]) // console.log(s) dot.select("text").text(s.name); } function entered() { path.style("mix-blend-mode", null).attr("stroke", "#ddd"); dot.attr("display", null); } function left() { path.style("mix-blend-mode", "multiply").attr("stroke", null); dot.attr("display", "none"); } }32:[] 2f:{"id":"efa7f5c87f6f6aa4","slug":"multi-line-chart-custom-data","title":"Multi-Line Chart (random data)","thumbnail":"cd9deff8068333dd85965d0c36673303fb78181ef18672b04186a1fb82955db8","access_level":"public","create_time":"$D2020-08-26T06:33:04.288Z","update_time":"$D2020-09-03T07:00:48.979Z","view_time":null,"first_public_time":"$D2020-08-26T08:35:39.481Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"08b5afb0fd1070b2","login":"3sam3","name":"3sam3","avatar_url":"https://avatars-next.observableusercontent.com/a2e96c3b112567f40c9b46c7e406188726d78758a61e3629e14416286b3868b8","tier":"starter_2024"},"version":570,"publish_version":570,"role":null,"authored":false,"authors":[{"type":"individual","id":"fc3b848d8db8ae07","login":"3sam3","name":"3sam3","avatar_url":"https://avatars-next.observableusercontent.com/a2e96c3b112567f40c9b46c7e406188726d78758a61e3629e14416286b3868b8","tier":null}],"members":[{"type":"individual","id":"fc3b848d8db8ae07","login":"3sam3","name":"3sam3","avatar_url":"https://avatars-next.observableusercontent.com/a2e96c3b112567f40c9b46c7e406188726d78758a61e3629e14416286b3868b8","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"8d988b71e2e99afd","slug":"d3","title":"D3","owner":{"id":"08b5afb0fd1070b2","login":"3sam3","name":"3sam3"}},"type":"notebook","body":{"title":"Multi-Line Chart (random data)","cells":[{"id":1,"value":"md`# Multi-Line Chart (random data)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":507,"value":"viewof stacked = {\n const form = html`\n \n `;\n \n form.onchange = () => form.dispatchEvent(new CustomEvent(\"input\")); // Safari\n form.oninput = event => {\n form.value = (form.checkbox.checked) ? true : false;\n };\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":521,"value":"stacked","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":29,"value":"chart = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n .style(\"overflow\", \"visible\");\n\n svg.append(\"g\")\n .call(xAxis);\n\n svg.append(\"g\")\n .call(yAxis);\n\n const path = svg.append(\"g\")\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"steelblue\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"stroke-linecap\", \"round\")\n .selectAll(\"path\")\n .data(data.series)\n .join(\"path\")\n .style(\"mix-blend-mode\", \"multiply\")\n .attr(\"d\", d => line(d.values));\n\n svg.call(hover, path);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":230,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":402,"value":"numOfSeries = 5","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":414,"value":"xAxisCount = 10","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":48,"value":"margin = ({top: 20, right: 20, bottom: 30, left: 30})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":52,"value":"x = d3.scaleUtc()\n .domain(d3.extent(data.dates))\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":61,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(data.series, d => d3.max(d.values))]).nice()\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":70,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":74,"value":"yAxis = (g, scale = y) => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(scale))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 3)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(data.y))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3,"value":"data = {\n let dates = [];\n const series = [];\n for(let i = 0; i < xAxisCount; i++) {\n dates.push(new Date - 1000*60*60*24*i);\n }\n dates.reverse()\n for(let i = 0; i < numOfSeries; i++) {\n const tmp = { name : `${i}`, values: [] }\n for(let j = 0; j < xAxisCount; j++) {\n tmp.values.push(Math.random()*10);\n }\n series.push(tmp);\n }\n \n const stackedData = new Array(xAxisCount).fill(0);\n for(let i = 0; i < xAxisCount; i++ ) {\n for(let j = 0; j < series.length; j++ ) {\n stackedData[i] += series[j].values[i]\n }\n }\n \n return {\n y: \"% Unemployment\",\n series,\n stackedData,\n dates\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":44,"value":"height = 300","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":65,"value":"line = d3.line()\n .defined(d => !isNaN(d))\n .x((d, i) => x(data.dates[i]))\n .y(d => y(d))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"d3 = require(\"d3@5\", \"d3-array@2\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"