31:T443,hatchedChart = { const svg = d3.create("svg") .attr("title", "Unlabelled chart") .attr("class", "chart") .attr("viewBox", [0, 0, width, height]); const defs = svg .append("defs"); const hatchSize = 3; const hatchPattern = defs .append("pattern") .attr("id", "hatch") .attr("width", hatchSize) .attr("height", hatchSize) .attr("patternTransform", `rotate(45)`) .attr("patternUnits","userSpaceOnUse") .append("rect") .attr("width", hatchSize/2) .attr("height", hatchSize) .style("fill", activeColor); svg.append("g") .attr("class", "bars") .selectAll("rect") .data(data) .join("rect") .attr("role", "presentation") .attr("class", "bar") .attr("x", d => x(d.x)) .attr("y", d => y(d.y)) .attr("width", x.bandwidth()) .attr("height", d => y(0) - y(d.y)) .style("fill", "url(#hatch)"); svg.append("g") .attr("class", "chart-by") .call(chartBy) return svg.node(); }32: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}

`}33:T63d,data = { const timeParser = d3.timeParse("%d %b %Y"); const csvString = await FileAttachment("Cells in Journal_ Getting Started with Data Viz - Journal cells - 21 Jun 2020.csv").text(); const rowConversionFunction = ({ "Day": dayCount, "Title": title, "URL": url, "Number of cells": y, "Date": x }) => ({ dayCount, 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", barChartSVGTitle: "This bar chart shows cells written each day of the week", barChartTitle: "Cells written 25 April – 20 June 2020", barChartCaption: "This chart shows cells written each day of the week across notebooks in the “Journal: Getting Started with Data Viz” collection, 25 April – 20 June 2020.", tableCaption: "This table shows cells written each day of the week across notebooks 25 April – 20 June 2020."}; return Object.assign(dataObjectTarget, extraPropertiesSource); }34:[{"id":"3e7cf67cbb037bd7af02f9e45471244357a9b6cf07f0b96e1b9048191f5d7dd131dea646e72f1af17751d5dc355c386e3f71302c9e296b47c777d577308de68b","href":"https://static.observableusercontent.com/files/3e7cf67cbb037bd7af02f9e45471244357a9b6cf07f0b96e1b9048191f5d7dd131dea646e72f1af17751d5dc355c386e3f71302c9e296b47c777d577308de68b","name":"Cells in Journal_ Getting Started with Data Viz - Journal cells - 21 Jun 2020.csv","type":"text/csv","lastModified":1592994546876.543,"size":12743}] 2f:{"title":"24 June 2020: Hatched Pattern Effect Bar Chart","cells":[{"id":0,"value":"md`# 24 June 2020: Hatched Pattern Effect Bar Chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"md`After [23 June 2020: Linear Regression](https://observablehq.com/@didoesdigital/23-june-2020-linear-regression), I wanted to play with some effects: a hatched pattern!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9076,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":10847,"value":"md`I learned about building the hatched pattern from [Hatched patterns by Nadieh Bremer](https://observablehq.com/@nbremer/hatched-patterns).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7321,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":10071,"value":"chartBy = g => g\n .attr(\"transform\", `translate(${width}, ${height})`)\n .append(\"text\")\n .attr(\"id\", \"source\")\n .attr(\"x\", 0)\n .attr(\"y\", 0)\n .attr(\"dy\", \"-0.5em\")\n .attr(\"text-anchor\", \"end\")\n .text('@DiDoesDigital');","pinned":true,"hidden":false,"mode":"ojs"},{"id":9059,"value":"height = 600;","pinned":false,"hidden":false,"mode":"ojs"},{"id":9662,"value":"margin = ({top: 24, right: 0, bottom: 48, left: 0})","pinned":true,"hidden":false,"mode":"ojs"},{"id":9078,"value":"barChartStyles = html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10329,"value":"barColor = \"#766FAE\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":10346,"value":"inactiveColor = \"#E6E5F0\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":10328,"value":"activeColor = \"#534e7a\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":9082,"value":"dataTableStyles = html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9049,"value":"typographyStyles = html`