2c:null 2d:["$","title",null,{"children":"18 June 2020: D3 Bar Chart Transitions | Di | Observable"}] 32:T994,chart = { const barColor = "#766FAE"; const activeColor = "#5C5597"; const svg = d3.create("svg") .attr("title", data.barChartTitle) .attr("viewBox", [0, 0, width, height]); const maxY = d3.max(data, d => d.y); 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"); 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("g") .attr("class", "y-axis") .call(yAxis) .attr("aria-hidden", "true") .call(d3.axisLeft(y)); svg.append("text") .attr("id", "source") .attr("x", width) .attr("y", height) .attr("dy", "-1em") .attr("text-anchor", "end") .text('@DiDoesDigital'); svg.node().drawData = function(inputWeek) { const subsetData = data.filter(d => d.weekOfYear === inputWeek); svg .select(".x-axis") .transition() .duration(500) .call(d3.axisBottom(x)); svg .select(".y-axis") .transition() .duration(500) .call(d3.axisLeft(y)); const rects = svg.selectAll("rect").data(subsetData, d => d.dayOfWeek); rects.join( enter => enter .append("rect") .attr("fill", d => d.y === maxY ? activeColor : barColor) .attr("x", d => x(d.dayOfWeek)) .attr('y', d => y(0)) // This is important .attr('y', d => y(d.y)) .attr('height', 0) // This is important .attr('height', d => height - margin.bottom - y(d.y)) .attr("width", d => x.bandwidth()) , update => update .transition() .duration(500) .attr("fill", d => d.y === maxY ? activeColor : barColor) .attr('y', d => y(d.y)) .attr('height', d => height - margin.bottom - y(d.y)), exit => exit .transition() .duration(500) .attr('y', y(0)) .attr('height', 0) ); title.text( `Number of cells written across notebooks 25 April – 11 June 2020: ${inputWeek}` ); }; return svg.node(); }33: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}

`}34:T600,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 = ({ "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", 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); }35:[{"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":1592394934149.925,"size":10718}] 30:{"id":"048b9910cf1ce525","slug":"18-june-2020-d3-bar-chart-transitions","title":"18 June 2020: D3 Bar Chart Transitions","thumbnail":"7779d5161d90f79ebb564c7665c14da60d2a18d6313b94f6a1d5e4018f2023c8","access_level":"public","create_time":"$D2020-06-17T11:55:34.149Z","update_time":"$D2020-06-18T11:37:17.532Z","view_time":null,"first_public_time":"$D2020-06-18T11:37:51.554Z","has_unpublished_edits":null,"fork":{"id":"d244d20e663fcb3c","slug":"17-june-2020-d3-bar-chart-with-textured-line","title":"17 June 2020: D3 Bar Chart with Textured Line","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":9481,"publish_version":9481,"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":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":{"titling":"auto","title":"18 June 2020: D3 Bar Chart Transitions","cells":[{"id":0,"value":"md`# 18 June 2020: D3 Bar Chart Transitions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md`After [17 June 2020: D3 Bar Chart with Textured Line](https://observablehq.com/@didoesdigital/17-june-2020-d3-bar-chart-with-textured-line), I wanted to have another go at getting transitions between weeks working.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9412,"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":9111,"value":"viewof week = select(weeks)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9076,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9122,"value":"chart.drawData(week)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9472,"value":"md`## Areas to improve`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9408,"value":"md`While I managed to transition the height of bars, there are a few issues here:\n\n- The first entrance of rectangles doesn't have a transition. You can see this after first page load when switching from Week 1 to Week 2 where the bars from Mon–Fri snap to their new height.\n- I don't have direct value labels on the bars to show the date or cell count to verify its accuracy.\n- To get it working, I had to rip out of a bunch of things from the previous iteration of the chart, including the pattern fill, legend, and accessible labels.\n- I'm unconvinced on the transition. It might be clearer to show the progression of weeks, moving the bars out to the left or right if you're navigating forward or backward through time.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9477,"value":"md`I'd like to restore the parts I ripped out and make some improvements, but that's enough for today.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9427,"value":"md`## Today I learned`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9432,"value":"md`\n- I have a slightly better grasp on \\`.transition()\\`\n- I have a slightly better grasp on working with \\`.join\\`\n- In [The Space Between by Alec Barrett](https://observablehq.com/@anbnyc/the-space-between), I found these notes about transitioning data and I'm happy to say that each state of my chart shows plausible values for the dataset. \"In the first category, the states between the start and end of the transition exhibit two features:\"\n - \"Each state is a grammatically correct representation for the graphic\"\n - \"Each state shows a plausible, and sometimes real, value for the dataset\"\"\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9420,"value":"md`## Resources`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9423,"value":"md`\n- [D3 Chart Updates in Observable by Michael Freeman](https://observablehq.com/@info474/d3-chart-updates-in-observable?collection=@info474/tutorials)\n- [Introduction to D3 by Tongshuang Wu](https://observablehq.com/@uwdata/introduction-to-d3)\n- [The Space Between by Alec Barrett](https://observablehq.com/@anbnyc/the-space-between)\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":9062,"value":"x = {\n let domain = d3\n .map(data, d => d.dayOfWeek)\n .keys()\n .sort()\n\n let xScale = d3.scaleBand()\n .domain(data.map(d => d.dayOfWeek).slice(2,9))\n .range([margin.left, width - margin.right])\n .padding(0.1);\n return xScale; \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","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":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(\"dy\", \"-1.5em\")\n .attr(\"x\", -30)\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":9059,"value":"height = 450;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9056,"value":"margin = ({top: 72, 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":9078,"value":"barChartStyles = html`\n`","pinned":false,"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`