31:Tb66,chart = { const barColor = "#766FAE"; const activeColor = "#534e7a"; const svg = d3.create("svg") .attr("title", data.barChartSVGTitle) .attr("class", "svgWrapper") .attr("width", width) .attr("height", height) const defs = svg.attr("class", "watercolor") .append("defs"); const splotch = DOM.uid("splotch"); defs .append("filter") .attr("id", splotch.id) .html( ` ` ); const pencil = DOM.uid("pencil"); defs.append("filter").attr("id", pencil.id) .html(` `) svg.append("g") .attr("class", "chart-title") .call(chartTitle); const groups = svg.append("g") .attr("class", "bars") .selectAll("rect") .data(data) .join("g") .attr("class", "observation") .attr("filter", splotch); groups.append("rect").attr("role", "presentation") .attr("class", "bar") .attr("fill", barColor) .attr("filter", pencil) .attr("stroke", activeColor) .attr("stroke-width", 1.5) .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 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"); // Accessible day of week labels for cell counts barLabels.append("tspan") .text(d => 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"); // Cell count bar labels barLabels.append("tspan") .text(d => d.y) .attr("class", "y-label") .style("font-size", "clamp(.8rem, 2.5vw, 1.0rem)") // .attr("filter", pencil) .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") .attr("filter", pencil) .call(xAxis); svg.append("g") .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:T640,data = { const timeParser = d3.timeParse("%d %b %Y"); const csvString = await FileAttachment("Cells in Journal_ Getting Started with Data Viz - Journal cells - 20 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 – 19 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 – 19 June 2020.", tableCaption: "This table shows cells written each day of the week across notebooks 25 April – 19 June 2020."}; return Object.assign(dataObjectTarget, extraPropertiesSource); }34:[{"id":"001b027ff7989c5938f3756d43df570c1a400f8c0c6c9c3b373d778fac3f754dc6f2ea0edf4e853035e47ece230f6873e54e0d0b11bece937574db9d1c8bc273","href":"https://static.observableusercontent.com/files/001b027ff7989c5938f3756d43df570c1a400f8c0c6c9c3b373d778fac3f754dc6f2ea0edf4e853035e47ece230f6873e54e0d0b11bece937574db9d1c8bc273","name":"Cells in Journal_ Getting Started with Data Viz - Journal cells - 20 Jun 2020.csv","type":"text/csv","lastModified":1592644926725.306,"size":12526}] 2f:{"title":"20 June 2020: Sketchy D3 Bar Chart Style","cells":[{"id":0,"value":"md`# 20 June 2020: Sketchy D3 Bar Chart Style`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"md`After [19 June 2020: D3 Bar Chart Transitions (Improved)](https://observablehq.com/@didoesdigital/19-june-2020-d3-bar-chart-transitions-improved), I wanted to tackle some more interaction: brushing. That got hard though, so instead I played with effects!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9837,"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"},{"id":9076,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":10229,"value":"md`## Resources`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10231,"value":"md`\n- [Watercolor by Noah Veltman](https://observablehq.com/@veltman/watercolor)\n- [A Generative Approach To Simulating Watercolor Paints by Tyler Hobbs](https://tylerxhobbs.com/essays/2017/a-generative-approach-to-simulating-watercolor-paints)\n- [Shadows Into Light typeface by Kimberly Geswein](https://fonts.google.com/specimen/Shadows+Into+Light?category=Handwriting&sort=popularity&preview.text_type=custom&preview.text=1234567890+Almost+before+we+knew+it,+we+had+left+the+ground.&sidebar.open&selection.family=Shadows+Into+Light)\n`","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.2);","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":9712,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .attr(\"aria-hidden\", \"true\")\n .call(d3.axisBottom(x)\n .tickSizeOuter(0)\n .tickFormat(d => d3.timeFormat(\"%a\")(d).substring(0, 1))\n )\n .call(g => g.select(\".domain\").style(\"stroke\", \"#202630\"))\n .call(g => g.selectAll(\".tick line\").remove())\n .call(g => g.selectAll(\".tick text\")\n .style(\"font-size\", \"clamp(.7rem, 2.5vw, 1.0rem)\")\n .style(\"fill\", \"#767676\"))\n;","pinned":true,"hidden":false,"mode":"ojs"},{"id":10061,"value":"chartTitle = g => g\n .append(\"text\")\n .attr(\"id\", \"chart-title\")\n .attr(\"x\", 0)\n .attr(\"y\", 0)\n .attr(\"dy\", \"1em\")\n .style(\"font-weight\", \"400\")\n .style(\"font-size\", \"clamp(.8rem, 2.5vw, 1.2rem)\") // minimum, preferred, maximum\n .text(data.barChartTitle);","pinned":true,"hidden":false,"mode":"ojs"},{"id":10071,"value":"chartBy = g => g\n .attr(\"transform\", `translate(${width}, ${height})`)\n .append(\"text\")\n .attr(\"id\", \"chartBy\")\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 = 450;","pinned":false,"hidden":false,"mode":"ojs"},{"id":10119,"value":"margin = ({top: 48, right: 0, bottom: 60, left: 0})","pinned":true,"hidden":false,"mode":"ojs"},{"id":9078,"value":"barChartStyles = html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9082,"value":"dataTableStyles = html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9049,"value":"typographyStyles = html`