2c:null 2d:["$","title",null,{"children":"17 June 2020: D3 Bar Chart with Textured Line | Di | Observable"}] 32:T16e2,chart = { const barColor = "#766FAE"; const activeColor = "#5C5597"; const dotColor = "#534e7a"; const lineColor = "#534e7a"; const svg = d3.create("svg") .attr("title", data.barChartTitle) .attr("viewBox", [0, 0, width, height]); const maxY = d3.max(data, d => d.y); const pattern = svg.append("defs") .append("pattern") .attr("id", "dots") .attr("x", 0) .attr("y", 0) .attr("width", 60) .attr("height", 60) .attr("patternUnits", "userSpaceOnUse") const title = 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("Number of cells written across notebooks 25 April – 11 June 2020"); const legend = svg.append("g"); // Invisible legend title legend.attr("aria-label", "Legend"); legend.append("rect") .attr("role", "presentation") .attr("fill", "url(#dots)") .attr("width", 13) .attr("height", 13) .attr("rx", 2) .attr("x", margin.left / 2) .attr("y", margin.top * 0.66); legend.append("text") .text("Highest number of cells written") .attr("x", margin.left / 2 + 20) .attr("y", margin.top * 0.66 + 12); pattern.append("rect") .attr("role", "presentation") .attr("fill", barColor) .attr("x", 0) .attr("y", 0) .attr("width", 60) .attr("height", 60); pattern.append("path") .attr("fill", "#3F3B68") .attr("d", `${patternPathD}`); svg.append("g") .attr("class", "bars") .selectAll("rect") .data(data) .join("rect") .attr("role", "presentation") .attr("class", d => d.y === maxY ? "bar" : "") .attr("fill", d => d.y === maxY ? activeColor : 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 pencilFilter = svg.append('defs').append('filter') .attr('id', 'pencilTexture') .attr('width','140%') .attr('height','140%') .attr('x','-20%') .attr('y','-20%') .attr('filterUnits','objectBoundingBox') pencilFilter.append('feTurbulence') .attr('type','fractalNoise') .attr('baseFrequency', 2) .attr('numOctaves', 5) .attr('stitchTiles', 'stitch') .attr('result', 't1') pencilFilter.append('feColorMatrix') .attr('type','matrix') .attr('values','0 0 0 0 0, 0 0 0 0 0, 0 0 0 0 0, 0 0 0 -1.5 1.5') .attr('result','t2') pencilFilter.append('feComposite') .attr('operator','in') .attr('in','SourceGraphic') .attr('in2','t2') .attr('result','SourceTextured') pencilFilter.append('feTurbulence') .attr('type','fractalNoise') .attr('baseFrequency', .03) .attr('numOctaves', 5) .attr('seed', '1') .attr('result', 'f1') pencilFilter.append('feDisplacementMap') .attr('xChannelSelector','R') .attr('yChannelSelector', 'G') .attr('scale', 5) .attr('in', 'SourceTextured') .attr('in2', 'f1') .attr('result', 'f4') pencilFilter.append('feTurbulence') .attr('type','fractalNoise') .attr('baseFrequency', .03) .attr('numOctaves', 5) .attr('seed', '10') .attr('result', 'f2') pencilFilter.append('feDisplacementMap') .attr('xChannelSelector','R') .attr('yChannelSelector', 'G') .attr('scale', 5) .attr('in', 'SourceTextured') .attr('in2', 'f2') .attr('result', 'f5') pencilFilter.append('feTurbulence') .attr('type','fractalNoise') .attr('baseFrequency', .03) .attr('numOctaves', 5) .attr('seed', '100') .attr('result', 'f3') pencilFilter.append('feDisplacementMap') .attr('xChannelSelector','R') .attr('yChannelSelector', 'G') .attr('scale', 3) .attr('in', 'SourceTextured') .attr('in2', 'f3') .attr('result', 'f6') pencilFilter.append('feBlend') .attr('mode','multiply') .attr('in', 'f5') .attr('in2', 'f4') .attr('result', 'out1') pencilFilter.append('feBlend') .attr('mode','multiply') .attr('in', 'out1') .attr('in2', 'f6') .attr('result', 'out2') const lineGroup = svg.append("g") .attr('filter', 'url(#pencilTexture)') .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"); const barLabels = svg.append("g") .attr("id", "bar-values") .attr("fill", "#202630") .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 number of cells written, " + d.dayOfWeek + ":" : d.dayOfWeek + ":") .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") .call(d3.axisBottom(x).tickFormat(d => d3.timeFormat("%a")(d).substring(0, 1))); svg.append("text") .attr("id", "source") .attr("x", width) .attr("y", height) .attr("dy", "-1em") .attr("text-anchor", "end") .text('@DiDoesDigital'); return svg.node(); }33:T803,patternPathD = "M54.627 0l.83.828-1.415 1.415L51.8 0h2.827zM5.373 0l-.83.828L5.96 2.243 8.2 0H5.374zM48.97 0l3.657 3.657-1.414 1.414L46.143 0h2.828zM11.03 0L7.372 3.657 8.787 5.07 13.857 0H11.03zm32.284 0L49.8 6.485 48.384 7.9l-7.9-7.9h2.83zM16.686 0L10.2 6.485 11.616 7.9l7.9-7.9h-2.83zm20.97 0l9.315 9.314-1.414 1.414L34.828 0h2.83zM22.344 0L13.03 9.314l1.414 1.414L25.172 0h-2.83zM32 0l12.142 12.142-1.414 1.414L30 .828 17.272 13.556l-1.414-1.414L28 0h4zM.284 0l28 28-1.414 1.414L0 2.544V0h.284zM0 5.373l25.456 25.455-1.414 1.415L0 8.2V5.374zm0 5.656l22.627 22.627-1.414 1.414L0 13.86v-2.83zm0 5.656l19.8 19.8-1.415 1.413L0 19.514v-2.83zm0 5.657l16.97 16.97-1.414 1.415L0 25.172v-2.83zM0 28l14.142 14.142-1.414 1.414L0 30.828V28zm0 5.657L11.314 44.97 9.9 46.386l-9.9-9.9v-2.828zm0 5.657L8.485 47.8 7.07 49.212 0 42.143v-2.83zm0 5.657l5.657 5.657-1.414 1.415L0 47.8v-2.83zm0 5.657l2.828 2.83-1.414 1.413L0 53.456v-2.83zM54.627 60L30 35.373 5.373 60H8.2L30 38.2 51.8 60h2.827zm-5.656 0L30 41.03 11.03 60h2.828L30 43.858 46.142 60h2.83zm-5.656 0L30 46.686 16.686 60h2.83L30 49.515 40.485 60h2.83zm-5.657 0L30 52.343 22.343 60h2.83L30 55.172 34.828 60h2.83zM32 60l-2-2-2 2h4zM59.716 0l-28 28 1.414 1.414L60 2.544V0h-.284zM60 5.373L34.544 30.828l1.414 1.415L60 8.2V5.374zm0 5.656L37.373 33.656l1.414 1.414L60 13.86v-2.83zm0 5.656l-19.8 19.8 1.415 1.413L60 19.514v-2.83zm0 5.657l-16.97 16.97 1.414 1.415L60 25.172v-2.83zM60 28L45.858 42.142l1.414 1.414L60 30.828V28zm0 5.657L48.686 44.97l1.415 1.415 9.9-9.9v-2.828zm0 5.657L51.515 47.8l1.414 1.413 7.07-7.07v-2.83zm0 5.657l-5.657 5.657 1.414 1.415L60 47.8v-2.83zm0 5.657l-2.828 2.83 1.414 1.413L60 53.456v-2.83zM39.9 16.385l1.414-1.414L30 3.658 18.686 14.97l1.415 1.415 9.9-9.9 9.9 9.9zm-2.83 2.828l1.415-1.414L30 9.313 21.515 17.8l1.414 1.413 7.07-7.07 7.07 7.07zm-2.827 2.83l1.414-1.416L30 14.97l-5.657 5.657 1.414 1.415L30 17.8l4.243 4.242zm-2.83 2.827l1.415-1.414L30 20.626l-2.828 2.83 1.414 1.414L30 23.456l1.414 1.414zM56.87 59.414L58.284 58 30 29.716 1.716 58l1.414 1.414L30 32.544l26.87 26.87z"; 34: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}

`}35:T5d5,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@1.csv").text(); const rowConversionFunction = ({ "Title": title, "URL": url, "Number of cells": y, "Date": x }) => ({ title, url, x: timeParser(x), dayOfWeek: d3.timeFormat("%a")(timeParser(x)), weekOfYear: d3.timeFormat("%W")(timeParser(x)), y: +y }); let dataObjectTarget = d3.csvParse(csvString, rowConversionFunction); let minWeek = d3.min(dataObjectTarget, d => d.weekOfYear); dataObjectTarget = dataObjectTarget.map(d => ({...d, weekOfYear: "Week " + (d.weekOfYear - minWeek + 1)})); // 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", barChartTitle: "This bar chart shows cells written each day of the week", barChartCaption: "This chart shows cells written each day of the week across notebooks in the “Journal: Getting Started with Data Viz” collection, 25 April – 16 June 2020.", tableCaption: "This table shows cells written each day of the week across notebooks 25 April – 16 June 2020."}; return Object.assign(dataObjectTarget, extraPropertiesSource); }36:[{"id":"4d16383bcf78e318942ab0e452497def429bd4b388cda43c64ffa5a48dea3bf577e9b7176df47a75520f1cec7685eee9fcd930d45db85ccad810e76a4d984128","href":"https://static.observableusercontent.com/files/4d16383bcf78e318942ab0e452497def429bd4b388cda43c64ffa5a48dea3bf577e9b7176df47a75520f1cec7685eee9fcd930d45db85ccad810e76a4d984128","name":"Cells in Journal_ Getting Started with Data Viz - Journal cells - 12 Jun 2020@1.csv","type":"text/csv","lastModified":1592343790503.576,"size":10718}] 30:{"id":"d244d20e663fcb3c","slug":"17-june-2020-d3-bar-chart-with-textured-line","title":"17 June 2020: D3 Bar Chart with Textured Line","thumbnail":"f7468d8dc3e841adcfe0abb66e12f1394229433a99513130c1a368dce619d222","access_level":"public","create_time":"$D2020-06-16T21:28:54.847Z","update_time":"$D2020-06-17T12:45:11.018Z","view_time":null,"first_public_time":"$D2020-06-17T12:46:13.887Z","fork":{"id":"372edc4e0adb0277","slug":"16-june-2020-d3-disjoint-force-directed-graph","title":"16 June 2020: D3 Disjoint Force-Directed Graph","owner":{"id":"a2b4f87238ecc18c","login":"didoesdigital","name":"Di"}},"stars":0,"starred":false,"owner":{"type":"team","id":"a2b4f87238ecc18c","login":"didoesdigital","name":"Di","avatar_url":"https://avatars-next.observableusercontent.com/0a9ca38d905225337455dc1f1fb979c788c1d0d904071dd82624a90edf934c53","tier":"starter_2024"},"version":9340,"publish_version":9340,"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,"subscribed":null,"forks":1,"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":{"title":"17 June 2020: D3 Bar Chart with Textured Line","cells":[{"id":0,"value":"md`# 17 June 2020: D3 Bar Chart with Textured Line`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"md`After [16 June 2020: D3 Disjoint Force-Directed Graph](https://observablehq.com/@didoesdigital/16-june-2020-d3-disjoint-force-directed-graph), I wanted to go back and continue adding to my previous bar chart in [13 June 2020: Accessible Bar Chart and Accessible Data Table](https://observablehq.com/@didoesdigital/13-june-2020-accessible-bar-chart-and-accessible-data-table?collection=@didoesdigital/journal-getting-started-with-data-viz-collection).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9076,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9327,"value":"md`## Changes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9329,"value":"md`\n- I'm showing ALL the days, instead of rolling up the data.\n- I'm showing single-letter days of the week instead of dates.\n- Using a [\"pencil\" filter](https://observablehq.com/@leslie-s/5-svg-elements-to-make-svg-charts-feel-more-handcrafted) to draw a line across all data points. The line itself is fairly ridiculous, but I've yet to figure out how to do a [D3 line chart with a linear regression line](https://observablehq.com/@tmcw/d3-line-chart-with-a-linear-regression-line).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9335,"value":"md`I *wanted* to transition between weeks, a little like switching between states in [D3 Chart Updates in Observable by Michael Freeman](https://observablehq.com/@info474/d3-chart-updates-in-observable?collection=@info474/tutorials), but got a bit stuck so I'll try that again another day.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9248,"value":"md`## Resources`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9251,"value":"md`\n- [5 SVG elements to make SVG charts feel more handcrafted / Leslie Shapiro / Observable](https://observablehq.com/@leslie-s/5-svg-elements-to-make-svg-charts-feel-more-handcrafted)\n- [StackOverflow: How can I format the day of the week as a single letter?](https://stackoverflow.com/questions/43010230/how-can-i-format-the-day-of-the-week-as-a-single-letter)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7321,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9062,"value":"x = d3.scaleBand()\n .domain(data.map(d => d.x))\n .range([margin.left, width - margin.right])\n .padding(0.1);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9063,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).tickSizeOuter(0).tickFormat(d => d3.timeFormat(\"%a\")(d).substring(0, 1)));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9066,"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"},{"id":9071,"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"},{"id":9255,"value":"lineGenerator = d3.line()\n .x(d => x(d.x))\n .y(d => y(d.y))\n .curve(d3.curveLinear);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9059,"value":"height = 450;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9056,"value":"margin = ({top: 72, right: 0, bottom: 60, left: 0})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9053,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9078,"value":"barChartStyles = html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9082,"value":"dataTableStyles = html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9049,"value":"typographyStyles = html`