31:T878,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("Cells written 25 April – 11 June 2020"); svg.append("g") .attr("class", "x-axis") .attr("aria-hidden", "true") .call(xAxis); svg.append("g") .attr("class", "y-axis") .attr("aria-hidden", "true") .call(yAxis); 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); 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('height', 0) // This is important .attr("width", d => x.bandwidth()) .call(rect => rect .transition(d3.transition().duration(500)) .attr('y', d => y(d.y)) .attr('height', d => height - margin.bottom - y(d.y)) ) , 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( `Cells written 25 April – 11 June 2020: ${inputWeek}` ); }; 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: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); }34:[{"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":1592519428518.866,"size":10718}] 2f:{"title":"19 June 2020: D3 Bar Chart Transitions (Improved)","cells":[{"id":0,"value":"md`# 19 June 2020: D3 Bar Chart Transitions (Improved)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"md`After [18 June 2020: D3 Bar Chart Transitions](https://observablehq.com/@didoesdigital/18-june-2020-d3-bar-chart-transitions), I wanted to solve the entrance transition issue.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":9491,"value":"md`I fixed it!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9111,"value":"viewof week = select(weeks)","pinned":false,"hidden":false,"mode":"ojs"},{"id":9076,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":9122,"value":"chart.drawData(week)","pinned":true,"hidden":false,"mode":"ojs"},{"id":9495,"value":"md`Calling \\`enter.transition()\\` directly causes Observable to explode with the unhelpful message \"Error\", while doing this for update and exit is fine. I'm really not clear on why. To workaround it, I can use \\`call\\`:\n\n~~~js\nenter\n…\n.call(rect => rect\n .transition(d3.transition().duration(500))\n .attr('y', d => y(d.y))\n .attr('height', d => height - margin.bottom - y(d.y))\n )\n~~~\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":9502,"value":"md`\nIt was this notebook that helped me unlock it: [Day 18 - Join, Enter, Update, Exit](https://observablehq.com/@thetylerwolf/day-18-join-enter-update-exit), which I found by [searching Observable for rect join transition enter](https://observablehq.com/search?query=Rect%20join%20transition%20enter)!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7321,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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":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"},{"id":9059,"value":"height = 450;","pinned":false,"hidden":false,"mode":"ojs"},{"id":9056,"value":"margin = ({top: 72, right: 0, bottom: 60, left: 30})","pinned":false,"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`