2d:null 2e:["$","title",null,{"children":"24 June 2020: Hatched Pattern Effect Bar Chart | Di | Observable"}] 33: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(); }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: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); }36:[{"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}] 31:{"id":"44d0f85067037ab6","slug":"24-june-2020-hatched-pattern-effect-bar-chart","title":"24 June 2020: Hatched Pattern Effect Bar Chart","thumbnail":"de2e8dc121e8e6bc184e235ef48baeab9bb17e13729111b050aa1441dc0166c4","access_level":"public","create_time":"$D2020-06-24T10:29:06.876Z","update_time":"$D2020-06-24T10:50:35.934Z","view_time":null,"first_public_time":"$D2020-06-24T10:57:03.073Z","has_unpublished_edits":null,"fork":{"id":"458160ffbc239c87","slug":"23-june-2020-linear-regression","title":"23 June 2020: Linear Regression","owner":{"id":"a2b4f87238ecc18c","login":"didoesdigital","name":"Di"}},"stars":1,"starred":false,"owner":{"type":"team","id":"a2b4f87238ecc18c","login":"didoesdigital","name":"Di","avatar_url":"https://avatars-next.observableusercontent.com/0a9ca38d905225337455dc1f1fb979c788c1d0d904071dd82624a90edf934c53","tier":"starter_2024"},"version":11089,"publish_version":11089,"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":"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9076,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","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":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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9059,"value":"height = 600;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9662,"value":"margin = ({top: 24, right: 0, bottom: 48, left: 0})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9078,"value":"barChartStyles = html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10329,"value":"barColor = \"#766FAE\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10346,"value":"inactiveColor = \"#E6E5F0\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10328,"value":"activeColor = \"#534e7a\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9082,"value":"dataTableStyles = html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9049,"value":"typographyStyles = html`