2a:null 2b:["$","title",null,{"children":"Directly labelling lines | Harry Stevens | Observable"}] 30:T436,{ const svg = d3.select(DOM.svg(width, height)); const g = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); g.append("g") .call(xAxisGenerator) .attr("transform", `translate(0, ${chartHeight})`); g.append("g") .call(yAxisGenerator); g.selectAll(".line") .data(lineData) .enter().append("path") .attr("d", d => lineGenerator(d.data)) .style("fill", "none") .style("stroke", d => d.light) .style("stroke-width", 2) .style("stroke-linejoin", "round"); const valueLabel = g.selectAll(".label") .data(lineData) .enter().append("g") .attr("transform", d => `translate(${xScale(last(d.data).date)}, ${yScale(last(d.data).value)})`); valueLabel.append("circle") .attr("r", 4) .style("stroke", "white") .style("fill", d => d.light); valueLabel.append("text") .text(d => last(d.data).value) .attr("dy", 5) .attr("dx", 10) .style("font-family", "monospace") .style("fill", d => d.dark); return svg.node() }31:Ta16,{ const svg = d3.select(DOM.svg(width, height)); const g = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); g.append("g") .call(xAxisGenerator) .attr("transform", `translate(0, ${chartHeight})`); g.append("g") .call(yAxisGenerator); g.selectAll(".line") .data(lineData) .enter().append("path") .attr("d", d => lineGenerator(d.data)) .style("fill", "none") .style("stroke", d => d.light) .style("stroke-width", 2) .style("stroke-linejoin", "round"); const valueLabel = g.selectAll(".label") .data(lineData) .enter().append("g") .attr("class", "label") .attr("transform", d => `translate(${xScale(last(d.data).date)}, ${yScale(last(d.data).value)})`); valueLabel.append("circle") .attr("r", 4) .style("stroke", "white") .style("fill", d => d.light); valueLabel.append("text") .text(d => last(d.data).value) .attr("dy", 5) .attr("dx", 10) .style("font-family", "monospace") .style("fill", d => d.dark); yield svg.node(); g.selectAll(".line-label") .data(largestVoronoiData) .enter().append("text") .text(d => d.key) .attr("transform", d => `translate(${d.point})`) .style("font-family", "sans-serif") .style("text-anchor", "middle") .style("font-weight", "600") .style("fill", d => d.colors.dark) .each((d, i, e) => { let newD = Object.assign({}, d); function somePointsInLine(){ let {width: labelWidth, height: labelHeight} = e[i].getBoundingClientRect(), labelPadding = 5, labelLeft = -labelPadding + newD.point[0] - labelWidth / 2, labelRight = labelPadding + newD.point[0] + labelWidth / 2, labelTop = -6 - labelPadding + newD.point[1] - labelHeight / 2, labelBottom = -6 + labelPadding + newD.point[1] + labelHeight / 2, labelRect = [ [labelLeft, labelTop], [labelRight, labelTop], [labelRight, labelBottom], [labelLeft, labelBottom] ]; return flatData.some(d0 => geometric.pointInPolygon([xScale(d0.date), yScale(d0.value)], labelRect)) } let i0 = 1, iMax = 50; while(somePointsInLine() && i0 < iMax){ newD.point = geometric.pointTranslate(d.point, d.angle, i0); d3.select(e[i]).attr("transform", `translate(${newD.point})`); i0++; } }); }32:T60f,{ const svg = d3.select(DOM.svg(width, height)); const g = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); g.append("g") .call(xAxisGenerator) .attr("transform", `translate(0, ${chartHeight})`); g.append("g") .call(yAxisGenerator); g.selectAll(".voronoi-cell") .data(voronoiData) .enter().append("path") .attr("d", d => "M" + d.join("L") + "Z") .style("fill", d => d.data.colors.light) .style("fill-opacity", .3) .style("stroke", "#fff"); g.selectAll(".line") .data(lineData) .enter().append("path") .attr("d", d => lineGenerator(d.data)) .style("fill", "none") .style("stroke", d => d.light) .style("stroke-width", 2) .style("stroke-linejoin", "round"); const valueLabel = g.selectAll(".label") .data(lineData) .enter().append("g") .attr("transform", d => `translate(${xScale(last(d.data).date)}, ${yScale(last(d.data).value)})`); valueLabel.append("circle") .attr("r", 4) .style("stroke", "white") .style("fill", d => d.light); valueLabel.append("text") .text(d => last(d.data).value) .attr("dy", 5) .attr("dx", 10) .style("font-family", "monospace") .style("fill", d => d.dark); g.selectAll(".line-point") .data(flatData) .enter().append("circle") .attr("r", 2) .attr("transform", d => `translate(${xScale(d.date)}, ${yScale(d.value)})`) .style("fill", d => d.colors.dark) return svg.node() }33:T5e8,{ const svg = d3.select(DOM.svg(width, height)); const g = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); g.append("g") .call(xAxisGenerator) .attr("transform", `translate(0, ${chartHeight})`); g.append("g") .call(yAxisGenerator); g.selectAll(".voronoi-cell") .data(largestVoronoiData) .enter().append("path") .attr("d", d => "M" + d.polygon.join("L") + "Z") .style("fill", d => d.colors.light) .style("fill-opacity", .3) g.selectAll(".line") .data(lineData) .enter().append("path") .attr("d", d => lineGenerator(d.data)) .style("fill", "none") .style("stroke", d => d.light) .style("stroke-width", 2) .style("stroke-linejoin", "round"); const valueLabel = g.selectAll(".label") .data(lineData) .enter().append("g") .attr("transform", d => `translate(${xScale(last(d.data).date)}, ${yScale(last(d.data).value)})`); valueLabel.append("circle") .attr("r", 4) .style("stroke", "white") .style("fill", d => d.dark); valueLabel.append("text") .text(d => last(d.data).value) .attr("dy", 5) .attr("dx", 10) .style("font-family", "monospace") .style("fill", d => d.dark); g.selectAll(".line-point") .data(largestVoronoiData) .enter().append("circle") .attr("r", 2) .attr("transform", d => `translate(${d.point})`) .style("fill", d => d.colors.dark); return svg.node() }34:T65f,{ const svg = d3.select(DOM.svg(width, height)); const g = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); g.append("g") .call(xAxisGenerator) .attr("transform", `translate(0, ${chartHeight})`); g.append("g") .call(yAxisGenerator); g.selectAll(".voronoi-cell") .data(largestVoronoiData) .enter().append("path") .attr("d", d => "M" + d.polygon.join("L") + "Z") .style("fill", d => d.colors.light) .style("fill-opacity", .3); g.selectAll(".line") .data(lineData) .enter().append("path") .attr("d", d => lineGenerator(d.data)) .style("fill", "none") .style("stroke", d => d.light) .style("stroke-width", 2) .style("stroke-linejoin", "round"); const valueLabel = g.selectAll(".label") .data(lineData) .enter().append("g") .attr("transform", d => `translate(${xScale(last(d.data).date)}, ${yScale(last(d.data).value)})`); valueLabel.append("circle") .attr("r", 4) .style("stroke", "white") .style("fill", d => d.light); valueLabel.append("text") .text(d => last(d.data).value) .attr("dy", 5) .attr("dx", 10) .style("font-family", "monospace") .style("fill", d => d.dark); g.selectAll(".line-label") .data(largestVoronoiData) .enter().append("text") .text(d => d.key) .attr("transform", d => `translate(${d.point})`) .style("font-family", "sans-serif") .style("text-anchor", "middle") .style("font-weight", "600") .style("fill", d => d.colors.dark); return svg.node() }35:T98b,{ const svg = d3.select(DOM.svg(width, height)); const g = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); g.append("g") .call(xAxisGenerator) .attr("transform", `translate(0, ${chartHeight})`); g.append("g") .call(yAxisGenerator); g.selectAll(".voronoi-cell") .data(largestVoronoiData) .enter().append("path") .attr("d", d => "M" + d.polygon.join("L") + "Z") .style("fill", d => d.colors.light) .style("fill-opacity", .3); g.selectAll(".line") .data(lineData) .enter().append("path") .attr("d", d => lineGenerator(d.data)) .style("fill", "none") .style("stroke", d => d.light) .style("stroke-width", 2) .style("stroke-linejoin", "round"); const valueLabel = g.selectAll(".label") .data(lineData) .enter().append("g") .attr("class", "label") .attr("transform", d => `translate(${xScale(last(d.data).date)}, ${yScale(last(d.data).value)})`); valueLabel.append("circle") .attr("r", 4) .style("stroke", "white") .style("fill", d => d.light); valueLabel.append("text") .text(d => last(d.data).value) .attr("dy", 5) .attr("dx", 10) .style("font-family", "monospace") .style("fill", d => d.dark); yield svg.node(); g.selectAll(".line-label") .data(largestVoronoiData) .enter().append("text") .text(d => d.key) .attr("transform", d => `translate(${d.point})`) .style("font-family", "sans-serif") .style("text-anchor", "middle") .style("font-weight", "600") .style("fill", d => d.colors.dark) .each((d, i, e) => { let {width: labelWidth, height: labelHeight} = e[i].getBoundingClientRect(), labelPadding = 5, labelLeft = -labelPadding + d.point[0] - labelWidth / 2, labelRight = labelPadding + d.point[0] + labelWidth / 2, labelTop = -6 + -labelPadding + d.point[1] - labelHeight / 2, labelBottom = -6 + labelPadding + d.point[1] + labelHeight / 2, labelRect = [ [labelLeft, labelTop], [labelRight, labelTop], [labelRight, labelBottom], [labelLeft, labelBottom] ]; g.append("polygon") .attr("points", labelRect.join(" ")) .style("fill", "none") .style("stroke", "black"); }); }36:Td74,{ const svg = d3.select(DOM.svg(width, height)); const g = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); g.append("g") .call(xAxisGenerator) .attr("transform", `translate(0, ${chartHeight})`); g.append("g") .call(yAxisGenerator); g.selectAll(".voronoi-cell") .data(largestVoronoiData) .enter().append("path") .attr("d", d => "M" + d.polygon.join("L") + "Z") .style("fill", d => d.colors.light) .style("fill-opacity", .3); g.selectAll(".line") .data(lineData) .enter().append("path") .attr("d", d => lineGenerator(d.data)) .style("fill", "none") .style("stroke", d => d.light) .style("stroke-width", 2) .style("stroke-linejoin", "round"); const valueLabel = g.selectAll(".label") .data(lineData) .enter().append("g") .attr("class", "label") .attr("transform", d => `translate(${xScale(last(d.data).date)}, ${yScale(last(d.data).value)})`); valueLabel.append("circle") .attr("r", 4) .style("stroke", "white") .style("fill", d => d.light); valueLabel.append("text") .text(d => last(d.data).value) .attr("dy", 5) .attr("dx", 10) .style("font-family", "monospace") .style("fill", d => d.dark); g.selectAll(".centroid-point") .data(largestVoronoiData) .enter().append("circle") .attr("r", 2) .attr("transform", d => `translate(${d.centroid})`); g.selectAll(".centroid-line") .data(largestVoronoiData) .enter().append("line") .attr("x1", d => d.point[0]) .attr("x2", d => d.centroid[0]) .attr("y1", d => d.point[1]) .attr("y2", d => d.centroid[1]) .style("stroke", "black"); yield svg.node(); g.selectAll(".line-label") .data(largestVoronoiData) .enter().append("text") .text(d => d.key) .attr("transform", d => `translate(${d.point})`) .style("font-family", "sans-serif") .style("text-anchor", "middle") .style("font-weight", "600") .style("fill", d => d.colors.dark) .each((d, i, e) => { let newD = Object.assign({}, d); let bBox = g.append("polygon") .style("fill", "none") .style("stroke", "black"); function somePointsInLine(){ let {width: labelWidth, height: labelHeight} = e[i].getBoundingClientRect(), labelPadding = 5, labelLeft = -labelPadding + newD.point[0] - labelWidth / 2, labelRight = labelPadding + newD.point[0] + labelWidth / 2, labelTop = -6 + -labelPadding + newD.point[1] - labelHeight / 2, labelBottom = -6 + labelPadding + newD.point[1] + labelHeight / 2, labelRect = [ [labelLeft, labelTop], [labelRight, labelTop], [labelRight, labelBottom], [labelLeft, labelBottom] ]; bBox.attr("points", labelRect.join(" ")); return flatData.some(d0 => geometric.pointInPolygon([xScale(d0.date), yScale(d0.value)], labelRect)) } let i0 = 1, iMax = 50; while(somePointsInLine() && i0 < iMax){ newD.point = geometric.pointTranslate(d.point, d.angle, i0); d3.select(e[i]).attr("transform", `translate(${newD.point})`); i0++; } }); }37:Ta20,{ const svg = d3.select(DOM.svg(width, height)); const g = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); g.append("g") .call(xAxisGenerator) .attr("transform", `translate(0, ${chartHeight})`); g.append("g") .call(yAxisGenerator); g.selectAll(".line") .data(lineData) .enter().append("path") .attr("d", d => lineGenerator(d.data)) .style("fill", "none") .style("stroke", d => d.light) .style("stroke-width", 2) .style("stroke-linejoin", "round"); const valueLabel = g.selectAll(".label") .data(lineData) .enter().append("g") .attr("class", "label") .attr("transform", d => `translate(${xScale(last(d.data).date)}, ${yScale(last(d.data).value)})`); valueLabel.append("circle") .attr("r", 4) .style("stroke", "white") .style("fill", d => d.light); valueLabel.append("text") .text(d => last(d.data).value) .attr("dy", 5) .attr("dx", 10) .style("font-family", "monospace") .style("fill", d => d.dark); yield svg.node(); g.selectAll(".line-label") .data(largestVoronoiData) .enter().append("text") .text(d => d.key) .attr("transform", d => `translate(${d.point})`) .style("font-family", "sans-serif") .style("text-anchor", "middle") .style("font-weight", "600") .style("fill", d => d.colors.dark) .each((d, i, e) => { let newD = Object.assign({}, d); function somePointsInLine(){ let {width: labelWidth, height: labelHeight} = e[i].getBoundingClientRect(), labelPadding = 5, labelLeft = -labelPadding + newD.point[0] - labelWidth / 2, labelRight = labelPadding + newD.point[0] + labelWidth / 2, labelTop = -6 + -labelPadding + newD.point[1] - labelHeight / 2, labelBottom = -6 + labelPadding + newD.point[1] + labelHeight / 2, labelRect = [ [labelLeft, labelTop], [labelRight, labelTop], [labelRight, labelBottom], [labelLeft, labelBottom] ]; return flatData.some(d0 => geometric.pointInPolygon([xScale(d0.date), yScale(d0.value)], labelRect)); } let i0 = 1, iMax = 50; while(somePointsInLine() && i0 < iMax){ newD.point = geometric.pointTranslate(d.point, d.angle, i0); d3.select(e[i]).attr("transform", `translate(${newD.point})`); i0++; } }); }38:[] 2e:{"id":"0d9c2574383fac15","slug":"directly-labelling-lines","title":"Directly labelling lines","thumbnail":"6f065c383ba4f028408329cc8115532b5cf777ac19ec9ef7f7646d06a2cd2619","access_level":"public","create_time":"$D2019-01-19T04:57:50.264Z","update_time":"$D2024-10-09T18:46:35.762Z","view_time":null,"first_public_time":"$D2019-01-19T19:18:19.380Z","has_unpublished_edits":null,"fork":false,"stars":226,"starred":false,"owner":{"type":"team","id":"be420f6a83563b92","login":"harrystevens","name":"Harry Stevens","avatar_url":"https://avatars-next.observableusercontent.com/bc9bae4b7e30062b343ae978a13454e29cd3f2daf3a800d0024043686ddf094b","tier":"starter_2024"},"version":564,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"61e2153e05789733","login":"harrystevens","name":"Harry Stevens","avatar_url":"https://avatars-next.observableusercontent.com/bc9bae4b7e30062b343ae978a13454e29cd3f2daf3a800d0024043686ddf094b","tier":null}],"members":[{"type":"individual","id":"61e2153e05789733","login":"harrystevens","name":"Harry Stevens","avatar_url":"https://avatars-next.observableusercontent.com/bc9bae4b7e30062b343ae978a13454e29cd3f2daf3a800d0024043686ddf094b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":179,"collection":{"id":"9a6e5f2b3fa19cce","slug":"tutorials","title":"Tutorials","owner":{"id":"be420f6a83563b92","login":"harrystevens","name":"Harry Stevens"}},"type":"notebook","body":{"titling":"auto","title":"Directly labelling lines","cells":[{"id":143,"value":"md`# Directly labelling lines`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"md`A common goal of data visualization is to show how some values have changed over time. More often than not, you will use a line chart for this purpose. But when you want to show several different values in the same chart, you will need to come up with a way to explain to your reader which line represents which value.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"md`All too often, chart designers will resort to adding an external legend. When confronted with such designs, readers must glance back and forth between the chart and the legend, wasting cognitive energy on a task that does not contribute to understanding the data. The solution? Label the lines directly.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":367,"value":"md`Below, I present a method for directly labelling lines that works with many data sets.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"md`Step 1: Compute the voronoi diagram for each point on the chart.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"md`Step 2: For each line's points, calculate the largest voronoi cell.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"md`Step 3: Place the label at the point of the largest cell.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"md`Step 4: Compute the bounding box of each label.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"md`Step 5: Move the label towards the voronoi cell's centroid until none of the lines' points fall within the label's bounding box.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"md`Nice chart.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"md`I have tested this method on several charts, and it works very well for charts with three or fewer lines, and sometimes even more. It also works on small screens, though not as frequently.\n\nNote that in the while loop, I set the iMax variable to 50. That represents the maximum number of pixels from the point of origin that you are willing to move the label. If the loop reaches iMax without having found a suitable position for the label (or if any of the labels' polygons overlap each other, another potential problem), then it is time to abandon this folly and make a legend. Hey, at least you tried.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":562,"value":"toc({ heading: \"Jump to code:\", selector: \"h2\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"md`## Dimensions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"margin = ({\n left: 20,\n bottom: 20,\n right: 60,\n top: 10\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"height = width * .5;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"chartWidth = width - margin.left - margin.right;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"chartHeight = height - margin.top - margin.bottom;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"md`## Scales`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"xScale = d3.scaleTime()\n .domain([new Date(2010, 0, 1), new Date(2010, 3, 1)])\n .range([0, chartWidth]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"yScale = d3.scaleLinear()\n .domain([0, 20])\n .range([chartHeight, 0]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"md`## Generators`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"xAxisGenerator = d3.axisBottom(xScale)\n .tickValues(d3.range(0, 4).map(d => new Date(2010, d, 1)));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"yAxisGenerator = d3.axisLeft(yScale)\n .tickValues(d3.range(0, 30, 5));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"lineGenerator = d3.line()\n .x(d => xScale(d.date))\n .y(d => yScale(d.value));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"md`### Data arrays`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"fruits = d3.csv(\"https://gist.githubusercontent.com/HarryStevens/2ca674b53b0ea1ab806a3e704386c4c9/raw/3828df9890fbe0ff8b5259e2e3f9ebd1d38984bc/fruits.csv\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"data = parseData(fruits)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"lineData = parseLineData(data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"flatData = parseFlatData(data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"voronoiData = {\n const v = [...new d3.Delaunay((flatData.map(d => [xScale(d.date), yScale(d.value)])).flat()).voronoi([0, 0, chartWidth, chartHeight]).cellPolygons()];\n for (let i = 0, l = v.length; i < l; i++){\n v[i].data = flatData[i];\n }\n return v;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"largestVoronoiData = parseLargestVoronoi(flatData, voronoiData)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"colors = ({\n Apples: {\n light: \"#fb9a99\",\n dark: \"#e31a1c\"\n },\n Blueberries: {\n light: \"#a6cee3\",\n dark: \"#1f78b4\"\n },\n Carrots: {\n light: \"#fdbf6f\",\n dark: \"#ff7f00\"\n },\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"md `### Data parsers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"parseData = data => {\n const output = [];\n for (let i = 0, l = data.length; i < l; i++){\n let d = data[i],\n o = {},\n s = d.Date.split(\"/\"),\n yyyy = +(\"20\" + s[2]),\n mm = s[0] - 1,\n dd = +s[1];\n\n o.date = new Date(yyyy, mm, dd);\n\n for (let col in d){\n if (col !== \"Date\"){\n o[col] = +d[col];\n }\n }\n \n output.push(o);\n }\n \n return output;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"parseLineData = data => {\n const output = [];\n \n let i = 0;\n for (let col in data[0]){\n if (i > 0) {\n let o = {\n key: col, \n light: colors[col].light,\n dark: colors[col].dark,\n data: []\n };\n \n for (let i0 = 0, l0 = data.length; i0 < l0; i0++){\n let d0 = data[i0];\n \n o.data.push({\n date: d0.date,\n value: d0[col]\n });\n }\n \n output.push(o);\n }\n i++;\n }\n \n return output;\n} ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"parseFlatData = data => {\n const output = [],\n columns = [];\n \n let i = 0;\n for (let col in data[0]){\n columns.push(col);\n if (i > 0) {\n for (let i0 = 0, l0 = data.length; i0 < l0; i0++){\n let d0 = data[i0];\n \n output.push({\n date: d0.date,\n value: d0[col],\n key: col,\n colors: colors[col]\n });\n }\n\n }\n i++;\n }\n \n output.columns = columns;\n return output; \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"parseLargestVoronoi = (flatData, voronoiData) => {\n let output = {};\n for (let i = 1, l = flatData.columns.length; i < l; i++){\n output[flatData.columns[i]] = {area: 0}\n }\n \n for (let i = 0, l = voronoiData.length; i < l; i++){\n let o = {},\n cell = voronoiData[i],\n area = geometric.polygonArea(cell),\n key = cell.data.key;\n \n if (area > output[key].area){\n output[key].centroid = geometric.polygonCentroid(cell);\n output[key].point = [xScale(cell.data.date), yScale(cell.data.value)];\n output[key].angle = geometric.lineAngle([output[key].point, output[key].centroid]);\n output[key].area = area;\n output[key].polygon = cell;\n output[key].colors = colors[key];\n }\n }\n \n let output2 = [];\n for (let key in output){\n output[key].key = key;\n output2.push(output[key]);\n }\n \n return output2;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"last = array => array[array.length - 1]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"md`## Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":558,"value":"import {toc} from \"@harrystevens/toc@129\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"geometric = require(\"geometric@2\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1"}} 2f:"$2e:body"