2d:null 2e:["$","title",null,{"children":"14 June 2020: Line Chart with Points and Bar Chart | Di | Observable"}] 33:Ta8f,chart = { const barColor = "#766FAE"; const activeColor = "#5C5597"; const dotColor = "#534e7a"; const lineColor = "#534e7a"; const textColor = "#202630"; const svg = d3.create("svg") .attr("title", data.barChartTitle) .attr("viewBox", [0, 0, width, height]); const maxY = d3.max(data, d => d.y); svg.append("text") .attr("id", "chart-title") .attr("x", 0) .attr("y", 0) .attr("dy", "1em") .style("font-weight", "800") .style("font-size", "clamp(.7rem, 2.5vw, 1.2rem)") // minimum, preferred, maximum .text("Average number of cells written 25 April – 11 June 2020"); svg.append("g") .attr("class", "bars") .selectAll("rect") .data(data) .join("rect") .attr("role", "presentation") .attr("class", "bar") .attr("fill", barColor) .attr("x", d => x(d.x)) .attr("y", d => y(d.y)) .attr("height", d => y(0) - y(d.y)) .attr("width", x.bandwidth()); const lineGroup = svg.append("g") .attr("class", "line-group") .attr("transform", `translate(${x.bandwidth() / 2},0)`) lineGroup.append("path") .datum(data) .attr("role", "presentation") .attr("d", lineGenerator) .style("stroke", lineColor) .style("stroke-width", 3) .style("fill", "none"); lineGroup.selectAll("circle") .data(data) .join("circle") .attr("role", "presentation") .style("fill", dotColor) .attr("cx", d => x(d.x)) .attr("cy", d => y(d.y)) .attr("r", 6); const barLabels = svg.append("g") .attr("id", "bar-values") .attr("fill", textColor) .attr("text-anchor", "middle") .style("text-shadow", "white 1px 1px, white -1px -1px, white 1px -1px, white -1px 1px") .selectAll(".label") .data(data) .join("text"); // Day of week barLabels.append("tspan") .text(d => d.y === maxY ? "Highest average cells written, " + d.x + ":" : d.x + ":") .attr("class", "x-label") .attr("text-anchor", "start") // .attr("x", d => x(d.x)) // Use for debugging .attr("x", -width) .attr("y", d => y(d.y)) .attr("dy", "-.5em"); // Average number of cells barLabels.append("tspan") .text(d => d.y) .attr("class", "y-label") .attr("text-anchor", "middle") .attr("x", (d, i) => x(d.x) + x.bandwidth() / 2) .attr("y", d => y(d.y)) .attr("dy", "-.5em"); svg.append("g") .attr("class", "x-axis") .call(xAxis) .attr("aria-hidden", "true"); svg.append("text") .attr("id", "source") .attr("x", width) .attr("y", height) .attr("dy", "-1em") .attr("text-anchor", "end") .text('@DiDoesDigital'); return svg.node(); }34:Tb65,chart2 = { const barColor = "#766FAE"; const activeColor = "#5C5597"; const dotColor = "#534e7a"; const lineColor = "#534e7a"; const textColor = "#202630"; const svg = d3.create("svg") .attr("title", data.barChartTitle) .attr("viewBox", [0, 0, width, height]); const maxY = d3.max(data, d => d.y); svg.append("text") .attr("id", "chart-title") .attr("x", 0) .attr("y", 0) .attr("dy", "1em") .style("font-weight", "800") .style("font-size", "clamp(.7rem, 2.5vw, 1.2rem)") // minimum, preferred, maximum .text("Average number of cells written 25 April – 11 June 2020"); svg.append("g") .attr("class", "bars") .selectAll("rect") .data(data) .join("rect") .attr("role", "presentation") .attr("class", "bar") .attr("fill", barColor) .attr("x", d => x(d.x)) .attr("y", d => y(d.y)) .attr("height", d => y(0) - y(d.y)) .attr("width", x.bandwidth()); const lineGroup = svg.append("g") .attr("class", "line-group") .attr("transform", `translate(${x.bandwidth() / 2},0)`) const startData = [{x: "Start", y: 0}].concat(data); lineGroup.append("path") .datum(startData) .attr("role", "presentation") .attr("d", d3.line() .x(d => d.x === "Start" ? -(x.bandwidth() / 2) : x(d.x)) .y(d => d.x === "Start" ? margin.top : y(d.y)) .curve(d3.curveMonotoneX)) .style("stroke", lineColor) .style("stroke-width", 3) .style("fill", "none"); lineGroup.selectAll("circle") .data(data) .join("circle") .attr("role", "presentation") .style("fill", dotColor) .attr("cx", d => x(d.x)) .attr("cy", d => y(d.y)) .attr("r", 6); const barLabels = svg.append("g") .attr("id", "bar-values") .attr("fill", textColor) .attr("text-anchor", "middle") .style("text-shadow", "white 1px 1px, white -1px -1px, white 1px -1px, white -1px 1px") .selectAll(".label") .data(data) .join("text"); // Day of week barLabels.append("tspan") .text(d => d.y === maxY ? "Highest average cells written, " + d.x + ":" : d.x + ":") .attr("class", "x-label") .attr("text-anchor", "start") // .attr("x", d => x(d.x)) // Use for debugging .attr("x", -width) .attr("y", d => y(d.y)) .attr("dy", "-.5em"); // Average number of cells barLabels.append("tspan") .text(d => d.y) .attr("class", "y-label") .attr("text-anchor", "middle") .attr("x", (d, i) => x(d.x) + x.bandwidth() / 2) .attr("y", d => y(d.y)) .attr("dy", "-.5em"); svg.append("g") .attr("class", "x-axis") .call(xAxis) .attr("aria-hidden", "true"); svg.append("text") .attr("id", "source") .attr("x", width) .attr("y", height) .attr("dy", "-1em") .attr("text-anchor", "end") .text('@DiDoesDigital'); return svg.node(); }35:Tc5a,chart3 = { const barColor = "#766FAE"; const activeColor = "#5C5597"; const dotColor = "#534e7a"; const lineColor = "#534e7a"; const textColor = "#202630"; const svg = d3.create("svg") .attr("title", data.barChartTitle) .attr("viewBox", [0, 0, width, height]); const maxY = d3.max(data, d => d.y); svg.append("text") .attr("id", "chart-title") .attr("x", 0) .attr("y", 0) .attr("dy", "1em") .style("font-weight", "800") .style("font-size", "clamp(.7rem, 2.5vw, 1.2rem)") // minimum, preferred, maximum .text("Average number of cells written 25 April – 11 June 2020"); svg.append("g") .attr("class", "bars") .selectAll("rect") .data(data) .join("rect") .attr("role", "presentation") .attr("class", "bar") .attr("fill", barColor) .attr("x", d => x(d.x)) .attr("y", d => y(d.y)) .attr("height", d => y(0) - y(d.y)) .attr("width", x.bandwidth()); const lineGroup = svg.append("g") .attr("class", "line-group") .attr("transform", `translate(${x.bandwidth() / 2},0)`) const startData = [{x: "Start", y: 0}].concat(data).concat([{x: "Finish", y: 0}]); lineGroup.append("path") .datum(startData) .attr("role", "presentation") .attr("d", d3.line() .x(d => { if (d.x === "Start") { return -(x.bandwidth() / 2); } if (d.x === "Finish") { return width; } return x(d.x); }) .y(d => { if (d.x === "Start") { return y(data[6].y); } if (d.x === "Finish") { return y(data[0].y); } return y(d.y); }) .curve(d3.curveMonotoneX)) .style("stroke", lineColor) .style("stroke-width", 3) .style("fill", "none"); lineGroup.selectAll("circle") .data(data) .join("circle") .attr("role", "presentation") .style("fill", dotColor) .attr("cx", d => x(d.x)) .attr("cy", d => y(d.y)) .attr("r", 6); const barLabels = svg.append("g") .attr("id", "bar-values") .attr("fill", textColor) .attr("text-anchor", "middle") .style("text-shadow", "white 1px 1px, white -1px -1px, white 1px -1px, white -1px 1px") .selectAll(".label") .data(data) .join("text"); // Day of week barLabels.append("tspan") .text(d => d.y === maxY ? "Highest average cells written, " + d.x + ":" : d.x + ":") .attr("class", "x-label") .attr("text-anchor", "start") // .attr("x", d => x(d.x)) // Use for debugging .attr("x", -width) .attr("y", d => y(d.y)) .attr("dy", "-.5em"); // Average number of cells barLabels.append("tspan") .text(d => d.y) .attr("class", "y-label") .attr("text-anchor", "middle") .attr("x", (d, i) => x(d.x) + x.bandwidth() / 2) .attr("y", d => y(d.y)) .attr("dy", "-.5em"); svg.append("g") .attr("class", "x-axis") .call(xAxis) .attr("aria-hidden", "true"); svg.append("text") .attr("id", "source") .attr("x", width) .attr("y", height) .attr("dy", "-1em") .attr("text-anchor", "end") .text('@DiDoesDigital'); return svg.node(); }36:T41f,render_data_table = (data, options = {}) => { let caption = ""; let ariaLabelledbyCaption = ""; if (options.caption) { caption = `${options.caption}`; ariaLabelledbyCaption = `aria-labelledby="caption"`; } let theadRowHeaderCells; if (options.columns) { theadRowHeaderCells = options.columns.map((d) => { return `${d}` }); } else { theadRowHeaderCells = Object.keys(data[0]).map((d, i) => { return `${d}` }); } let focusable = 'tabindex="0"'; if (options.focusable === false) { focusable = ''; } return html`

${caption} ${theadRowHeaderCells} ${data.map(row => { return html`${Object.values(row).map(col => { return ``; })}`; })}

${col}

`}37:T572,data = { const timeParser = d3.timeParse("%d %b %Y"); const csvString = await FileAttachment("Cells in Journal_ Getting Started with Data Viz - Journal cells - 12 Jun 2020.csv").text(); const rowConversionFunction = ({ "Title": title, "URL": url, "Number of cells": y, "Date": x }) => ({ title, url, x: timeParser(x), dayOfWeek: timeParser(x), y: +y }); let dataObjectTarget = d3.csvParse(csvString, rowConversionFunction); dataObjectTarget = d3.rollups(dataObjectTarget, v => d3.format("d")(d3.mean(v, d => d.y)), d => d3.timeFormat("%a")(d.dayOfWeek)) .map(d => ({x: d[0], y: d[1] })); const extraPropertiesSource = { xAxisLabel: "Day of the week", yAxisLabel: "Cells (mean)", barChartTitle: "This bar chart shows average cells written each day of the week, where Saturday is highlighted with the highest mean cells written of 42", barChartCaption: "This chart shows average cells written each day of the week across notebooks in the “Journal: Getting Started with Data Viz” collection, 25 April – 11 June 2020.", tableCaption: "This table shows average cells written each day of the week across notebooks 25 April – 11 June 2020. Saturday has the highest mean cells written at 42."}; return Object.assign(dataObjectTarget, extraPropertiesSource); }38:[{"id":"4d16383bcf78e318942ab0e452497def429bd4b388cda43c64ffa5a48dea3bf577e9b7176df47a75520f1cec7685eee9fcd930d45db85ccad810e76a4d984128","href":"https://static.observableusercontent.com/files/4d16383bcf78e318942ab0e452497def429bd4b388cda43c64ffa5a48dea3bf577e9b7176df47a75520f1cec7685eee9fcd930d45db85ccad810e76a4d984128","name":"Cells in Journal_ Getting Started with Data Viz - Journal cells - 12 Jun 2020.csv","type":"text/csv","lastModified":1592111964906.958,"size":10718}] 31:{"id":"82a0ac2d0afc75ab","slug":"14-june-2020-line-chart-with-points-and-bar-chart","title":"14 June 2020: Line Chart with Points and Bar Chart","thumbnail":"de58c00d2898180daea9a448c350051b09fc2fe79b25a8a1af7ee9c4fd6faf51","access_level":"public","create_time":"$D2020-06-14T05:19:24.906Z","update_time":"$D2020-06-14T06:27:29.747Z","view_time":null,"first_public_time":"$D2020-06-14T06:27:48.444Z","has_unpublished_edits":null,"fork":{"id":"40fdd2be2bbe05ef","slug":"13-june-2020-accessible-bar-chart-and-accessible-data-table","title":"13 June 2020: Accessible Bar Chart and Accessible Data Table","owner":{"id":"a2b4f87238ecc18c","login":"didoesdigital","name":"Di"}},"stars":3,"starred":false,"owner":{"type":"team","id":"a2b4f87238ecc18c","login":"didoesdigital","name":"Di","avatar_url":"https://avatars-next.observableusercontent.com/0a9ca38d905225337455dc1f1fb979c788c1d0d904071dd82624a90edf934c53","tier":"starter_2024"},"version":8718,"publish_version":8718,"role":null,"authored":false,"authors":[{"type":"individual","id":"32668205beaa5e0d","login":"didoesdigital","name":"Di","avatar_url":"https://avatars-next.observableusercontent.com/0a9ca38d905225337455dc1f1fb979c788c1d0d904071dd82624a90edf934c53","tier":null}],"members":[{"type":"individual","id":"32668205beaa5e0d","login":"didoesdigital","name":"Di","avatar_url":"https://avatars-next.observableusercontent.com/0a9ca38d905225337455dc1f1fb979c788c1d0d904071dd82624a90edf934c53","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"2646dc1fd46613a4","slug":"journal-getting-started-with-data-viz-collection","title":"Journal: Getting Started with Data Viz","owner":{"id":"a2b4f87238ecc18c","login":"didoesdigital","name":"Di"}},"type":"notebook","body":{"titling":"auto","title":"14 June 2020: Line Chart with Points and Bar Chart","cells":[{"id":0,"value":"md`# 14 June 2020: Line Chart with Points and Bar Chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md`After [13 June 2020: Accessible Bar Chart and Accessible Data Table](https://observablehq.com/@didoesdigital/13-june-2020-accessible-bar-chart-and-accessible-data-table), I want to see about combining charts: line and bar charts.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7933,"value":"md`I'm continuing to chart the cells I've written across notebooks in Observable in: [Journal: Getting Started with Data Viz](https://observablehq.com/collection/@didoesdigital/journal-getting-started-with-data-viz-collection).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7473,"value":"md`## Line and bar chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7982,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8656,"value":"md`This is pretty silly, but good to know how stuff works. In particular, when drawing a line, it's useful to show the data points as well to help people understand what the measurements actually are so knowing how to draw circles on line points is handy.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8668,"value":"md`It'd be interesting to see the line extend beyond the first and last data points to give the chart a more finished look.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8671,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8692,"value":"md`Ok, this is effectively making up data, but I do like how it looks. Not sure I'd use this in the real world.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8697,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8705,"value":"md`For the funsies, I gave it a wrap-around effect.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8716,"value":"md`That'll do for today.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7396,"value":"md`## Resources`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8587,"value":"md`Line charts with points:\n\n- [A Line Chart to rule them all by Aymeric](https://observablehq.com/@aymericr/untitled)\n- [Ordinal Scale Line Chart by efrymire](https://observablehq.com/@efrymire/ordinal-scale-line-chart)\n- [2d line chart with delaunay.voronoi interaction vertices by sungryeol park(max)](https://observablehq.com/@rabelais/plain-2d-line-chart-with-delaunay-voronoi-hover)\n- [Let's make a line chart by pstuffa](https://observablehq.com/@pstuffa/lets-make-a-line-chart)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8591,"value":"md`Regression lines:\n\n- [COVID-19 trend in Seoul, Korea 서울의 코로나19 동향 by sungryeol park(max)](https://observablehq.com/@rabelais/covid-19-trend-in-seoul-korea)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7321,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8329,"value":"x = d3.scaleBand()\n .domain(data.map(d => d.x))\n .range([0, width - margin.right])\n .padding(0.1);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8325,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).tickSizeOuter(0));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7487,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(data, d => d.y)]).nice()\n .range([height - margin.bottom, margin.top]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7496,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))\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 .style(\"font-weight\", 800)\n .text(data.yAxisLabel));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8474,"value":"lineGenerator = d3.line()\n .x(d => x(d.x))\n .y(d => y(d.y))\n .curve(d3.curveMonotoneX);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7482,"value":"height = 450;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8015,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7477,"value":"margin = ({top: 48, right: 0, bottom: 60, left: 30})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7618,"value":"typographyStyles = html`\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8043,"value":"dataTableStyles = html`\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7302,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8017,"value":"accessibleDataTable = render_data_table(data, {caption: data.tableCaption, columns: [data.xAxisLabel, data.yAxisLabel], focusable: false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7326,"value":"d3 = require(\"d3@5\", \"d3-array@2.4\", 'd3-regression@v1.2.8')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1"}} 32:"$31:body"