31:T17ac,mdBasicBarCharts = md` ## Day 1–7: Learning the basics with bar charts **[25 Apr 2020: First Bar Chart](https://observablehq.com/@didoesdigital/25-apr-2020-first-bar-chart?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)** - [Google Trends](https://trends.google.com/trends/explore?geo=US&q=data%20viz,dataviz) suggests that "data viz" is more common than "dataviz" in the US, but [globally they're almost on par](https://trends.google.com/trends/explore?q=data%20viz,dataviz). - D3 bar chart. **[26 Apr 2020: Bar Chart Revisited](https://observablehq.com/@didoesdigital/26-apr-2020-bar-chart-revisited?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)** - Setting \`.padding(0.1)\` reduces the width of each bar rather than adding space between each bar. This makes sense for conveniently working with bars and increasing padding without blowing the whole chart out. - \`.tickSizeOuter(0)\` removes the stump on the bottom left of the chart (it hides the first tick on the axis) - \`.nice()\` ensures the top of the chart finishes at 13% instead of 12% with the highest bar poking above the highest tick. - [\`width\`](https://github.com/observablehq/stdlib#width) is the current width of a cell and is part of Observable's standard library. It is a Reactive variable that instantly responds to changes in the window size. - "Use caution when applying global styles: if a style affects a cell’s height, the runtime may not notice unless the affected cell is re-evaluated." —[Introduction to HTML](https://observablehq.com/@observablehq/introduction-to-html) - Some numbers can't be represented in binary floating-point, meaning code like \`tickFormat(d => (d * 100) + "%")\` can produce "7.000000000000001%" instead of 7%. You *could* force a "fix" using [\`.toFixed([digits])\`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed), or round it using \`Math.round(yourNumberHere * 10 ) / 10\`, but use the better option, \`d3.format(".1f")\` from the [d3-format](https://github.com/d3/d3-format/blob/master/README.md#d3-format) module. - Showing the median as a line when it's one value or highlighting bars when it's two. **[27 Apr 2020: Finalising the Bar Chart](https://observablehq.com/@didoesdigital/27-apr-2020-finalising-the-bar-chart?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)** - The general term for lines showing the median, mean, benchmarks, or "best fit" is "reference line" (or "reference band" for showing a range). - Use \`.attr('dy', '1em')\` (specifically 1em) to shift text along its y-axis by the height of the text. - Set styles using \`.style('font', '400 12px/1.5 "Work Sans", "Open Sans"')\` instead of \`.attr('style', 'font: 400 12px/1.5 "Work Sans", "Open Sans"')\` - Use \`Object.assign(target, ...sources)\` to add labels for axes as properties to the \`data\` object after parsing it. Add the \`await\` keyword to ensure the data promise is resolved before adding the new properties to it. - There is no \`translateY\` SVG transform (it's a CSS transform). Use \`translate\` instead e.g. \`.attr('transform',translate(456, 0))\` - [Styled axes by Mike Bostock](https://observablehq.com/@d3/styled-axes). Use a right axis with tick sizes that match the length of the chart to push it to the left side of the chart. - [Mike Bostock's Stack Overflow answer to styling axes](https://stackoverflow.com/questions/11189284/d3-axis-labeling/11194968#11194968) - D3 chart title. - D3 axes labels. **[28 Apr 2020: What Else I Learned From That Bar Chart](https://observablehq.com/@didoesdigital/28-apr-2020-what-else-i-learned-from-that-bar-chart?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)** - Specify a specific version of D3 in the appendix to future-proof against breaking changes: \`d3 = require("d3@5")\` - \`band.range([range])\` … sets the scale’s range to the specified two-element array of numbers. - \`band.rangeRound([range])\` Sets the scale’s range to the specified two-element array of numbers while also enabling rounding. This will "give the results as integer values, using Math.floor() to avoid overflowing the range. This will usually leave some unused space, that must be allocated to the left and right padding (even if those have been set to 0). Align them with band.align." —[d3.scaleBand on Observable](https://observablehq.com/@d3/d3-scaleband) **[29 Apr 2020: Setting up Observable](https://observablehq.com/@didoesdigital/29-apr-2020-setting-up-observable?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)** - Interactions: Drag the slider to set the exit transition duration on mouseover/hover. - Use \`.align([align])\` on bands to left all the bands to the left (0), center (0.5), or right (1). - [Observable view](https://observablehq.com/@observablehq/introduction-to-views). **[30 Apr 2020: What Else Can I Do With This Bar Chart?](https://observablehq.com/@didoesdigital/30-apr-2020-what-else-can-i-do-with-this-bar-chart?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)** - Reorder adding SVG elements so they appear in the correct order on screen. For example, ensure the bar value labels appear above the median line for readability. - A CSS hack to give labels some distinction: apply a white text shadow in 4 directions using \`.style("text-shadow", "white 1px 1px, white -1px -1px, white 1px -1px, white -1px 1px")\` - D3 bar labels. **[1 May 2020: Formatting Numbers and Sorting a Bar Chart](https://observablehq.com/@didoesdigital/1-may-2020-formatting-numbers-and-sorting-a-bar-chart?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)** - D3 Format to format numbers the way you like using [d3.format](https://github.com/d3/d3-format/blob/master/README.md#format). This is a longer explanation of the format specifier. - Use JavaScript's \`array.sort()\` to order bars before binding them. - D3 grouped bar chart with color. `32:T113d,mdScatterplots = md`## Day 8–11: Data wrangling and exploration with Scatterplots **[2 May 2020: Exploring More of Observable and Vega-Lite](https://observablehq.com/@didoesdigital/2-may-2020-exploring-more-of-observable-and-vegalite?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)** - Use HTML tagged literals to add CSS style tags: "html\`\`" - Read Observable's [Introduction to HTML by Mike Bostock](https://observablehq.com/@observablehq/introduction-to-html) to learn about reactive Markdown, "\${tex\`KaTeX\`}" for math, sparklines for a chart inline with prose, using canvas, using D3, using SVG tagged template literals, using \`viewof\` to react to an input element's changing value, and adding global CSS using html tagged template literals. - Read Observable's [Introduction to Promises by Mike Bostock](https://observablehq.com/@observablehq/introduction-to-promises) to learn about Observable's \`delay\`, \`tick\` and \`when\` functions. - Read [Observable's not JavaScript by Mike Bostock](https://observablehq.com/@observablehq/observables-not-javascript) to learn some "gotchas" to look out for working with Observable, such as "you'll need to wrap object literals in parentheses or use a block statement with a return" e.g. \`object = ({foo: "bar"})\`. It also introduces Observable's "special mutable operator so you can opt-in to mutable state: you can set the value of a mutable from another cell". Finally, it talks about how to import things across notebooks. - "inlineCode" helper to add some custom inline code styling in Observable. - D3 sortable bar chart. - Vega-Lite scatterplot. **[3 May 2020: Exploring More Vega-Lite](https://observablehq.com/@didoesdigital/3-may-2020-exploring-more-vega-lite?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)** - I published a fork: [Vega-Lite API Vega-Lite V4](https://observablehq.com/@didoesdigital/vega-lite-api-vega-lite-v4). This way I can intentionally import Vega-Lite major version 4 into my notebooks. When Vega-Lite major version 5 comes out with non-backwards-compatible breaking changes, my older notebooks using this import won't randomly break. This future-proofs my notebooks using Vega-Lite V4. **[4 May 2020: Vega-Lite Scatterplot and Heat Map, and More Posts on Getting Started With Data Viz](https://observablehq.com/@didoesdigital/4-may-2020-vega-lite-scatterplot-and-heat-map-and-more-posts-o?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)** - Read Observable's [Introduction to Imports by Mike Bostock](https://observablehq.com/@observablehq/introduction-to-imports) to learn a bit more about Observable imports, like how imported cells are lazily evaluated and you can import from private notebooks, even though that could cause broken behaviour in a published notebook. - Use \`~~~\` for code fences in Observable including tagged code fences: \`~~~js\` - The [SVG hyperlink element \`\`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/a) is a container around any shape. If it's around a circle, it will have a circle-shaped hover/click target. - In Observable, a **view** is "a user interface element that directly controls a value in the notebook". It has two parts: a view (typically an interactive DOM element) and value (any JavaScript value). See also: [Introduction to Views by Mike Bostock](https://observablehq.com/@observablehq/introduction-to-views). - It seems that a **viewof** is a second hidden cell that shows the current value of a user interface input element. See: [A Brief Introduction to Viewof by Mike Bostock](https://observablehq.com/@observablehq/a-brief-introduction-to-viewof?collection=@observablehq/introduction). **[5 May 2020: Vega-Lite Scatterplot continued](https://observablehq.com/@didoesdigital/5-may-2020-vega-lite-scatterplot-continued?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)** - Scatterplot theory. - Vega-Lite proportional area (bubble) charts. - Vega-Lite color encoding. - Vega-Lite rows. - Vega-Lite quantize scale. - Heatmap theory. - Vega-Lite Heatmap. - **[Tidy data](https://cran.r-project.org/web/packages/tidyr/vignettes/tidy-data.html)** is where: 1. Each variable forms a column 2. Each observation forms a row. 3. Each type of observational unit forms a table. `33:T1a05,mdD3Scatterplots = md` ## Day 12–15: D3 Scatterplots with legends and tooltips **[6 May 2020: D3 Scatterplot](https://observablehq.com/@didoesdigital/6-may-2020-d3-scatterplot?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)** - Vega-Lite tooltips. - Vega-Lite grid removed. - Vega-Lite line mark interpolation. **[7 May 2020: D3 Scatterplot with Legends](https://observablehq.com/@didoesdigital/7-may-2020-d3-scatterplot?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)** - [d3-time-format](https://github.com/d3/d3-time-format/blob/master/README.md#d3-time-format) - Use \`man strftime\` on the command line to figure out the arguments for the \`d3.timeParse()\` function so that "%d" is replaced by the day of the month as a decimal number (01-31) and "%b" is replaced by national representation of the abbreviated month name. - Renaming fields upon parsing CSV data file. There's a longer post about CSV parsing in [23 May 2020: Area Charts in Vega-Lite and CSV Parsing](https://observablehq.com/@didoesdigital/23-may-2020-area-charts-in-vega-lite-and-csv-parsing?collection=@didoesdigital/journal-getting-started-with-data-viz-collection). - A JavaScript Map for \`color const exerciseColorMap = new Map([["Bike", "#8242a8"], ["Run", "#ff1493"], ["Walk", "#FFCE1E"]])\` to conditionally set the data points stroke color according to its type. - Read [scale.ticks by Fil](https://observablehq.com/@d3/scale-ticks) to learn more about ticks. Roughly, \`.ticks()\` gives us the array of some values from the scale's domain while \`.tickFormat()\` takes the same arguments and gives us the formatting for those \`ticks\`. This kind of detail is really helpful for making sense of the API: "The tick format provided by time scales ignores the specified count; the returned string is based solely on the given time. This is sometimes surprising, but allows the format to behave consistently across views when the domain changes, improving readability during animated transitions and zooming." - A screenshot of creative commons licensing used in a notebook. - D3 scatterplot with legend **[8 May 2020: D3 Scatterplot with Tooltips](https://observablehq.com/@didoesdigital/8-may-2020-d3-scatterplot?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)** - Read about Observable's [Introduction to require](https://observablehq.com/@observablehq/introduction-to-require). You can have multiple inputs at once such as: \`d3CsvAndFetch = require("d3-dsv@1", "d3-selection@1")\` - Using Mike Bostock's [color legend](https://observablehq.com/@d3/color-legend), add swatches as a separate cell: \`swatches({ color: d3.scaleOrdinal(["Bike", "Run", "Walk"], ["#8242a8", "#ff1493", "#FFCE1E"]) })\` - [Choropleth with Tooltip by Duy Nguyen](https://observablehq.com/@duynguyen1678/choropleth-with-tooltip) shows an example of a *legend* presented on a chart using the same color legend notebook - Import Susie Lu's [d3-legend](http://d3-legend.susielu.com/) using: \`d3Legend = require('d3-svg-legend')\`. Notice the '-svg-' in the module name there unlike the name of the project. - D3 scatterplot with legend - [Selection join by Mike Bostock](https://observablehq.com/@d3/selection-join) shows a join example with separate enter and update behaviour. [General Update Pattern by Mike Bostock](https://observablehq.com/@d3/general-update-pattern) says, "The *general update pattern* is a deprecated pattern for using [*selection*.data](https://github.com/d3/d3-selection/blob/master/README.md#selection_data) to update the DOM based on new data. **We recommend that you use [*selection*.join](/@d3/selection-join) instead, as it is easier to remember, more concise, and has better default behavior!**" - D3 scatterplot with tooltips using [Line Chart with Tooltip by Mike Bostock](https://observablehq.com/@d3/line-chart-with-tooltip), callout and bisect. - I added a crude fix, \`if (!b) { return a; }\`, to prevents errors when mousing over right edge of chart. These errors appear in the [original notebook](https://observablehq.com/@d3/line-chart-with-tooltip). - SVG has its own span element for styling parts of text elements: [\`tspan\`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/tspan). - Read [MDN's \`toLocaleString\`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/toLocaleString) documentation - [Voronoi Tooltip by Ajayyy](https://observablehq.com/@stroked/voronoi-tooltip) shows notebook appendix formatting that chunks out "setup", "scales", and "data". It also adds cells specifically for "plotAreaWidth" and "plotAreaHeight" to substract margins, which keeps some of that noise out of the chart cell: \`plotAreaWidth = width - margin.left - margin.right\` - Expand d3 imports with other modules: \`d3 = require("d3@5", "d3-delaunay@5")\` **[9 May 2020: D3 Scatterplot with Voronoi Tooltips](https://observablehq.com/@didoesdigital/9-may-2020-d3-scatterplot-with-voronoi-tooltips?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)** - "Use transparency to help with overlapping data points". - Read this in-depth tutorial on [Using a d3 voronoi grid to improve a chart's interactive experience by Nadieh Bremer](https://www.visualcinnamon.com/2015/07/voronoi.html) to understand the intent and usage of voronoi in charts, but then read [Learn D3: Interaction by Mike Bostock](https://observablehq.com/@d3/learn-d3-interaction) to learn how to use [d3-delaunay](https://github.com/d3/d3-delaunay) to implement polygons for tooltip trigger regions. - It looks like [d3-delaunay](https://github.com/d3/d3-delaunay) replaces [d3-voronoi](https://github.com/d3/d3-voronoi) completely, even though \`d3.voronoi\` appears to be [built into d3 and recommended in the API docs](https://github.com/d3/d3/blob/master/API.md#voronoi-diagrams-d3-voronoi) while \`d3-delaunay\` appears to be separate. The \`d3-voronoi\` repo shows this message: "**Deprecation notice**: Consider using the newer d3-delaunay instead of d3-voronoi. Based on Delaunator, d3-delaunay is 5-10× faster than d3-voronoi to construct the Delaunay triangulation or the Voronoi diagram, is more robust numerically, has Canvas rendering built-in, allows traversal of the Delaunay graph, and a variety of other improvements." - Links to other articles and notebooks about using voronoi. - Voronoi tooltips with overlay. - Note: you don't need the SVG overlay. It may be possible to use \`delaunay.find()\` directly without the overlay as shown in [Summer heat 🍦 🌞 by Fil](https://observablehq.com/@fil/summer-heat#hover). `34:Tb6f,mdLineChartAnnotationsAndShading = md` ## Day 18–21: D3 line charts with annotations and shading **[12 May 2020: D3 Line Chart](https://observablehq.com/@didoesdigital/12-may-2020-d3-line-chart?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)** - D3 line chart with 1 series - A Y Axis label can double as a chart subtitle. Here, I've used "Australian life expectancy in years" as the Y Axis label and chart title. - Add classes to SVG groups just to name them, so you can easily find and navigate them when inspecting them in the console. - Different "nice" formatting: \`.domain(d3.extent(data, d => d.year)).nice(d3.timeYear.every(2))\` - Use the line function's "defined" accessor: \`.defined()\` to check if there are any data points missing. If so, skips the missing line segments. This is a longer explanation of "defined". This is the line generator code: \`line = d3.line().defined(d => !isNaN(d.life_expect)).x(d => x(d.year)).y(d => y(d.life_expect));\` - Examples of cutting the Y Axis - Sparklines, including inline canvas sparkline - "The only function of economic forecasting is to make astrology look respectable." —John Kenneth Galbraith **[13 May 2020: D3 Multi-Line Chart](https://observablehq.com/@didoesdigital/13-may-2020-d3-multi-line-chart?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)** - Reformatted data cell to include a time series array of names and associated values (\`series\`) and the list of years as an array (\`dates\`). - The console showed an error: \`Uncaught TypeError: d3.least is not a function\`. This uses \`d3-array\`: \`d3 = require("d3@5", "d3-array@2")\`. - The subsequent error, \`y = TypeError: t is not iterable\`, revealed that my time series values data was a single value instead of an array of all the values for that series. - Multi-line chart with dot labels and hover to emphasise 1 line at a time using \`bisectLeft\` and moved, entered, and left methods. **[14 May 2020: D3 Multi-Line Chart with Annotations](https://observablehq.com/@didoesdigital/14-may-2020-d3-multi-line-chart-with-annotations?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)** - [D3-annotations](https://d3-annotation.susielu.com/): \`d3 = require("d3@5", "d3-array@2", "d3-svg-annotation@2")\` - Example of \`d3.annotationCallout\` - The annotation note title also lightens when hovering over other lines. **[15 May 2020: D3 Multi-Line Chart with Shading](https://observablehq.com/@didoesdigital/15-may-2020-d3-multi-line-chart-with-shading?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)** - Multi-line chart with shading - [A notebook by Zachary Dodge taking another approach to appendix cells](https://observablehq.com/@zacharydodge/d3-interactive-charts) for managing the width, height, margins and "plot area" (called \`boundedWidth\` and \`boundedHeight\` here) `35:Tef9,mdPieAndDonutChartTheory = md` ## Day 22–24: Pie and donut chart theory and exploration **[16 May 2020: Donut Charts and Pie Charts](https://observablehq.com/@didoesdigital/16-may-2020-donut-charts-and-pie-charts?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)** - Pie chart and donut chart theory **[17 May 2020: Pie Charts in Vega-Lite](https://observablehq.com/@didoesdigital/17-may-2020-pie-charts-in-vega-lite?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)** - Vega-Lite pie chart of scone ingredients - Errors due to versions: It looks like the example in [Hello, Vega-Lite by Mike Bostock](https://observablehq.com/@mbostock/hello-vega-lite/2) is using an older version of Vega-Lite. The notebook from which we're requiring \`vegalite\` appears to be an old version of the notebook. - Use \`vegaEmbed = require("vega-embed@5")\` - Use an embed function \`embed = function(spec) { return vegaEmbed(spec, {loader: vegaEmbed.vega.loader({baseURL: 'https://vega.github.io/vega/'}), actions: true}) }\` - Wrap data keys in double quotes, because JSON demands strings for keys. - \`"view": {"stroke": null},\` removes the chart border - \`"legend": null,\` removes the category color legend in \`"color": {"field": "category", "type": "nominal", "legend": null}\` - It looks like \`"stack": true\` places the labels correctly. The [Vega-Lite stack docs](https://vega.github.io/vega-lite/docs/stack.html#encoding) focus on stacking bar charts and only mention once that it could be applied to the \`theta\` channel. It does not describe what it means to have things "stacked" with a theta channel so I will just file away in my brain as "the thing that does what I need with pie chart labels". After a bit more reading I spotted "For now, you need to add \`stack: true\` to theta to force the text to apply the same polar stacking layout." in [Pie Chart with Labels](https://vega.github.io/vega-lite/examples/layer_arc_label.html) - Use \`, "stroke": "#fff"\` to the \`arc\` mark to distinguish sectors. - Use \`"radius": {"field": "quantity", "type": "quantitative", "scale": {"type": "sqrt", "zero": true, "range": [40, 100]}},\` to create a Vega-Lite radial plot. - As far as I can tell, the default sort order is ascending but that will only work on a flat array of data using the specific key \`values\`. My data uses an array of objects, so I needed to add this line to my top-level encoding: \`"order": {"field": "quantity", "sort": "descending"}\` - Vega-Lite tooltips: \`"tooltip": [{"field": "category", "type": "nominal"}, {"field": "quantity", "type": "quantitative"}]\` - Chart title (\`"title": {"text": "A Scone", "dy": -12},\`) and padding (\`"padding": {"top": 24, "right": 24, "bottom": 24, "left": 24},\`) - Chart colors: \`"color": { "field": "quantity", "type": "nominal", "scale": { "range": ["#FDBAAB", "#FFEBA5", "#99C3E1", "#90D1C5"] }, "legend": null },\` **[18 May 2020: Donut Chart in Vega-Lite](https://observablehq.com/@didoesdigital/18-may-2020-donut-chart-in-vega-lite?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)** - To change a Vega-Lite pie chart to a donut chart: \`"mark": {"type": "arc", "innerRadius": 100, "outerRadius": 150, "stroke": "#fff"}\` - Add arbitrary text using a \`text\` mark and a \`value\` key instead of a \`field\`. See the [Vega-Lite text](https://vega.github.io/vega-lite/docs/text.html) docs and the [Vega-Lite value](https://vega.github.io/vega-lite/docs/value.html) docs. - Give the arc its own encoding and tooltip to avoid tooltips over the center of the donut. - In Observable, give images alt text: \`{ const image = await FileAttachment("image.png").image(); image.alt = "Screenshot of donut chart with open cell clipping tooltip." image.width = 375; return image; }\` `36:T1043,mdD3DonutChartsWithFootnotesAndTooltips = md` ## Day 24–27: D3 donut charts with footnotes and styled tooltips **[19 May 2020: Donut Chart in D3](https://observablehq.com/@didoesdigital/19-may-2020-donut-chart-in-d3?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)** - Choose [Sequential, diverging, categorical or cyclical](https://github.com/d3/d3-scale-chromatic) color scales as appropriate for the data. - "There is no difference between [line or thick arcs], other than the thinnest donut being worse than the rest (we’re not sure exactly why)" in [The humble pie chart: part2 by John Nixon, Office for National Statistics](https://digitalblog.ons.gov.uk/2017/02/28/the-humble-pie-chart-part2/). - Experiments with different color schemes and approaches to adding them to \`range\`: \`.range(d3.schemePastel1)\`, \`.range(["#8242a8","#cf3f93","#fc5972","#ff8a51","#ffbf40"])\`, \`.range(d3.quantize(t => d3.interpolateCool(t * 0.8 + 0.1), data.length))\`, \`.range(d3.quantize(t => d3.interpolateSpectral(t * 0.8 + 0.1), data.length).reverse())\` - Color resources. - D3 donut chart. **[20 May 2020: Donut Chart in D3 with Footnotes](https://observablehq.com/@didoesdigital/20-may-2020-donut-chart-in-d3-with-footnotes?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)** - To add a "source" line of text, append a \`text\` element and set the \`innerHTML\` using \`.html()\` from D3's [selection.html](https://github.com/d3/d3-selection/blob/master/README.md#selection_html). - Alternatively, dump all the source details inline in a \`.html()\` call. - Use a \`figcaption\` element to add notes and source: \`

Source: Sarah Cooks: Small batch scones

\` - Wrap the chart and \`figcaption\` element in a \`figure\` element: \`

\${chart} \${caption}\` - "Avoid chart footnotes where possible. If extra information is needed: annotate the chart, include the information in the statistical commentary accompanying the chart, add a footnote to the chart title" - Some notebooks showing source or notes. - The [SVG title element](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/title) can also be used on an "graphics element", including \`\`, \`\`, \`\`, \`\`, \`\`, \`\`, \`\`, \`\`, \`\`, \`\`, and \`\`. As with \`title\` attributes used on HTML elements, this produces shabby tooltips if you hover for long enough. **[21 May 2020: Donut Chart in D3 with Tooltips](https://observablehq.com/@didoesdigital/21-may-2020-donut-chart-in-d3-with-tooltips?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)** - D3 donut chart with tooltips. - The approach here uses HTML for the tooltip itself and translates it into position using CSS according to the data passed to the \`onmouseover\` function from the D3 \`selection.on()\` listener on the arcs. The advantage of using HTML and CSS is that the tooltip automatically resizes based on the width of the text content inside it. - I have two working theories on the absence of standard conventions or libraries for styled tooltips in D3 charts: 1. Every visualisation is unique and D3 and SVG both give you such control that you might as well tailor your tooltip to every situation. Compare the 3 examples in [AntV's G2 Visualization Grammar Tooltip examples](https://g2.antv.vision/en/examples/component/tooltip#tooltip-1). 2. Data viz folk generally use other methods to let people access "details on demand", such as showing values directly on data on hover (especially for bar charts). - [d3-selection](https://github.com/d3/d3-selection/blob/master/README.md): "By convention, selection methods that return the current selection use four spaces of indent, while methods that return a new selection use only two. This helps reveal changes of context by making them stick out of the chain" `37:T18e4,mdAreaChartsAndCSVParsing = md` ## Day 28–30: Area charts and CSV parsing **[22 May 2020: Area Charts, Stacked Area Charts, Stream graphs and Ridgelines](https://observablehq.com/@didoesdigital/22-may-2020-area-charts-stacked-area-charts-stream-graphs-an?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)** - Theory about area charts, stacked area charts, stream graphs and ridgelines **[23 May 2020: Area Charts in Vega-Lite and CSV Parsing](https://observablehq.com/@didoesdigital/23-may-2020-area-charts-in-vega-lite-and-csv-parsing?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)** - Vega-Lite area chart showing 863 cells written across 28 Observable notebooks. - Using [CSS counter](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters) to count cells in notebooks via the [minimap](https://observablehq.com/@observablehq/introducing-visual-dataflow): \`element.style { counter-reset: count 0; } .minimap-cell-row:before { content: counter(count)"."; counter-increment: count; }\` - Wrangling CSV data - [Observable file attachments](https://observablehq.com/@observablehq/file-attachments): Calling \`attachment.text()\` returns a promise to a string. We then wait for this promise to resolve before calling \`d3.csvParse\`. - [\`await\`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await) waits for a Promise. - From the [d3-dsv](https://github.com/d3/d3-dsv) module, [\`d3.csvParse\`](https://github.com/d3/d3-dsv#csvParse) calls [\`dsvFormat(",").parse()\`](https://github.com/d3/d3-dsv#dsvFormat) with a comma as the delimiter, which constructs a new DSV parser and formatter. Just below \`dsvFormat\` in the docs, you can see [\`dsv.parse(string[, row])\`](https://github.com/d3/d3-dsv#dsv_parse), which tells us about the DSV parser. - Row conversion function, parameter and body. - Instead of \`d\` in our cell, you can see an Object using ES6 [destructuring assignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) syntax to assign the data row's name (e.g. "Number of cells") to a local JavaScript variable (e.g. \`y\`). - Our \`d\` destructuring assignment is wrapped in parentheses because they're "required when using object literal destructuring assignment without a declaration." - The \`=>\` indicates an ES6 [arrow function expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) using the syntax, \`(param1, param2, …, paramN) => expression\`. - The docs show that destructuring within the parameter list is also supported as advanced syntax, which is what we're doing. - "In a concise body, only an expression is specified, which becomes the implicit return value. In a block body, you must use an explicit return statement." In order to use a "concise body" to return our object literal, we wrap our expression in parentheses. - From the [d3-time-format](https://github.com/d3/d3-time-format) module, we then use [\`d3.timeParse\`](https://github.com/d3/d3-time-format#timeParse), which is an alias for [\`locale.parse\`](https://github.com/d3/d3-time-format#locale_parse) (on the default locale), to create a time parser: \`const timeParser = d3.timeParse("%d %b %Y");\` - This time parser expects a date that looks like "23 May 2020". We use it to parse the "Date" as our X value: \`x: timeParser(x),\` - The \`+\` in the line \`y: +y\` is an [Arithmetic operator: Unary plus (+)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_plus) that "attempts to convert it into a number, if it isn't already". - We add extra JavaScript properties to our \`data\` array to store our X Axis and Y Axis labels: \`const extraPropertiesSource = {xAxisLabel: "Date →", yAxisLabel: "↑ Cells"}; return Object.assign(dataObjectTarget, extraPropertiesSource);\` - This uses [\`Object.assign(target, …sources)\`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) to copy all the (enumerable own) properties from one or more source objects to a target object and return it. - Experimenting with different \`timeUnit\` values: \`yearmonth\` and \`utcmonthdate\` - The [Vega-Lite time unit](https://vega.github.io/vega-lite/docs/timeunit.html) docs explain that "The specifier monthdate is sensitive to month and date, but not year, which can be useful for binning time values to look at seasonal patterns only." and to "use UTC time, you can add the \`utc\` prefix (e.g., \`"utcyear"\`, \`"utcyearmonth"\`). - Read [Vega-Lite axis](https://vega.github.io/vega-lite/docs/axis.html) to learn about \`"titleAngle": 0\` to rotate the Y Axis label and \`"titlePadding": 25\` to pad it from the tick markers. - Using \`labelExpr\` described under Labels in [Vega-Lite: Axis](https://vega.github.io/vega-lite/docs/axis.html#labels) documentation and the example shown under [Example: Using Axis labelExpr to Display Initial Letters of Month Name](https://vega.github.io/vega-lite/docs/axis.html#example-using-axis-labelexpr-to-display-initial-letters-of-month-name), I can show the first letter of the X Axis ordinal datum label using \`"labelExpr": "datum.label[0]"\`. This is a bit useless here, but it may come in handy in the future. - Using Vega-Lite [condition](https://vega.github.io/vega-lite/docs/condition.html): \`"condition": {"test": "datum['cumulative_count'] > 850", "field": "cumulative_count"},\` **[24 May 2020: Area Charts in D3 with Tooltips](https://observablehq.com/@didoesdigital/24-may-2020-area-charts-in-d3-with-tooltips?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)** - Bisect for tooltips. - Redrawn SVG path for a callout with the tip underneath the tooltip. - [SVG path visualizer by Mathieu Dutour](https://svg-path-visualizer.netlify.app/#M0.734375%2C0H78V42.5H44.3672l-5%2C5l-5%2C-5H0.734375V0Z) - SVG path editing to include variables to adapt to the width of the text label's bounding box. - In [Radial Area Chart by Mike Bostock](https://observablehq.com/@d3/radial-area-chart), the text labels appear to have a white shape around them, achieved using duplicated text elements using a large white stroke behind the actual text. - D3 area chart with tooltips. `38:T10e0,mdHistogramsAndDensityPlots = md` ## Day 32–35: Histograms and density plots **[26 May 2020: Histograms and density plots](https://observablehq.com/@didoesdigital/26-may-2020-histograms-and-density-plots?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)** - It looks like [\`d3.bin\` is the new name for \`d3.histogram\` in \`d3-array@2\`, which will be part of d3@6](https://github.com/d3/d3-array/issues/106#issuecomment-488172816). The D3 v5.16 documentation in [Dash](https://kapeli.com/dash) shows me documentation for \`.bin\` and not \`.histogram\`. [Moving Average by Mike Bostock](https://observablehq.com/@d3/moving-average) shows \`d3.histogram\` in use with D3 v5. I'm not sure what to make of all this. - Histogram and density plot theory - Don't place gaps between bars in histograms. - Don't omit zero values. - Compare different bin sizes to see what effect that has on the story. - Overlay the mean, median, or mode to help readers better understand the data. - Show [null values on a separate X Axis](https://spectrum.adobe.com/page/histogram/). - Use borders around bars to distinguish them (instead of space as you would in a bar chart). - Let people customise [bin size](https://www.data-to-viz.com/caveat/bin_size.html). Interesting bit of detail I found in [Adobe's histogram](https://spectrum.adobe.com/page/histogram/) guidelines regarding "Overflow" that I'm not so sure about: > When there are more values than can fit on an axis, don’t exclude them. Instead, add a label that includes the range's extreme values. (e.g., “2400+” implies that the range is “2400 and above”) **[27 May 2020: Exploratory Histogram](https://observablehq.com/@didoesdigital/27-may-2020-exploratory-histogram?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)** - Remember to include \`await\` keyword for image attachments so the \`alt\` attribute applies. Reference example in [Observable reference notebook](https://observablehq.com/@didoesdigital/observable?collection=@didoesdigital/reference). - Datawrapper SVG and basic styles - Questions from [What’s Going On in This Graph? | Dec. 5, 2018 by The Learning Network, The New York Times](https://www.nytimes.com/2018/11/29/learning/whats-going-on-in-this-graph-dec-5-2018.html): - **What do you notice?** - **What do you wonder?** *What are you curious about that comes from what you notice in the graphs?* - **What might be going on in these graphs?** *Write a catchy headline that captures the graphs’ main idea. If your headline makes a claim, tell us what you noticed that supports your claim.* - [edge-peaked distribution](https://www.data-to-viz.com/graph/histogram.html) - bimodal distribution and [multimodal distribution](https://en.wikipedia.org/wiki/Multimodal_distribution) - "details-on-demand" examples in tooltip shown in [Interactive Charts with D3.js by Amelia Wattenberger](https://wattenberger.com/blog/d3-interactive-charts). **[28 May 2020: D3 Histogram](https://observablehq.com/@didoesdigital/28-may-2020-d3-histogram?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)** - Histogram with a customisable bin size - [Histogram by Mike Bostock](https://observablehq.com/@d3/histogram) - Bin size input from [Moving Average by Mike Bostock](https://observablehq.com/@d3/moving-average) - docs in [d3-array v1.2.4 histogram](https://github.com/d3/d3-array/blob/v1.2.4/README.md#histogram) - Histogram data array: \`data = Object.assign(d3.csvParse(await FileAttachment("Cells in Journal_ Getting Started with Data Viz - Journal cells - 27 May 2020.csv").text(), ({"Number of cells": cells}) => +cells), {x: "Cells", y: "Days"})\` **[29 May 2020: D3 Histogram Styling](https://observablehq.com/@didoesdigital/29-may-2020-d3-histogram-styling?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)** - Adjust bar width instead of using stroke to create separation to avoid overlap with X Axis - Example of replacing Y Axis grid lines and tick markers with bar labels - Add a median reference line: \` const median = d3.median(data); svg.append('line').attr('stroke', '#202630').attr('x1', x(median) + margin.left).attr('y1', height - margin.bottom).attr('x2', x(median) + margin.left).attr('y2', height);\` `39:T892,mdDataTablesAndDataWrangling = md` ## Day 36–38: Data tables and data wrangling **[30 May 2020: Data Tables](https://observablehq.com/@didoesdigital/30-may-2020-data-tables?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)** - Data table theory - Data table header row, summary row, alignment, responsive behaviour, wrapping and truncating long text, sort, filter, search, pagination, and full width or fitted content. - Data tables in Observable using Markdown tables, HTML tables, or SVG tables. **[31 May 2020: Wikipedia Data Tables](https://observablehq.com/@didoesdigital/31-may-2020-wikipedia-data-tables?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)** - [Working with Wikipedia Data by Mike Bostock](https://observablehq.com/@mbostock/working-with-wikipedia-data) - Using table data from Wikipedia's CORS-accessible API - Parsing HTML string content - [\`DOMParser()\`](https://developer.mozilla.org/en-US/docs/Web/API/DOMParser) - \`parseFromString()\` - [\`adoptNode()\`](https://developer.mozilla.org/en-US/docs/Web/API/Document/adoptNode) - [\`cloneNode()\`](https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode) - Skip table header and footer rows: \`rows = oceania_table.querySelectorAll("tr:not(:first-child):not(:last-child)")\` - \`Array.from\` to create a new, shallow-copied Array: \`countries = Array.from(rows, r => r.querySelector("td:nth-child(2)").textContent.trim())\` **[1 June 2020: Wrangling Wikipedia List Data and Summary Statistics](https://observablehq.com/@didoesdigital/1-june-2020-wrangling-wikipedia-list-data-and-summary-stati?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)** - Fetching Wikipedia data: ~~~js fetch(\`https://en.wikipedia.org/w/api.php?format=json&origin=*&action=parse&prop=text&page=List_of_proverbial_phrases§ion=1\`).then(response => response.json()) ~~~ - Converting HTML to data: ~~~js Array.from(phrases_list.querySelectorAll("li"), r => r.textContent.trim()) ~~~ - Summary statistics: - \`d3.min(data)\` - \`d3.max(data)\` - \`d3.median(data)\` - \`d3.mean(data)\` - \`d3.deviation(data)\` `3a:T23c2,mdTreesAndHierarchy = md` ## Day 39–44: Trees and hierarchy **[2 June 2020: Treemaps, Dendrograms, Sunbursts, Circle Packing, and Tree Diagrams](https://observablehq.com/@didoesdigital/2-june-2020-treemaps-dendrograms-sunbursts-circle-packing?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)** - Theory about Treemaps, Dendrograms, Sunbursts, Circle Packing, and Tree Diagrams - Limit static treemaps to 3 levels of hierarchy. - For more than 3 levels of hierarchy, use an interactive treemap or sunburst to drill into deeper levels. - In dendrograms, use color or shading for enclosures to reinforce groupings and relationships. - Pair dendograms with heatmaps. - In circular packing, consider hiding the first level of hierarchy for aesthetic impact. - In dendrograms, pay close attention to distance calculations and clustering algorithms. Verify them. - Labels of wildly differing length can cause layout issues. - Angular labels can be difficult to read. - Scale circles according to area instead of radius. From [Data to viz: sunburst](https://www.data-to-viz.com/graph/sunburst.html): > Deeper slices are exagerated - by construction, outer parts tend to get bigger than inner part for a same value. Indeed, the perimeter of the circle gets longer when you go further from the center of the circle! **[3 June 2020: D3 Tree Diagram and D3 Hierarchy](https://observablehq.com/@didoesdigital/3-june-2020-d3-tree-diagram-and-d3-hierarchy)** - D3 tidy tree diagram - Proverbial phrases starting with "A" - "d3.stratify transforms a tree from link representation to hierarchy." - "A d3.hierarchy is a nested data structure representing a tree: each node has one parent node (node.parent), except for the root; likewise, each node has one or more child nodes (node.children), except for the leaves. In addition, each node can have associated data (node.data) to store whatever additional fields you like." - "If your data is already in a hierarchical format, such as nested JSON, you can pass it directly to d3.hierarchy." - "This convention matches the Document Object Model (element.children), so you can pass a DOM element to d3.hierarchy, which is a neat party trick." - \`d3.group(arrayData, groupingFn): Map\` - \`d3.rollup(dataArray, reducerFn, …keysToGroupBy): Map\` - \`d3.hierarchy(data, childrenAccessorFn): RootNode\` - Important note from the [d3-collection repo](https://github.com/d3/d3-collection): > **Deprecation notice**: Use JavaScript’s built-in [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map), [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) and [Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object) classes instead of d3-collection’s corresponding methods. Use [d3-array’s](https://github.com/d3/d3-array) [group](https://github.com/d3/d3-array/blob/master/README.md#group) and [rollup](https://github.com/d3/d3-array/blob/master/README.md#rollup) instead of d3-collection’s nest. - A custom \`makeHierarchy(config): hierarchyData\` function - Inspect and verify your data: Previously, I assumed all slashes were for interchangeable words within the phrase and therefore just ditched the alternative word, but in this line the slash indicates an alternative phrase. - Recursively splitting a string - Recursive tree population function - Create an \`autobox\` function that makes the visualisation as big as possible (the size of the document, which is the cell in Observable) then call it like so: ~~~js svg.attr("viewBox", autoBox); function autoBox() { document.body.appendChild(this); const {x, y, width, height} = this.getBBox(); document.body.removeChild(this); return [x, y, width, height]; } ~~~ - Add white text outline to words to stand out against other elements: ~~~js g.append("text") .attr("dy", "0.31em") .attr("x", d => d.x) .attr("font-size", 10) .attr("text-anchor", "start") .text(d => d.label) .clone(true) // duplicate the data label text .lower() // reorder elements so the duplicate is behind the original (because SVG has no z-index) .attr("aria-hidden", "true") // hide duplicate text from screen readers / assistive tech .attr("stroke", "white") // give it a white outline .style("user-select", "none"); // UPDATE 6 JUN 2020: don't select duplicate text ~~~ **[4 June 2020: D3 Clustered Dendrogram](https://observablehq.com/@didoesdigital/4-june-2020-d3-clustered-dendrogram?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)** - D3 clustered dendrogram - Proverbial phrases starting with whatever letter you choose - Dendrogram (tree diagram) with and without circle dots for nodes - Clustering the [\`tree\`](https://observablehq.com/@didoesdigital/4-june-2020-d3-clustered-dendrogram#tree) using [\`d3.cluster()\`](https://github.com/d3/d3-hierarchy/blob/master/README.md#cluster). This effectively places all leaf nodes at the same depth so they all line up on the right. - Sorting the hierarchical data in [\`tree\`](https://observablehq.com/@didoesdigital/4-june-2020-d3-clustered-dendrogram#tree) by height and text using \`.sort()\`. - Sizing the \`viewBox\` using [\`autoBox\`](https://observablehq.com/@didoesdigital/4-june-2020-d3-clustered-dendrogram#autoBox), resulting in negative \`x\` and \`y\`, which made it fiddly to adjust the chart height to make space for the chart title and source. - Drawing the paths manually instead of using [\`d3.linkHorizontal\`](https://github.com/d3/d3-shape/blob/master/README.md#linkhorizontal) to spread them out more: ~~~js .attr("d", d => \` M\${d.target.y},\${d.target.x} C\${d.source.y + root.dy / 2},\${d.target.x} \${d.source.y + root.dy / 2},\${d.source.x} \${d.source.y},\${d.source.x} \`); // .attr("d", d3.linkHorizontal() // .x(d => d.y) // .y(d => d.x)); ~~~ **[5 June 2020: D3 Radial Tidy Tree and Radial Dendrogram](https://observablehq.com/@didoesdigital/5-june-2020-d3-radial-clustered-dendrogram?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)** - D3 radial tidy tree and dendrogram - Semi-circle fan chart from radial tidy tree - It is fun to look at all the different shapes of [radial trees in Observable](https://observablehq.com/search?query=radial%20tree). - This one is outrageous. Be warned, it has a LOT of nodes, your device may struggle: [Radial Tidy Tree by johnfischbeck](https://observablehq.com/@johnfischbeck/radial-tidy-tree) - I read the [D3 \`tree.separation()\`](https://github.com/d3/d3-hierarchy/blob/master/README.md#tree_separation) docs, which explains: > A variation that is more appropriate for radial layouts reduces the separation gap proportionally to the radius: ~~~js function separation(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; } ~~~ - I used \`csvParse\` to grab the \`viewBox\` values calculated from the autobox function. There must be a better way to solve that specific problem but I enjoyed using \`csvParse\` in that unusual way to turn a \`viewBox\` string into an array: \`const viewBox = (d3.csvParse(svg.attr("viewBox"))).columns;\` **[6 June 2020: D3 Collapsible Tidy Tree](https://observablehq.com/@didoesdigital/6-june-2020-d3-collapsible-tidy-tree)** - D3 collapsible tidy tree - Conditional pointer cursor (looks like a hand) only if the node of the tree has children that can be expanded: \`.attr("cursor", d => d._children ? "pointer" : "default")\` **[7 June 2020: D3 Collapsible Tidy Tree (Improved)](https://observablehq.com/@didoesdigital/7-june-2020-d3-collapsible-tidy-tree-improved)** - D3 collapsible tidy tree (improved) - Chart title and source details animate with the same transition as the chart on each update, which in effect makes them look like they stay exactly where they are while the rest of the chart adjusts. - D3 docs for [select.data](https://github.com/d3/d3-selection/blob/master/README.md#selection_data) and [selection.join](https://github.com/d3/d3-selection/blob/master/README.md#selection_join) - New [selection.join by Mike Bostock](https://observablehq.com/@d3/selection-join) - Old [General Update Pattern by Mike Bostock](https://observablehq.com/@d3/general-update-pattern) - Old [Thinking with Joins by Mike Bostock (2012)](https://bost.ocks.org/mike/join/) shows a venn diagram of data and elements with enter, update, and exit in the 3 areas. - There were some details in these notebooks and blog posts that would be ideal to include in the documentation itself, such as this whole paragraph: > The return value of the *enter* and *update* function is important—it specifies the selections to merge and return by *selection*.join. To avoid breaking the method chain, use [*selection*.call](https://github.com/d3/d3-selection/blob/master/README.md#selection_call) to create transitions. Or, return an undefined enter or update selection to prevent merging. `3b:T1d45,mdTouchDevices = md` ## Day 44: Touch devices **[8 June 2020: Designing for Touch Devices: Drag, Click, Hover, Focus, Scroll, Zoom, Delaunay, Voronoi](https://observablehq.com/@didoesdigital/8-june-2020-designing-for-touch-devices-drag-click-hover-foc?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)** - [CSS Tricks: touch-action by Andy Adams](https://css-tricks.com/almanac/properties/t/touch-action/) > The \`touch-action\` property in CSS gives you control over the effect of touchscreen interactions with an element, similar to the more widely-used \`pointer-events\` property used to control mouse interactions. > By default, a browser will handle touch interactions automatically: Pinch to zoom, swipe to scroll, etc. Setting \`touch-action\` to \`none\` will disable all browser handling of these events, leaving them up to you to implement (via JavaScript). If you only want to take over one interaction, tell the browser to handle the rest. For example, if you wrote some JavaScript that only handles zooming, you can tell the browser to handle everything else with this property: \`touch-action: pan-x pan-y;\`. - [MDN: Multi-touch interaction](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events/Multi-touch_interaction) - [MDN: Pinch zoom gestures](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events/Pinch_zoom_gestures) - [MDN: Touch events](https://developer.mozilla.org/en-US/docs/Web/API/Touch_events) > In order to provide quality support for touch-based user interfaces, touch events offer the ability to interpret finger (or stylus) activity on touch screens or trackpads. - [MDN: -webkit-overflow-scrolling](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling): \`-webkit-overflow-scrolling: touch;\` > Use momentum-based scrolling, where the content continues to scroll for a while after finishing the scroll gesture and removing your finger from the touchscreen. The speed and duration of the continued scrolling is proportional to how vigorous the scroll gesture was. Also creates a new stacking context. - [MDN: Using Pointer Events](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events/Using_Pointer_Events) - [MDN: pointer-events](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events) > Pointer-events: none The element is never the target of pointer events; however, pointer events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, pointer events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases. - [MDN: user-select](https://developer.mozilla.org/en-US/docs/Web/CSS/user-select) > \`user-select\` is not an inherited property, though the initial \`auto\` value makes it behave like it is inherited most of the time. WebKit/Chromium-based browsers do implement the property as inherited, which violates the behavior described in the spec, and this will bring some issues. - [MDN: -webkit-tap-highlight-color](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color) > \`-webkit-tap-highlight-color\` is a non-standard CSS property that sets the color of the highlight that appears over a link while it's being tapped. The highlighting indicates to the user that their tap is being successfully recognized, and indicates which element they're tapping on. - [MDN: Cursor](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) > grab Something can be grabbed (dragged to be moved). > grabbing Something is being grabbed (dragged to be moved). - [Multi-Line Chart by Mike Bostock](https://observablehq.com/@d3/multi-line-chart) (basic mouse and touch hover behaviour) - A few of the drag notebooks included \`d3-delaunay\` so I took a detour: - [The Delaunay's Dual by Mike Bostock](https://observablehq.com/@mbostock/the-delaunays-dual) - [d3-delaunay docs](https://github.com/d3/d3-delaunay/blob/master/README.md) - [Drag (SVG Voronoi, clipped) by Mike Bostock](https://observablehq.com/@d3/drag-svg-voronoi-clipped?collection=@d3/d3-drag) - [Observable collection: d3-delaunay](https://observablehq.com/collection/@d3/d3-delaunay) - [d3-drag docs](https://github.com/d3/d3-drag/blob/master/README.md) - [Observable collection: d3-drag](https://observablehq.com/collection/@d3/d3-drag) - [Drag (SVG) by Mike Bostock](https://observablehq.com/@d3/circle-dragging-i?collection=@d3/d3-drag) - [Drag zoom by Mike Bostock](https://observablehq.com/@d3/drag-zoom?collection=@d3/d3-drag) - [Drag & Click by Mike Bostock](https://observablehq.com/@d3/click-vs-drag?collection=@d3/d3-drag) - [Drag (Canvas Search) by Mike Bostock](https://observablehq.com/@d3/circle-dragging-ii?collection=@d3/d3-drag) - [Drag (Canvas View) by Mike Bostock](https://observablehq.com/@d3/hello-d3-drag?collection=@d3/d3-drag) - [Draw Me by Mike Bostock](https://observablehq.com/@d3/draw-me?collection=@d3/d3-drag) - [Versor Dragging by Mike Bostock](https://observablehq.com/@d3/versor-dragging?collection=@d3/d3-drag) - [Force-Directed Graph by Mike Bostock](https://observablehq.com/@d3/force-directed-graph?collection=@d3/d3-drag) - [Drag (SVG Voronoi) by Mike Bostock](https://observablehq.com/@d3/circle-dragging-iii?collection=@d3/d3-drag) - [d3-zoom docs](https://github.com/d3/d3-zoom) > Applying the zoom behavior also sets the \`-webkit-tap-highlight-color\` style to \`transparent\`, disabling the tap highlight on iOS. If you want a different tap highlight color, remove or re-apply this style after applying the drag behavior. - [Observable collection: d3-zoom](https://observablehq.com/collection/@d3/d3-zoom) - [Zoom (SVG) by Mike Bostock](https://observablehq.com/@d3/zoom?collection=@d3/d3-zoom) (A “hello world” for d3.zoom in SVG) - [Pannable Chart by Mike Bostock](https://observablehq.com/@d3/pannable-chart?collection=@d3/d3-zoom) - [Zoomable Bar Chart by Mike Bostock](https://observablehq.com/@d3/zoomable-bar-chart) - [Zoomable Area Chart by Mike Bostock](https://observablehq.com/@d3/zoomable-area-chart?collection=@d3/d3-zoom) - [Interaction by Jeffrey Heer](https://observablehq.com/@uwdata/interaction) This is the crux of \`d3.drag\`: ~~~js d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended); ~~~ Show a grabbing cursor on drag: ~~~js const g = svg.append("g") .attr("cursor", "grab"); ⋮ function dragstarted() { d3.select(this).raise(); g.attr("cursor", "grabbing"); } function dragended() { g.attr("cursor", "grab"); } ~~~ A [D3 zoom event](https://github.com/d3/d3-zoom/blob/master/README.md#zoom-events) includes a [zoom transform](https://github.com/d3/d3-zoom/blob/master/README.md#zoom-transforms), which has a [\`transform.toString()\`](https://github.com/d3/d3-zoom/blob/master/README.md#transform_toString) method that returns an [SVG transform](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform) using the \`transform.x\` (translation amount tx along the x-axis), \`transform.y\` (the translation amount ty along the y-axis), and \`transform.k\` (scale factor k) from the [zoom transform](https://github.com/d3/d3-zoom/blob/master/README.md#zoom-transforms): ~~~js d3.event.transform function zoomed() { g.attr("transform", d3.event.transform); } ~~~ `3c:T1d18,mdDesigningForSmallScreens = md` ## Day 46: Designing for Small Screens **[9 June 2020: Designing for Small Screens: Responsive Data Viz, Resizing, and Aspect Ratios](https://observablehq.com/@didoesdigital/9-june-2020-designing-for-small-screens-responsive-data-viz?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)** Responsive design: - **[Techniques for Data Visualization on both Mobile & Desktop by Nadieh Bremer](https://www.visualcinnamon.com/2019/04/mobile-vs-desktop-dataviz)** (I strongly recommend reading this) 1. Do nothing: don't design a mobile/desktop version if it's not needed e.g. physical viz, internal BI tools, etc. - Image on mobile - Position is arbitrary: fit data points within the available width and use as much height as is needed to show all the data - Scale down: scale down the entire chart and font sizes - Fit to the available width: keep the height the same, but scale down the width of everything to make it fit even the smallest screens - Stack vertically: spread your data horizontally on large screens, but vertically on small screens - Zoomable visuals & starting zooms: set initial zoom - Reposition data: Place your data in different locations, depending on the width available. - Different charts - [Crafting a custom, mobile-friendly data visualization by Sebastian Sadowski](https://medium.com/@sadowskiseb/crafting-a-custom-mobile-friendly-data-visualization-cb91a3024064) - [React + D3.js: Sizing & Responsivity by Amelia Wattenberger](https://wattenberger.com/blog/react-and-d3#sizing-responsivity): - [MDN: ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) > \`ResizeObserver\` is [currently not supported in all browsers](https://caniuse.com/#feat=resizeobserver), so we're using [this resize-observer](https://www.npmjs.com/package/@juggle/resize-observer) polyfill to make sure this works in all browsers. - [Dashboard by Mike Bostock](https://observablehq.com/@mbostock/dashboard): - CSS grid layout - resizer function - [Responsive notebook design by Tom MacWright](https://observablehq.com/@tmcw/responsive-notebook-design-protips): \`d3.axisBottom(…).ticks(width / 80)\` - [D3 Brushable Timeline (barchart) by Beatriz Martínez](https://observablehq.com/@maritrinez/d3-brushable-timeline): \`.tickValues(xScale.domain().filter((d, i) => !(i % 5)))\` (useful for band scales) - [Bl.ocks: Responding to Resize by Curran Kelleher](https://bl.ocks.org/curran/3a68b0c81991e2e94b19) using \`window.addEventListener("resize", redraw);\` - [Fetch Progress by Mike Bostock](https://observablehq.com/@mbostock/fetch-progress) - [Donut Chart by Mike Bostock](https://observablehq.com/@d3/donut-chart). Centers and scales the donut chart. - [Cluster Dendrogram by Mike Bostock](https://observablehq.com/@d3/cluster-dendrogram?collection=@d3/d3-hierarchy). Creates an \`autobox\` function that makes the visualisation as big as possible (the size of the document, which is the cell in Observable) then call it in \`svg.attr("viewBox", autoBox)\` - [Zoomable Scatterplot by Mike Bostock](https://observablehq.com/@d3/zoomable-scatterplot). Responsive axis \`g => g.selectAll(".y").data(y.ticks(12 * k))\` where \`k = height / width\` - [Responsive maps based on the bounds of geographic data by Ryan Murphy](https://observablehq.com/@rdmurphy/responsive-maps-based-on-the-bounds-of-geographic-data) - [COVID-19 in Washington state by Jake Low](https://observablehq.com/@jake-low/covid-19-in-washington-state): ~~~js // aspectRatio = viewbox.width / viewbox.height root .attr("width", width) .attr("height", width / aspectRatio) .attr("viewBox", \`0 0 \${viewbox.width} \${viewbox.height}\`) .attr("preserveAspectRatio", "none"); ~~~ - Transition resize. This snippet is from [Collapsible Tree by Mike Bostock](https://observablehq.com/@d3/collapsible-tree): ~~~js const transition = svg.transition() .duration(duration) .attr("viewBox", [-margin.left, left.x - margin.top, width, height]) .tween("resize", window.ResizeObserver ? null : () => () => svg.dispatch("toggle")); ~~~ - Check out the \`resizer\` function and how its used in [Dashboard by Mike Bostock](https://observablehq.com/@mbostock/dashboard): ~~~js function resizer(element, dimension = "clientWidth") { return Generators.observe(notify => { let width = notify(element[dimension]); const resized = () => { let w = element[dimension]; if (w !== width) notify(width = w); }; window.addEventListener("resize", resized); return () => window.removeEventListener("resize", resized); }); } ~~~ SVG aspect ratio: - [A simple way to make D3.js charts responsive by Louise Moxy](https://medium.com/@louisemoxy/a-simple-way-to-make-d3-js-charts-svgs-responsive-7afb04bc2e4b) - [MDN: preserveAspectRatio](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio) - [Interactive SVG Coordinate System by Sara Soueidan](https://www.sarasoueidan.com/demos/interactive-svg-coordinate-system/index.html) - [How to Scale SVG by Amelia Bellamy-Royds](https://css-tricks.com/scale-svg/) Viewport aspect ratio: - [Aspect Ratio comparison by spencer kelly](https://observablehq.com/@spencermountain/aspect-ratio-comparison) - [Aspect Ratio Finder by spencer kelly](https://observablehq.com/@spencermountain/aspect-ratio-finder) Data viz aspect ratio: - [Aspect Ratio and Banking to 45 Degrees by Robert Kosara](https://eagereyes.org/basics/banking-45-degrees) - [Stanford Vis Group | Arc Length-based Aspect Ratio Selection](http://vis.stanford.edu/papers/arclength-banking) - [Aspect ratio vs. space efficency of map projecions [sic] by Torben Jansen](https://observablehq.com/@toja/aspect-ratio-vs-space-efficency-of-map-projecions) Miscellaneous: - [MDN: resize](https://developer.mozilla.org/en-US/docs/Web/CSS/resize). "The resize CSS property sets whether an element is resizable, and if so, in which directions." - A paper on value retrieval and comparison tasks with different charts on mobile phones: [Review of Visualizing Ranges over Time on Mobile Phones: A Task-Based Crowdsourced Evaluation](https://observablehq.com/@phemmati/review-of-visualizing-ranges-over-time-on-mobile-phones-a-ta) - [Search Observable for "responsive"](https://observablehq.com/search?query=responsive) Approaches: - Set \`.ticks()\` relative to chart width e.g. \`.ticks(width / 160)\`. In Observable, set tick size relative to reactive \`width\` variable that is the current width of the cell responds instantly to changes in the window size. - Set initial zoom appropriate for screen size in zoomable viz. - Defer secondary information to other screens or tap/click on crowded screens. - Hide lesser known landmarks on maps on smaller screens. - Hide extra annotations on small screens. - Set a max width on large screens (including for performance). - Show a preloader for slow Internet connections or large datasets. Display progress of asynchronous requests. See [Fetch Progress by Mike Bostock](https://observablehq.com/@mbostock/fetch-progress). CSS \`tab-size\` property: [MDN: tab-size](https://developer.mozilla.org/en-US/docs/Web/CSS/tab-size) "The tab-size CSS property is used to customize the width of tab characters (U+0009)." `3d:T2e38,mdTypography = md` ## Day 47: Typography **[10 June 2020: Typography for Data Viz](https://observablehq.com/@didoesdigital/10-june-2020-typography-for-data-viz?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)** ~~~ lato = html\` \` ~~~ - [Choosing Fonts for Your Data Visualization by Tiffany France](https://medium.com/nightingale/choosing-a-font-for-your-data-visualization-2ed37afea637) - [Finding the Best Free Fonts for Numbers by Samantha Zhang](https://blog.graphiq.com/finding-the-best-free-fonts-for-numbers-25c54002a895) - [Fonts for Complex Data by Jonathan Hoefler](https://www.typography.com/blog/fonts-for-complex-data) - "Fonts" section in [Guide: 'Soft-style' by Samuel Parsons, aka SParsonsDataViz](https://www.reflectionsindesign.com/2019/12/guide-soft-style.html?m=1) - [A new typeface for Parliament by Jack Craig, Parliamentary Digital Service](https://pds.blog.parliament.uk/2018/04/23/a-new-typeface-for-parliament/) - [My 5 Favorite Fonts for Gorgeous Numerals by Mary Lester](https://www.tech4pub.com/2014/08/29/my-5-favorite-fonts-for-gorgeous-numerals/) Some free sans-serif fonts for data viz: - [Lato](https://fonts.google.com/specimen/Lato) - [Assistant](https://fonts.google.com/specimen/Assistant) - [Noto Sans](https://fonts.google.com/specimen/Noto+Sans) - [Source Sans Pro](https://fonts.google.com/specimen/Source+Sans+Pro) - [Libre Franklin](https://fonts.google.com/specimen/Libre+Franklin) - [Open Sans](https://fonts.google.com/specimen/Open+Sans) - [Roboto Condensed](https://fonts.google.com/specimen/Roboto+Condensed) - [Titillium Web](https://fonts.google.com/specimen/Titillium+Web) - [Varela Round](https://fonts.google.com/specimen/Varela+Round) Some free serif fonts for data viz: - [Droid Serif](https://fonts.google.com/specimen/Droid+Serif) - [Crimson Text](https://fonts.google.com/specimen/Crimson+Text) - [Old Standard TT](https://fonts.google.com/specimen/Old+Standard+TT) - [Kameron](https://fonts.google.com/specimen/Kameron) - [Copse](https://fonts.google.com/specimen/Copse) Some specific paid fonts for small sizes or data viz: - [Charts + Tables Font Collection by Hoefler&Co](https://www.typography.com/fonts/styles/charts-tables) - [Reading Edge](http://www.fontbureau.com/ReadingEdge/) - [Interstate](https://fonts.adobe.com/fonts/interstate) - [Soleil](https://fonts.adobe.com/fonts/soleil) - [Calibre](https://klim.co.nz/retail-fonts/calibre/) - [Guide: Typography by Samuel Parsons, aka SParsonsDataViz](https://www.reflectionsindesign.com/2020/01/guide-typography.html?m=1) - [Placing text on arcs with d3.js by Nadieh Bremer](https://www.visualcinnamon.com/2015/09/placing-text-on-arcs.html) Use \`font-variant\` instead of \`font-feature-settings\` most of the time for accessing extra font features, such as \`font-variant-numeric\` to use alternate glyphs for numbers, fractions, and ordinal markers. - [MDN: font-variant](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant) - [MDN: font-feature-settings](https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings) - [Use OpenType Features](https://helpx.adobe.com/fonts/using/use-open-type-features.html) > Because \`font-feature-setting\` is a low-level property intended “for special cases where its use is the only way of accessing a particular infrequently used font feature” it will override font-variant regardless of source order. But be careful — it also overrides itself - List of OpenType [Registered features](https://docs.microsoft.com/en-us/typography/opentype/spec/featurelist) - [\`font-feature-settings\`](https://caniuse.com/#search=font-feature-settings) is well supported. - [Typefaces by Benjamin](https://observablehq.com/@hastebrot/typography): A selection of importable fonts - [Peaks in confirmed daily deaths due to COVID-19 so far by antejan](https://observablehq.com/@antejan/peaks-in-confirmed-daily-deaths-due-to-covid-19-so-far) ~~~html html\` \` ~~~ **[16 June 2020: D3 Disjoint Force-Directed Graph](https://observablehq.com/@didoesdigital/16-june-2020-d3-disjoint-force-directed-graph?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)** - Disjoint force directed graph ~~~js const links = data.links.map(d => Object.create(d)); const nodes = data.nodes.map(d => Object.create(d)); const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.id)) .force("charge", d3.forceManyBody().strength(-100)) .force("x", d3.forceX()) .force("y", d3.forceY()); ~~~ `41:Tb6e,mdTexturesAndTransitions = md` ## Day 54–57: Bar chart textures and transitions **[17 June 2020: D3 Bar Chart with Textured Line](https://observablehq.com/@didoesdigital/17-june-2020-d3-bar-chart-with-textured-line?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)** ~~~js const pencilFilter = svg.append('defs').append('filter') .attr('id', 'pencilTexture') .attr('width','140%') .attr('height','140%') .attr('x','-20%') .attr('y','-20%') .attr('filterUnits','objectBoundingBox') pencilFilter.append('feTurbulence') .attr('type','fractalNoise') .attr('baseFrequency', 2) .attr('numOctaves', 5) .attr('stitchTiles', 'stitch') .attr('result', 't1') pencilFilter.append('feColorMatrix') .attr('type','matrix') .attr('values','0 0 0 0 0, 0 0 0 0 0, 0 0 0 0 0, 0 0 0 -1.5 1.5') .attr('result','t2') pencilFilter.append('feComposite') .attr('operator','in') .attr('in','SourceGraphic') .attr('in2','t2') .attr('result','SourceTextured') pencilFilter.append('feTurbulence') .attr('type','fractalNoise') .attr('baseFrequency', .03) .attr('numOctaves', 5) .attr('seed', '1') .attr('result', 'f1') pencilFilter.append('feDisplacementMap') .attr('xChannelSelector','R') .attr('yChannelSelector', 'G') .attr('scale', 5) .attr('in', 'SourceTextured') .attr('in2', 'f1') .attr('result', 'f4') pencilFilter.append('feTurbulence') .attr('type','fractalNoise') .attr('baseFrequency', .03) .attr('numOctaves', 5) .attr('seed', '10') .attr('result', 'f2') pencilFilter.append('feDisplacementMap') .attr('xChannelSelector','R') .attr('yChannelSelector', 'G') .attr('scale', 5) .attr('in', 'SourceTextured') .attr('in2', 'f2') .attr('result', 'f5') pencilFilter.append('feTurbulence') .attr('type','fractalNoise') .attr('baseFrequency', .03) .attr('numOctaves', 5) .attr('seed', '100') .attr('result', 'f3') pencilFilter.append('feDisplacementMap') .attr('xChannelSelector','R') .attr('yChannelSelector', 'G') .attr('scale', 3) .attr('in', 'SourceTextured') .attr('in2', 'f3') .attr('result', 'f6') pencilFilter.append('feBlend') .attr('mode','multiply') .attr('in', 'f5') .attr('in2', 'f4') .attr('result', 'out1') pencilFilter.append('feBlend') .attr('mode','multiply') .attr('in', 'out1') .attr('in2', 'f6') .attr('result', 'out2') const lineGroup = svg.append("g") .attr('filter', 'url(#pencilTexture)') .attr("class", "line-group") .attr("transform", \`translate(\${x.bandwidth() / 2},0)\`) ~~~ Single-letter axis ticks: ~~~js .call(d3.axisBottom(x).tickFormat(d => d3.timeFormat("%a")(d).substring(0, 1))); ~~~ Curved line: ~~~js lineGenerator = d3.line() .x(d => x(d.x)) .y(d => y(d.y)) .curve(d3.curveLinear); ~~~ `42:T6ff,md` **[18 June 2020: D3 Bar Chart Transitions](https://observablehq.com/@didoesdigital/18-june-2020-d3-bar-chart-transitions?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)** - Uses \`viewof week = select(weeks)\` using \`import { select } from "@jashkenas/inputs"\` to choose the week by label e.g. “Week 1”. This provides a data subset to \`chart.drawData(week)\`, defined in the main chart code by: ~~~js svg.node().drawData = function(inputWeek) { const subsetData = data.filter(d => d.weekOfYear === inputWeek); ⋮ } ~~~ - On chart updates, bar rects transition: ~~~js 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)), ~~~ - In the bar entrance code, I set the \`y\` value to 0 immediately before setting the actual value to ensure it has somewhere to transition from: ~~~js .attr('y', d => y(0)) // This is important .attr('y', d => y(d.y)) ~~~ - [D3 Chart Updates in Observable by Michael Freeman](https://observablehq.com/@info474/d3-chart-updates-in-observable?collection=@info474/tutorials) - [Introduction to D3 by Tongshuang Wu](https://observablehq.com/@uwdata/introduction-to-d3) - In [The Space Between by Alec Barrett](https://observablehq.com/@anbnyc/the-space-between), I found these notes about transitioning data: "In the first category, the states between the start and end of the transition exhibit two features:" - "Each state is a grammatically correct representation for the graphic" - "Each state shows a plausible, and sometimes real, value for the dataset"" `43:T487,md` **[19 June 2020: D3 Bar Chart Transitions (Improved)](https://observablehq.com/@didoesdigital/19-june-2020-d3-bar-chart-transitions-improved?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)** - I use \`.call\` immediately in the \`enter\` code to transition the \`rect\`s so that they animate on first page load, not only subsequent data changes: ~~~js 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)) ) , ~~~ - I use \`.call\` instead of chaining \`.transition\` because there's no element yet transition. Tips in: [Day 18 - Join, Enter, Update, Exit by Tyler Wolf](https://observablehq.com/@thetylerwolf/day-18-join-enter-update-exit) `44:Tb8f,md` **[20 June 2020: Sketchy D3 Bar Chart Style](https://observablehq.com/@didoesdigital/20-june-2020-sketchy-d3-bar-chart-style?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)** - Sketchy typography styles using [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): ~~~html typographyStyles = html\` \` ~~~ - Legend positioning to edge: ~~~js const legend = svg.append("g") .attr("class", "legend") .style('font-size', 12) // We reposition the legend after yielding the SVG node .call(d3Legend .legendColor() .shape("rect") .shapeWidth(d3.max([scale.x.bandwidth(), 24])) .shapeHeight(scale.y.bandwidth()) .shapePadding(d3.max([scale.x.bandwidth() + 5, 24 + 5])) .labelOffset(scale.y.bandwidth() + 5) .title("Goodie rank legend") .orient('horizontal') .cellFilter(d => d.data !== 0) // skip zero, it's not interesting .labelAlign('start') .labelFormat('d') .scale(scale.color) .cells(4) .ascending(true) .labels(["0", "3rd", "2nd", "1st"]) // Inverts 1 and 3 rank ); ⋮ yield svg.node(); // yield, so that legend.node().getBBox() has results // Calculate how much to shift legend group to fit in our plot area nicely // via https://bl.ocks.org/sjengle/4e8777bed44557dadafa const legendBounds = legend.node().getBBox(); const legendXShift = params.svg.width - legendBounds.width - params.margin.right; const legendYShift = -legendBounds.y + 16 //(params.margin.top - legendBounds.height); legend.attr("transform", \`translate(\${legendXShift}, \${legendYShift})\`); ~~~ - I added \`stroke-linecap: round; stroke-linejoin: round;\` to my white text outline approach to data labels, as found in [Labelling Things by Harry Stevens](https://observablehq.com/@harrystevens/labelling-things).` 52:T5fd,md` **[9 July 2020: D3 Heatmap Styled](https://observablehq.com/@didoesdigital/9-july-2020-d3-heatmap-styled?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)** Techniques to fit to small screens: - Repositioning elements e.g. the chart title: ~~~js .attr("transform", width >= 840 ? \`translate(\${params.plot.x}, 5)\` : \`translate(15, 5)\`) ~~~ - Changing angles e.g. tick labels: ~~~js #x-axis text { text-anchor: start; transform: rotate(-50deg); } @media (min-width: 450px) { #x-axis text { transform: rotate(-35deg); } } ~~~ - Reducing font size e.g. tick labels: ~~~css .tick text { font-size: clamp(.625rem, 3vw, .7rem); } ~~~ - Removing text over X characters on small screens e.g. "The Beach Ball is popular with one third of cats." becomes "The Beach Ball is popular": ~~~js .text(width >= 480 ? data.observation : data.observation.substr(0, 25)); ~~~ - Setting minimum sizes e.g. cells (derived from plot params) - Using CSS clamp to see minimum sizes in \`rem\`, preferred size in \`vw\` relative to the viewport width, and maximum sizes in \`rem\` e.g. \`font-size: clamp(.625rem, 3vw, .7rem);\` - Media queries e.g. \`@media (max-width: 600px) { #y-axis text { transform: rotate(-50deg); }}\` - Observable/JS ternary operator to set sizes over minimum Observable notebook cell width e.g. ~~~js width >= 840 ? \`translate(\${params.plot.x}, 0)\` : \`translate(15, 0)\` ~~~ `53:T4b3,md`**[11 July 2020: D3 Bubble Chart](https://observablehq.com/@didoesdigital/11-july-2020-d3-bubble-chart?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)** - Tick formatting for readable time formatting: \`.tickFormat(d3.timeFormat('%-I:%M %p'));\` like “10:15 AM”. - Use \`const size = d3.scaleSqrt()\` for circle radius. - This approach to hiding the 0 on the Y Axis seems a bit shabby, I expect there's a better way I don't know about: ~~~js const gy = svg.append("g") .attr("id", "y-axis") .attr("class", "axis") .attr("transform", \`translate(\${params.plot.x}, \${params.plot.y})\`) .call(axis.y) .call(g => g.selectAll('text').filter(function(d, i) { if (d3.select(this).text() === '0') { d3.select(d3.select(this).node().parentNode).remove(); } }) ) ~~~ - Duplicate the last tick's \`text\` element of the Y axis and reset the text content to add the Y axis label: ~~~js .call(g => g.select(".tick:last-of-type text").clone() .attr("x", 12) .attr("text-anchor", "start") .text("Words per minute")); ~~~ `54:T82b,md` **[13 July 2020: D3 Bubble Chart with Voronoi Labels on Hover](https://observablehq.com/@didoesdigital/13-july-2020-d3-bubble-chart-with-voronoi-labels-on-hover?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)** - When using voronoi mouse/touch targets, use \`pointer-events: none\` on the bubbles, so they're not covering the voronoi cells and blocking the mouseover events. - Bubbles: ~~~js const bubbles = svg.append("g") .attr("id", "bubbles") .attr("transform", \`translate(\${params.plot.x}, \${params.plot.y})\`) .attr("fill", "none") .attr("stroke-width", 1.0) .attr("opacity", 1) .selectAll("g") .data(data) .join("circle") .style("pointer-events", "none") .attr("cx", d => scale.x(d.finishedTime)) .attr("cy", d => scale.y(d.wpm)) .attr("r", d => scale.size(d.words)) .attr("fill", d => scale.color(d.revisionMode)) .attr("stroke", d => scale.color(d.revisionMode)) .attr("fill-opacity", 0.4) .attr("stroke-opacity", 0.8) ~~~ - Transitions: ~~~js .on("mouseover", function (d, i) { labels.append('g') .attr("class", "bubble-label") .attr("pointer-events", "none") .attr('opacity', 0) .attr("transform", \`translate(\${scale.x(d.finishedTime)},\${scale.y(d.wpm)})\`) .append('text') .attr("stroke", "none") .attr("fill", "#202630") .attr("text-anchor", "middle") .text(d.title) .clone(true) .lower() .attr("aria-hidden", "true") .attr("fill", "none") .attr("stroke", "white") .attr("stroke-width", 2) .attr("stroke-linecap", "round") .attr("stroke-linejoin", "round"); svg.selectAll('.bubble-label').transition() .duration(200) .attr('opacity', 1); }) ~~~ `55:T640,md`**[14 July 2020: D3 Bubble Chart with Voronoi Tooltips](https://observablehq.com/@didoesdigital/14-july-2020-d3-bubble-chart-with-voronoi-tooltips?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)** - Use \`tooltip.raise()\` to show the tooltips over the bubbles or rearrange the code to add the elements in the right order instead of using raise. - Voronoi tooltips using Delaunay: ~~~js const voronoi = d3.Delaunay .from( data, d => scale.x(d.finishedTime), d => scale.y(d.wpm)) .voronoi( [0, 0, params.plot.width, params.plot.height]); const tooltip = svg.append("g") svg.append("g") .attr("class", "voronoiWrapper") .attr("transform", \`translate(\${params.plot.x}, \${params.plot.y})\`) .selectAll("path") .data(data) .join("path") .attr("opacity", 0.5) // .attr("stroke", "#ff1493") // Show overlay for debugging .attr("fill", "none") .style("pointer-events", "all") .attr("d", (d,i) => voronoi.renderCell(i)) .on("mouseover", function (d, i) { tooltip .attr("transform", \`translate(\${params.plot.x + scale.x(d.finishedTime)},\${params.plot.y + scale.y(d.wpm) - 5})\`) .call(popover, \`\${d.title} \${d.wpm + " WPM"} · \${d.words + " words"}\`); }) .on("mouseout", () => { tooltip.call(popover, null) }); ⋮ // bubbles ⋮ tooltip.raise(); ~~~ `56:T40f,mdPopulationPyramids = md`## Day 82–84: Population pyramids **[15 July 2020: About Population Pyramids](https://observablehq.com/@didoesdigital/15-july-2020-about-population-pyramids?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)** A **population pyramid** is a pair of back-to-back [histograms](https://observablehq.com/@didoesdigital/26-may-2020-histograms-and-density-plots?collection=@didoesdigital/journal-getting-started-with-data-viz-collection) or a "mirror histogram" that show the distribution of age groups in a population. It's sometimes called an "age pyramid" or "age and sex pyramid". It is a specific type of butterfly chart. - **Expansive pyramids** are wide at young ages: high birth rate and low life expectancy. This shape is what gives "population pyramid" its name. - **Stationary pyramids** show constant age populations over time: birth rates and death rates are equal. - **Constrictive pyramids** are narrow at old ages: long life expectancy, low death rate, and low birth rate. `57:Ta16,md`**[16 July 2020: Data Wrangling for Population Pyramids](https://observablehq.com/@didoesdigital/16-july-2020-data-wrangling-for-population-pyramids?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)** - [d3.zip, d3.transpose by Fil](https://observablehq.com/@d3/d3-transpose) - "[d3.zip](https://github.com/d3/d3-array/blob/master/README.md#zip) can be used to join together several sources of data, provided they are ordered in the same way." - "d3.zip is, in fact, just a way to call [d3.transpose](https://github.com/d3/d3-array/blob/master/README.md#transpose). The only difference is in their syntax: where d3.zip receives _n_ arrays as independent arguments, d3.transpose receives an array of arrays (a matrix) as its sole argument." - There's no built in D3 function for [Importing data from excel files in D3 js](https://stackoverflow.com/questions/48495124/importing-data-from-excel-files-in-d3-js) so export XLSX to CSV first. - Autotype CSV: \`rawData = d3.csvParse(await FileAttachment("MM27MentalHealth.csv").text(), d3.autoType)\` - Convert array of arrays into array of objects: \`Array.from(zippedData, ([age, men, women]) => ({age, men, women}));\` - Use \`d3.merge\` to merge iterable of iterables into a single array: \`d3.merge(unfoldedData.map( ({age, men, women}) => [{age, gender: "M", value: men}, {age, gender: "W", value: women}]))\` - d3-array issue thread on [d3-array: Data wide/long reshape functions #142](https://github.com/d3/d3-array/issues/142) and how to use this pivot function - Pivot: \`import {pivot} from "ac2a320cf2b0adc4"\` ~~~js pivotedData = [...pivot( rawData, rawData.columns.slice(1), "Age", "count" )] ~~~ - JavaScript's [Array.prototype.flatMap()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap): ~~~js pyramid = { const columns = rawData.columns.slice(1).filter(d => !d.match("All")); return rawData .filter(d => ["Men", "Women"].includes(d.Gender)) .flatMap(d => columns.map(age => ({ age, sex: d.Gender.match("Women") ? "F" : "M", value: d[age] })) ); } ~~~ - [Population Pyramid Scotland 2019 by Sarah Schöttler](https://observablehq.com/@sarah37/population-pyramid-scotland-2019) - [Population Pyramid by Mike Bostock](https://observablehq.com/@d3/population-pyramid) - [California COVID-19 population pyramid by Ben Welsh](https://observablehq.com/@datadesk/california-covid-19-population-pyramid) `58:T7bd,md`**[17 July 2020: D3 Population Pyramid](https://observablehq.com/@didoesdigital/17-july-2020-d3-population-pyramid?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)** - Meanwhile, I've decided making charts responsive is awful. In the future, I think I'll just do separate charts. - Small screen source split over two lines: ~~~js const gSmallScreenSource = svg.append("g") .attr("transform", \`translate(\${params.margin.left}, \${params.svg.height})\`) .append("g"); gSmallScreenSource.append("text") .attr("id", "small-screen-source") .attr("font-family", "'Source Sans Pro', sans-serif") .attr("fill", "#202630") .attr("x", 0) .attr("y", 0) .attr("dy", "-2em") .attr("text-anchor", "start") .style("font-size", "clamp(.7rem, 2.2vw, 1.0rem)") // minimum, preferred, maximum .text('Source: NHS Digital, Mental Health & Wellbeing in'); gSmallScreenSource.append("text") .attr("id", "small-screen-source") .attr("font-family", "'Source Sans Pro', sans-serif") .attr("fill", "#202630") .attr("x", 0) .attr("y", 0) .attr("dy", "-1em") .attr("text-anchor", "start") .style("font-size", "clamp(.7rem, 2.2vw, 1.0rem)") // minimum, preferred, maximum .text('England, Adult Psychiatric Morbidity Survey 2014'); ~~~ - Use the ternary operator to alternate \`rect\`s in a butterfly or pyramid chart: ~~~js plot.append("g") .selectAll("rect") .data(data) .join("rect") .attr("fill", d => d.sex === "M" ? "#4EA376" : "#9885D5") .attr("x", d => d.sex === "M" ? xM(d.value) : xF(0)) .attr("y", d => y(d.age)) .attr("width", d => d.sex === "M" ? xM(0) - xM(d.value) : xF(d.value) - xF(0)) .attr("height", y.bandwidth()); ~~~ `59:T469,mdSankeyAlluvialParallelSetsAndCoordinates = md`## Day 85–90: Sankey, Alluvial, Parallel Sets, and Parallel Coordinates **[18 July 2020: About Sankey, Alluvial, Parallel Sets, and Parallel Coordinates](https://observablehq.com/@didoesdigital/18-july-2020-about-sankey-alluvial-parallel-sets-and-parall?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)** - **Sankey** diagrams use ribbons to show (potentially circular) flows with a source and a target. Flows may finish in different places. - **Alluvial** diagrams use ribbons and have stages at regular intervals. - **Parallel sets** use parallelograms to show distribution over categories. - **Parallel coordinates** use lines to show distribution over categories. - Blockquote styling: ~~~html html\`\` ~~~ `5a:Td10,md`**[19 July 2020: Data Wrangling for a Sankey Diagram](https://observablehq.com/@didoesdigital/19-july-2020-data-wrangling-for-a-sankey-diagram?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)** - [Sankey Diagram by Mike Bostock](https://observablehq.com/@d3/sankey-diagram) - [Sankey Vote Flows by Rosamund Pearce](https://observablehq.com/@rospearce/sankey-vote-flows) - [Stacked Sankey Chart by Jarrett Meyer](https://observablehq.com/@jarrettmeyer/stacked-sankey-chart) - [Data transformations by mikima](https://observablehq.com/@mikima/data-transformations) - [Applications collection on Observable](https://observablehq.com/collection/@mbostock/applications) - [Flow-o-matic](https://observablehq.com/@mbostock/flow-o-matic) - [Creating a Sankey Graph with D3.js by Jarrett Meyer](https://jarrettmeyer.com/2018/05/31/creating-a-d3-sankey-graph) - [d3-sankey](https://github.com/d3/d3-sankey) - [D3 Graph Gallery: Sankey](https://www.d3-graph-gallery.com/sankey) - [Sankey diagrams by Rick Lupton](https://ricklupton.github.io/d3-sankey-diagram/) - [SankeyMATIC](http://sankeymatic.com/build/) - [Text-based Sankey Chart by spencer kelly](https://observablehq.com/@spencermountain/text-based-sankey-chart) - [Draggable D3 Sankey Diagram by Xiang Gao](https://observablehq.com/@geekplux/dragable-d3-sankey-diagram) - It seems that data used for sankey diagram uses typical network data: arrays of objects for nodes and links or edges, with extra numeric data values for the strength/width/size of the flow, e.g.: ~~~js { "nodes": [ {"id": 0, "name": "A"}, {"id": 1, "name": "B"}, {"id": 2, "name": "C"}, {"id": 3, "name": "D"}, {"id": 4, "name": "E"} ], "links": [ {"source": 0, "target": 2, "value": 2}, {"source": 1, "target": 2, "value": 2}, {"source": 1, "target": 3, "value": 2}, {"source": 0, "target": 4, "value": 2}, {"source": 2, "target": 3, "value": 2}, {"source": 2, "target": 4, "value": 2}, {"source": 3, "target": 4, "value": 4} ] } ~~~ - An array of objects for **links** or edges with each object containing: - Source: typically a nominal label - Target: typically a nominal label - Value: a quantitative value, determining the width of the flow - An array of objects for **nodes** with each object containing corresponding: - ID: a unique identifier, either a numeric index or possibly a name if you're using [\`.nodeID\`](https://github.com/d3/d3-sankey/blob/master/README.md#sankey_nodeId) to define the node ID accessor function - Group or Category (optional): a nominal label - Name (optional): a nominal label for the node - To take a **CSV of link data**—source, target, and value—and make a \`data\` object with a \`nodes\` array and a \`links\` array, we use \`.from\`, \`Set\`, and \`flatMap\` to gather all the nodes: ~~~js data = { const links = d3.csvParse(await csv, d3.autoType); const nodes = Array.from( new Set(links.flatMap(l => [l.source, l.target])), name => ({name, category: name})); return {nodes, links}; } ~~~ - Dummy data: ~~~js csv = \`source,target,value A,C,2 B,C,2 B,D,2 A,E,2 C,D,2 C,E,2 D,E,4 \` ~~~ `5b:Tad4,md`**[20 July 2020: D3 Sankey Diagram](https://observablehq.com/@didoesdigital/20-july-2020-d3-sankey-diagram?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)** - d3-color to give nodes a darker stroke from their current color using the darker method: ~~~js .attr("stroke", d => d3.color(color(d)).darker(0.5)) ~~~ - Sankey using the sankey requirement \`d3 = require("d3@5", "d3-sankey@0.12")\`: ~~~js sankey = { const sankey = d3.sankey() .nodeId(d => d.name) .nodeAlign(d3[\`sankeyLeft\`]) .nodeWidth(12) .nodePadding(48) .extent([[1, 5], [params.svg.width - 1, params.plot.height - 5]]); return ({nodes, links}) => sankey({ nodes: nodes.map(d => Object.assign({}, d)), links: links.map(d => Object.assign({}, d)) }); } ~~~ - Nodes and links for drawing: ~~~js const {nodes, links} = sankey(data); ~~~ - Mix blend mode of multiply for links: ~~~js const link = svg.append("g") .attr("fill", "none") .attr("stroke-opacity", 0.5) .selectAll("g") .data(links) .join("g") .style("mix-blend-mode", "multiply"); ~~~ - Gradients in \`linearGradient\` elements to be used as a stroke for links: ~~~js const gradient = link.append("linearGradient") .attr("id", d => (d.uid = DOM.uid("link")).id) .attr("gradientUnits", "userSpaceOnUse") .attr("x1", d => d.source.x1) .attr("x2", d => d.target.x0); gradient.append("stop") .attr("offset", "0%") .attr("stop-color", d => color(d.source)); gradient.append("stop") .attr("offset", "100%") .attr("stop-color", d => color(d.target)); ~~~ - Link paths using \`sankeyLinkHorizontal\` for the path and the previously defined gradient for the stroke: ~~~js link.append("path") .attr("transform", \`translate(\${params.plot.x}, \${params.plot.y})\`) .attr("aria-hidden", true) .attr("d", d3.sankeyLinkHorizontal()) .attr("stroke", d => d.uid ) .attr("stroke-width", d => Math.max(1, d.width)); ~~~ - Color scale using range: ~~~js color = { const color = d3.scaleOrdinal().range(["#DD6876", "#6E8FEA", "#BD74CB", "#5396CF", "#9885D5", "#4EA376"]); return d => color(d.category === undefined ? d.name : d.category); } ~~~ - Positioning text inside links instead of blocks: ~~~js .join("text") .attr("x", d => d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6) .attr("y", d => (d.y1 + d.y0) / 2) .attr("dy", "0.35em") .attr("text-anchor", d => d.x0 < width / 2 ? "start" : "end") .text(d => d.name); ~~~ `5c:T727,md`**[21 July 2020: D3 Sankey Diagram with Hovers and Percentages](https://observablehq.com/@didoesdigital/21-july-2020-d3-sankey-diagram-with-hovers-and-percentages?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)** - Use the node depth to calculate percentages for nodes at each level: ~~~js function labelNode(d) { const totalValueOfNodesAtThisDepth = d3.sum(nodes.filter(node => node.depth === d.depth), i => i.value); const nodePercent = d3.format('.0%')(d.value / totalValueOfNodesAtThisDepth) return \`\${d.name}: \${nodePercent}\`; } ~~~ - Hover over a node to fade out all the other, unlinked paths, focusing attention on this node's links only, using an unforgiving interaction: ~~~js .join("rect") ⋮ .on('mouseover', showLinks) .on('mouseout', hideLinks); ⋮ function showLinks(d) { const linkedNodes = []; let traverse = [{ linkType : 'sourceLinks', nodeType : 'target', }, { linkType : 'targetLinks', nodeType : 'source', }]; traverse.forEach((step) => { d[step.linkType].forEach((l) => { linkedNodes.push(l[step.nodeType]); }); }); d3.selectAll('rect').style( 'opacity', r => linkedNodes.find(remainingNode => remainingNode.name === r.name) ? '1' : '0.1' ); d3.select(this).style('opacity', '1'); d3.selectAll('path').style( 'opacity', p => (p && (p.source.name === d.name || p.target.name === d.name)) ? '1' : '0.1' ); } function hideLinks() { d3.selectAll('rect').style('opacity', '1'); d3.selectAll('path').style('opacity', '1'); } ~~~ `5d:T930,md`**[22 July 2020: D3 Parallel Coordinates](https://observablehq.com/@didoesdigital/22-july-2020-d3-parallel-coordinates?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)** - Select form in Observable: ~~~js viewof keyz = { const form = html\`

\${Object.assign( html\`\`, {value: "Power level"}) } color encoding \`; form.select.onchange = () => (form.value = form.select.value, form.dispatchEvent(new CustomEvent("input"))); form.select.onchange(); return form; ~~~ } - Sort data without mutating: \`.data(data.slice().sort((a, b) => d3.ascending(a[keyz], b[keyz])))\` - Use \`d3.cross\` and \`d3.line()\` with an [Immediately Invoked Function Expression](https://en.wikipedia.org/wiki/Immediately-invoked_function_expression) to determine \`d\` values for each path: ~~~js .join("path") .attr("stroke", d => z(d[keyz])) .attr("stroke-opacity", 0.4) .attr("d", d => d3.line() .defined(([, value]) => value != null) .x(([key, value]) => x.get(key)(value)) .y(([key]) => y(key)) (d3.cross(keys, [d], (key, d) => [key, d[key]]))); ~~~ - Use \`each\` to add an axis for each feature: ~~~js .data(keys) .join("g") .attr("transform", d => \`translate(0,\${y(d)})\`) .each(function(d) { d3.select(this) .call(d3.axisBottom(x.get(d))) .call(g => g.selectAll("text") .attr("fill", "#202630") .style("font-size", 16) .attr("font-family", "'Source Sans Pro', sans-serif")) .call(g => g.selectAll("path.domain") .attr("stroke", "#202630")); }) ~~~ - Use a JavaScript Map to store each X scale: ~~~js x = new Map( Array.from( keys, key => [key, d3.scaleLinear(d3.extent(data, d => d[key]), [params.margin.left, params.svg.width - params.margin.right])] ) ) ~~~ - [Parallel Coordinates by Mike Bostock](https://observablehq.com/@d3/parallel-coordinates) `5e:T507,md`**[26 July 2020: D3 Slope Chart](https://observablehq.com/@didoesdigital/26-july-2020-d3-slope-chart?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)** - To show a different color for points on each side without walking the data more than once, use \`clone(true)\` to duplicate the circle and update its color and \`cx\`/\`cy\` for the left and right points: ~~~js svg.append("g") .selectAll("g") .data(data) .join("g") .append("circle") .attr("fill", "#9885D5") .attr("cx", d => x(0)) .attr("cy", d => y(d.visits[0])) .attr("r", 4) .clone(true) .attr("fill", "#4EA376") .attr("cx", d => x(1)) .attr("cy", d => y(d.visits[1])); ~~~ - To avoid overlapping labels, you can tweak the data to "dodge" each other using the dodge function in [Slope Chart by Mike Bostock](https://observablehq.com/@d3/slope-chart): ~~~js .selectAll("text") .data((d, i) => d3.zip( data.map(i === 0 ? d => \`\${d.name} \${formatNumber(d.visits[i])}\` : d => \`\${formatNumber(d.visits[i])} \${d.name}\`), dodge(data.map(d => y(d.visits[i]))))) ~~~ `5f:T4ad,md`**[27 July 2020: D3 Slope Chart with Color](https://observablehq.com/@didoesdigital/27-july-2020-d3-slope-chart-with-color?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)** - Show ranks instead of actual values for a tidy slope chart: ~~~js const before = dataObjectTarget.map(d => d.visits[0]); const after = dataObjectTarget.map(d => d.visits[1]); const sortedBefore = before.slice().sort((a, b) => b - a); const ranksBefore = before.map(v => sortedBefore.indexOf(v) + 1); const sortedAfter = after.slice().sort((a, b) => b - a); const ranksAfter = after.map(v => sortedAfter.indexOf(v) + 1); dataObjectTarget = dataObjectTarget.map((d, i) => { d.visitsRanked = [ranksBefore[i], ranksAfter[i]] return d; }); ~~~ - Change slope color for increases, decreases or flat lines: ~~~js function slopeColor (d) { let slopeColor = "#767676" if (d.visitsRanked[0] > d.visitsRanked[1]) { slopeColor = "#4EA376"; } if (d.visitsRanked[1] > d.visitsRanked[0]) { slopeColor = "#9885D5"; } return slopeColor; } ~~~ `60:T6a8,md`**[28 July 2020: D3 Slope Chart with Highlight Color and Gray Context Lines](https://observablehq.com/@didoesdigital/28-july-2020-d3-slope-chart-with-highlight-color-and-gray-con?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)** - Use a highlight color and gray context lines: ~~~js function highlightCondition (d) { return d.name === "Sunny"; } ⋮ function slopeColor (d, highlightCondition) { let slopeColor = "#DFDFDF" if (highlightCondition) { slopeColor = highlightColor; } return slopeColor; } svg.append("g") .attr("id", "lines") .attr("fill", "none") .attr("stroke", "#767676") .selectAll("path") .data(data) .join("path") .attr("stroke", d => slopeColor(d, highlightCondition(d))) .attr("stroke-width", 1.5) .attr("opacity", d => highlightCondition(d) ? 1 : 0.5) .attr("d", d => line(d.visits)); ~~~ - Raise the elements for the highlighted line so they appear above overlapping lines. Otherwise the green data point circle would be hidden behind a gray one: ~~~js gCircles.attr("class", d => highlightCondition(d) ? "dot__group dot__group--highlight" : "dot__group") ⋮ svg.selectAll(".dot__group--highlight") .raise(); ~~~ - I experimented with applying a blend mode of multiply to the lines, but that caused a darkened area where the lines bunch together in the bottom–left corner that was drawing too much attention away from the highlighted line. - It would be an interesting puzzle to decide on the touch targets for triggering tooltips in a slope chart. `61:T8ae,md`**[30 July 2020: D3 Slope Chart Small Multiples](https://observablehq.com/@didoesdigital/30-july-2020-d3-slope-chart-small-multiples?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)** - Using D3's [\`selection.each\`](https://github.com/d3/d3-selection/blob/master/README.md#selection_each), call the function to create a slope chart for each selected \`g\` element: ~~~js svg.append("g") .attr("class", "multiples-wrapper") .attr("transform", \`translate(\${params.plot.x}, \${params.plot.y})\`) .selectAll('g') .data(data) .join("g") .call(g => g .attr("class", "multiple") .attr('transform', translate) ) .each(slopeChart); ~~~ - Use a translate function to position each of the small multiples: ~~~js function translate(d, i) { return \`translate( \${(params.multiples.width + params.multiples.margin) * (2 * (i % params.multiples.columns) + 1)}, \${(params.multiples.height + params.multiples.margin) * ((2 * Math.floor(i / params.multiples.columns)) + 1)} )\`; } ~~~ - For the chart function, create scales, lines, and plots: ~~~js function slopeChart(multipleData, index) { const chartSpace = d3.select(this); const n = multipleData.visits.length; const x = d3.scalePoint() .domain(d3.range(n)) .range([params.multiples.margin, params.multiples.width - params.multiples.margin]); const y = d3.scaleLinear() .domain(sharedYExtent) .range([params.multiples.height - params.multiples.margin, params.multiples.margin]); const line = d3.line() .x((d, i) => x(i)) .y(y); const plots = chartSpace.append('g') .selectAll('g') .data([multipleData]) .join('g') ⋮ ~~~ - Use a "butt" linecap to avoid the ends of each slope finishing after the axes: \`.attr("stroke-linecap", "butt")\` - In this case I've hidden all data labels using \`opacity: 0\` and \`aria-hidden: true\`, except for the "after" value for the first chart. - Use one, shared domain: \`sharedYExtent = [0, d3.max(data.flatMap(d => d.visits))];\` `62:Ta74,md`**[1 August 2020: D3 Dumbbell Plot](https://observablehq.com/@didoesdigital/1-august-2020-d3-dumbbell-plot?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)** - Initially, I tried a band scale instead of a point scale, picturing the rows as bands, but that meant the Y label was offset from the line. ~~~js y = d3.scalePoint() .domain(data.map(d => d.name)) .rangeRound([params.margin.top, params.svg.height - params.margin.bottom - params.margin.top]) ~~~ - I added \`rangeRound\` instead of \`range\` to the Y scale so that the bottom row's data would have its own space, instead of overlapping the X Axis baseline. - For side-by-side dots in a legend, it's probably easier to do it by hand with D3 than using D3 Legend. There appear to be no [D3 Legend](https://d3-legend.susielu.com/) settings out of the box for laying out the legend as I've done in this chart so after adding the legend with the main settings, I then select the cell text and shift it along the X Axis to separate it from the cell circles: ~~~js legend.selectAll(".cell text") .attr("dx", 12); ~~~ - If I were to make any changes, it would be to show details on demand. I might use a \`rect\` for each row as a mouseover target to set a class on labels for the dots to reveal their values. - Only include data where a value exists both before and after: ~~~js data25Jul.forEach(after => { if (data5Jul.some(before => before.name === after.name)) { dataObjectTarget.push({ name: after.name, visits: [data5Jul.find(before => before.name === after.name).visits, after.visits] }) } }); ~~~ - Use before and after data for each lines' \`x1\` and \`x2\` values: ~~~js const lines = svg.append("g") .attr("class", "lines") .attr("transform", \`translate(0, \${params.margin.top})\`) .selectAll("line") .data(data) .join("line") .attr("stroke", "#DFDFDF") .attr("stroke-width", 2) .attr("x1", d => x(d.visits[0])) .attr("x2", d => x(d.visits[1])) .attr("y1", d => y(d.name)) .attr("y2", d => y(d.name)); ~~~ - Use \`.clone(true)\` and adjust the \`cx\` position for each "after" circle: ~~~js const dots = svg.append("g") .attr("class", "dots") .attr("transform", \`translate(0, \${params.margin.top})\`) .selectAll("circle") .data(data) .join("circle") .attr("fill", colorBefore) .attr("cx", d => x(d.visits[0])) .attr("cy", d => y(d.name)) .attr("r", 4) .clone(true) .attr("cx", d => x(d.visits[1])) .attr("fill", colorAfter); ~~~ `63:T473,md`Data wrangling: - [CSV parsing](https://observablehq.com/@didoesdigital/23-may-2020-area-charts-in-vega-lite-and-csv-parsing?collection=@didoesdigital/journal-getting-started-with-data-viz-collection) - [TSV parsing](https://observablehq.com/@didoesdigital/5-july-2020-data-wrangling-for-a-heatmap?collection=@didoesdigital/journal-getting-started-with-data-viz-collection) - [Summary statistics](https://observablehq.com/@didoesdigital/1-june-2020-wrangling-wikipedia-list-data-and-summary-stati?collection=@didoesdigital/journal-getting-started-with-data-viz-collection) - [Linear regression](https://observablehq.com/@didoesdigital/23-june-2020-linear-regression?collection=@didoesdigital/journal-getting-started-with-data-viz-collection) - [Hierarchy, rollup, group](https://observablehq.com/@didoesdigital/3-june-2020-d3-tree-diagram-and-d3-hierarchy?collection=@didoesdigital/journal-getting-started-with-data-viz-collection) - [Zip, transpose, merge, pivot](https://observablehq.com/@didoesdigital/16-july-2020-data-wrangling-for-population-pyramids?collection=@didoesdigital/journal-getting-started-with-data-viz-collection) `64:T67f, md`Design: - [Color](https://observablehq.com/@didoesdigital/11-june-2020-color-in-data-viz?collection=@didoesdigital/journal-getting-started-with-data-viz-collection) - [Typography](https://observablehq.com/@didoesdigital/10-june-2020-typography-for-data-viz?collection=@didoesdigital/journal-getting-started-with-data-viz-collection) - [Responsive design](https://observablehq.com/@didoesdigital/9-june-2020-designing-for-small-screens-responsive-data-viz?collection=@didoesdigital/journal-getting-started-with-data-viz-collection) - [Touch behaviour](https://observablehq.com/@didoesdigital/8-june-2020-designing-for-touch-devices-drag-click-hover-foc?collection=@didoesdigital/journal-getting-started-with-data-viz-collection) - [Accessibility](https://observablehq.com/@didoesdigital/13-june-2020-accessible-bar-chart-and-accessible-data-table?collection=@didoesdigital/journal-getting-started-with-data-viz-collection) - Effects, such as [splotch and pencil filters](https://observablehq.com/@didoesdigital/20-june-2020-sketchy-d3-bar-chart-style?collection=@didoesdigital/journal-getting-started-with-data-viz-collection), [hatched patterns](https://observablehq.com/@didoesdigital/24-june-2020-hatched-pattern-effect-bar-chart?collection=@didoesdigital/journal-getting-started-with-data-viz-collection), [checkerboard patterns](https://observablehq.com/@didoesdigital/25-june-2020-checkerboard-fill-effect-bar-chart?collection=@didoesdigital/journal-getting-started-with-data-viz-collection), [textures.js](https://observablehq.com/@didoesdigital/27-june-2020-using-textures?collection=@didoesdigital/journal-getting-started-with-data-viz-collection) `65:T16ec, md`Charts: - [Bar charts](https://observablehq.com/@didoesdigital/1-may-2020-formatting-numbers-and-sorting-a-bar-chart?collection=@didoesdigital/journal-getting-started-with-data-viz-collection) - [Scatterplots](https://observablehq.com/@didoesdigital/9-may-2020-d3-scatterplot-with-voronoi-tooltips?collection=@didoesdigital/journal-getting-started-with-data-viz-collection) and [scatterplot theory](https://observablehq.com/@didoesdigital/4-may-2020-vega-lite-scatterplot-and-heat-map-and-more-posts-o?collection=@didoesdigital/journal-getting-started-with-data-viz-collection) - [Line charts](https://observablehq.com/@didoesdigital/15-may-2020-d3-multi-line-chart-with-shading?collection=@didoesdigital/journal-getting-started-with-data-viz-collection) and [line chart theory](https://observablehq.com/@didoesdigital/10-may-2020-line-charts?collection=@didoesdigital/journal-getting-started-with-data-viz-collection) - [Donut charts](https://observablehq.com/@didoesdigital/21-may-2020-donut-chart-in-d3-with-tooltips?collection=@didoesdigital/journal-getting-started-with-data-viz-collection) and [donut and pie chart theory](https://observablehq.com/@didoesdigital/16-may-2020-donut-charts-and-pie-charts?collection=@didoesdigital/journal-getting-started-with-data-viz-collection) - [Area charts](https://observablehq.com/@didoesdigital/25-may-2020-cumulative-area-chart-in-d3-with-tooltips?collection=@didoesdigital/journal-getting-started-with-data-viz-collection) and [area chart theory](https://observablehq.com/@didoesdigital/22-may-2020-area-charts-stacked-area-charts-stream-graphs-an?collection=@didoesdigital/journal-getting-started-with-data-viz-collection) - [Histograms](https://observablehq.com/@didoesdigital/29-may-2020-d3-histogram-styling?collection=@didoesdigital/journal-getting-started-with-data-viz-collection) and [histogram theory](https://observablehq.com/@didoesdigital/26-may-2020-histograms-and-density-plots?collection=@didoesdigital/journal-getting-started-with-data-viz-collection) - [Data tables](https://observablehq.com/@didoesdigital/31-may-2020-wikipedia-data-tables?collection=@didoesdigital/journal-getting-started-with-data-viz-collection) and [data table theory](https://observablehq.com/@didoesdigital/30-may-2020-data-tables?collection=@didoesdigital/journal-getting-started-with-data-viz-collection) - [Tree diagrams](https://observablehq.com/@didoesdigital/3-june-2020-d3-tree-diagram-and-d3-hierarchy?collection=@didoesdigital/journal-getting-started-with-data-viz-collection), [dendrograms](https://observablehq.com/@didoesdigital/5-june-2020-d3-radial-clustered-dendrogram?collection=@didoesdigital/journal-getting-started-with-data-viz-collection) and [tree theory](https://observablehq.com/@didoesdigital/2-june-2020-treemaps-dendrograms-sunbursts-circle-packing?collection=@didoesdigital/journal-getting-started-with-data-viz-collection) - [Network graphs](https://observablehq.com/@didoesdigital/16-june-2020-d3-disjoint-force-directed-graph?collection=@didoesdigital/journal-getting-started-with-data-viz-collection) and [network theory](https://observablehq.com/@didoesdigital/15-june-2020-network-diagram?collection=@didoesdigital/journal-getting-started-with-data-viz-collection) - [Heatmaps](https://observablehq.com/@didoesdigital/9-july-2020-d3-heatmap-styled?collection=@didoesdigital/journal-getting-started-with-data-viz-collection) and [heatmap theory](https://observablehq.com/@didoesdigital/4-july-2020-about-heatmaps?collection=@didoesdigital/journal-getting-started-with-data-viz-collection) - [Bubble charts](https://observablehq.com/@didoesdigital/14-july-2020-d3-bubble-chart-with-voronoi-tooltips?collection=@didoesdigital/journal-getting-started-with-data-viz-collection) and [bubble chart theory](https://observablehq.com/@didoesdigital/10-july-2020-about-bubble-charts?collection=@didoesdigital/journal-getting-started-with-data-viz-collection) - [Population pyramids](https://observablehq.com/@didoesdigital/17-july-2020-d3-population-pyramid?collection=@didoesdigital/journal-getting-started-with-data-viz-collection) and [population pyramid theory](https://observablehq.com/@didoesdigital/15-july-2020-about-population-pyramids?collection=@didoesdigital/journal-getting-started-with-data-viz-collection) - [Sankey diagrams](https://observablehq.com/@didoesdigital/21-july-2020-d3-sankey-diagram-with-hovers-and-percentages?collection=@didoesdigital/journal-getting-started-with-data-viz-collection), [parallel coordinates](https://observablehq.com/@didoesdigital/23-july-2020-d3-parallel-coordinates-updates?collection=@didoesdigital/journal-getting-started-with-data-viz-collection) and [theory about sankey, alluvial, parallel sets, and parallel coordinates](https://observablehq.com/@didoesdigital/18-july-2020-about-sankey-alluvial-parallel-sets-and-parall?collection=@didoesdigital/journal-getting-started-with-data-viz-collection) - [Slope charts](https://observablehq.com/@didoesdigital/24-july-2020-about-slope-charts?collection=@didoesdigital/journal-getting-started-with-data-viz-collection), [slope chart small multiples](https://observablehq.com/@didoesdigital/29-july-2020-d3-slope-chart-small-multiples-work-in-progress?collection=@didoesdigital/journal-getting-started-with-data-viz-collection), and [slope chart theory](https://observablehq.com/@didoesdigital/28-july-2020-d3-slope-chart-with-highlight-color-and-gray-con?collection=@didoesdigital/journal-getting-started-with-data-viz-collection) - [Dumbbell plots](https://observablehq.com/@didoesdigital/1-august-2020-d3-dumbbell-plot?collection=@didoesdigital/journal-getting-started-with-data-viz-collection) and [dumbbell and dot plot theory](https://observablehq.com/@didoesdigital/31-july-2020-about-dumbbell-or-connected-dot-plots?collection=@didoesdigital/journal-getting-started-with-data-viz-collection) `66:T440,mdContinuousDomainTicksAreHints = md`## Continuous domain ticks are only hints In a private project I was working on, I noticed that for a particular axis with only 2 data points showing tick values that should have been whole numbers, I was seeing too many data points in decimal format, showing \`.0\` after each. It turns out that when using \`.ticks\` to specify the number of ticks on a continuous scale, such as \`scaleLinear\`: > The specified count is only a hint; the scale may return more or fewer values depending on the domain. > — [GitHub: D3-scale \`continuous.ticks([count])\`](https://github.com/d3/d3-scale/tree/v3.2.3#continuous_ticks) To work around this, I used something like: ~~~js .domain([0, Math.max(d3.max(data, d => d.xAxisData.length), 5)] ~~~ … which gave me a domain showing ticks from 0 to the longest \`xAxisData\` OR 5, whichever is larger, so that there's always at least 5 tick values. For an alternative approach, you might use \`d3.range\` and pass that to [\`axis.tickValues\`](https://github.com/d3/d3-axis/tree/v2.0.0#axis_tickValues). `67:T965,md`**[Building Timelines](https://observablehq.com/@didoesdigital/building-timelines?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)** If you're going to design a visualisation with any significant amount of text, consider using HTML instead of SVG in one of 2 ways: 1. Build the visualization primarily out of HTML for the majority of layout, text, and other regular HTML elements, then add SVG elements inside just for the graphic elements. 2. Build the graphic elements of the visualization using SVG and overlay HTML elements, such as [tooltips](https://observablehq.com/@didoesdigital/21-may-2020-donut-chart-in-d3-with-tooltips?collection=@didoesdigital/journal-getting-started-with-data-viz-collection). 3. Build the visualization in SVG and use the \`foreignObject\` element to pull in HTML for text. The **foreign object** in SVG lets you add non-SVG content like regular HTML inside an SVG. Use a **bisector** for calculating the nearest Y value in the data given a \`mouseY\` value. Bisect is more generic than that though. It calculates the “insertion point” for an object so you can add items in natural data order. For example, you might have an array of objects and to find items in the array, you create an “accessor” (a function to access the data values inside the objects). To insert an item though, you need to dive into each object in the array and decide if your item should go before or after it. This can be tedious to do manually, so you can use bisect instead to calculate the insertion point to add the new item. I first saw the **dodge** function in [Slope Chart by Mike Bostock](https://observablehq.com/@d3/slope-chart#dodge). It takes an array of positions (e.g. X values along an X Axis) in floating point numbers. It also optionally takes customisable separation, iteration, and error values, and returns a similar array of positions, but slightly dodged from where they were in an attempt to separate them out. It restrains the result a little bit so that the elements don't explode all over the place and so they don't go out of bounds. You can use the dodge function on labels on 1 axis that are likely to be overlapping. **Axis positioning:** It looks like the axis domain line is generally positioned half a unit over the X and Y value e.g. a plot margin of 30 will position the line at 30.5 on the X axis (or maybe 29.5?). `68:T40c,md`**[D3 Circle Packing](https://observablehq.com/@didoesdigital/d3-circle-packing)** - Group data by height of packed hierarchy descendants: \`.data(d3.group(root.descendants(), d => d.height))\` - Leaves don't have children: \`const leaf = node.filter(d => !d.children);\` - The [d3-hierarchy](https://github.com/d3/d3-hierarchy/blob/v2.0.0/README.md) module has useful methods you can call on a node in a [\`d3.hierarchy(data[, children])\`](https://github.com/d3/d3-hierarchy/blob/v2.0.0/README.md#hierarchy), such as [\`node.ancestors()\`](https://github.com/d3/d3-hierarchy/blob/v2.0.0/README.md#node_ancestors), for example: \`d.ancestors().map(d => d.data.name)\` - [d3.groups as a hierarchy by Fil](https://observablehq.com/@d3/d3-group-d3-hierarchy) - [Making d3 hierarchy layouts from any tabular data with d3.rollup and d3.hierarchy by Karol Stopyra](https://observablehq.com/@stopyransky/making-hierarchy-from-any-tabular-data) - [d3.stratify by Fil](https://observablehq.com/@d3/d3-stratify?collection=@d3/d3-hierarchy) `69:T725,md`[**D3 Circle Packing with Data Wrangling and Interactive Grouping**](https://observablehq.com/@didoesdigital/d3-circle-packing-with-data-wrangling-and-interactive-grou) - \`d3.hierarchy(d3.rollup(…))\` results in a hierarchy containing arrays of names and children where children are Maps instead of arrays. - Use d3-hierarchy module's [\`node.sum(value)\`](https://github.com/d3/d3-hierarchy/blob/v2.0.0/README.md#node_sum) to add up leaf values or [\`node.count(value)\`](https://github.com/d3/d3-hierarchy/blob/v2.0.0/README.md#node_count) to count the number of leaves. - You usually want a simple value accessor in sum like \`.sum(d => d.example)\` to add up all the values but when using \`.rollup\` in a hierarchy, use the destructured children array—\`[name, value]\`—like this \`.sum(([, value]) => value)\`. - First array approach: ~~~js dataWithArrayChildren = ({ name: nameForRootNode, children: // 1. Array.from(iterable, mapFunction, thisArg) Array.from( // 2. d3.rollup(iterable, reduceFunction, ...keysToGroupBy) d3.rollup(jsonData, data => data.length, ...keysToGroupBy), // 3. arr.map((currentValue) => (returnValue)) ([name, children]) => ({ name, children: Array.from(children, ([name,value]) => ({name,value})) }) ) }); ~~~ - Final Map approach: ~~~js hierarchyWithMapChildren = d3.hierarchy(d3.rollup(jsonData, d => d.length, ...keysToGroupBy)) .sum(([, value]) => value) .sort((a, b) => b.value - a.value) ~~~ - Pack: ~~~js packWithMapChildren = data => d3.pack() .size([width - 2, height - 2]) .padding(3) (hierarchyWithMapChildren) ~~~ - Handle array or Map approach: ~~~js (d.data[0] || d.data["name"] || "A Name for the Root Node") ~~~ `6a:[] 2f:{"title":"Data Viz Journal Index","cells":[{"id":0,"value":"md`# Data Viz Journal Index`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"md`This is an index for [Journal: Getting Started with Data Viz](https://observablehq.com/collection/@didoesdigital/journal-getting-started-with-data-viz-collection). This helps me find notebooks where I learned specific topics, techniques, or tactics.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"md`\nI reflected upon the first 30 days in this Medium story, [Learning data viz with D3](https://medium.com/@didoesdigital/learning-data-viz-with-d3-8b54afcef74?source=friends_link&sk=614e9d55bdefa22db2680ad3ed539811).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":646,"value":"toc('h2, h3, h4', 'Table of Contents')","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"mdLineChartTheory = md`\n## Day 16–17: Line chart theory and exploration\n\n**[10 May 2020: Line charts](https://observablehq.com/@didoesdigital/10-may-2020-line-charts?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)**\n\n- Line chart theory\n- Spline graphs, monotone functions, curving functions, and oversampled data.\n- Don't \"cut\" the Y Axis\n- Spaghetti plot\n- Dual axis\n\n**[11 May 2020: Vega-Lite Line Charts](https://observablehq.com/@didoesdigital/11-may-2020-vega-lite-line-charts?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)**\n\n- Vega-Lite line charts\n- \"You have to be like the worst tabloid newspaper in the front and the Academy of Science in the back\" —Hans Rosling\n- [Covid Tracker Tracker [sic]](https://covidtrackertracker.com/)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"mdCumulativeAreaCharts = md`\n## Day 31: Cumulative area charts\n\n**[25 May 2020: Cumulative Area Chart in D3 with Tooltips](https://observablehq.com/@didoesdigital/25-may-2020-cumulative-area-chart-in-d3-with-tooltips?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)**\n\n- While this seemed like a great opportunity to use the [d3-array module's \\`d3.cumsum()\\`](https://github.com/d3/d3-array/blob/master/README.md#cumsum) method as shown in [d3.cumsum by Fil](https://observablehq.com/@d3/d3-cumsum), it didn't seem appropriate for use with the row conversion function in [\\`dsv.parse(string[, row])\\`](https://github.com/d3/d3-dsv#dsv_parse).\n- [Stack Overflow answer to Creating an array of cumulative sum in javascript](https://stackoverflow.com/a/55261098)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":149,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"$40","pinned":false,"hidden":false,"mode":"ojs"},{"id":189,"value":"$41","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"$42","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"$43","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"$44","pinned":false,"hidden":false,"mode":"ojs"},{"id":237,"value":"$45","pinned":false,"hidden":false,"mode":"ojs"},{"id":244,"value":"md`\n**[22 June 2020: D3 Bar Chart Brush (Work In Progress)](https://observablehq.com/@didoesdigital/22-june-2020-d3-bar-chart-brush-work-in-progress?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)**\n\nAs it turns out, hardly anyone ever uses brushing on a bar chart, which uses a band scale, or on any chart with an ordinal scale. It certainly complicates the matter.\n\nI finished this chart in [26 June 2020: D3 Bar Chart Brush](https://observablehq.com/@didoesdigital/26-june-2020-d3-bar-chart-brush?collection=@didoesdigital/journal-getting-started-with-data-viz-collection) ✨\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":265,"value":"$46","pinned":false,"hidden":false,"mode":"ojs"},{"id":280,"value":"$47","pinned":false,"hidden":false,"mode":"ojs"},{"id":289,"value":"$48","pinned":false,"hidden":false,"mode":"ojs"},{"id":299,"value":"$49","pinned":false,"hidden":false,"mode":"ojs"},{"id":314,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs"},{"id":351,"value":"mdTypingScores = md`\n## Day 65–70: Charting typing scores using Datawrapper and Vega-Lite\n\n**[28 June 2020: Charting Typing Speed: Data and Exploration](https://observablehq.com/@didoesdigital/28-june-2020-charting-typing-speed-data-and-exploration?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)**\n\n- Datawrapper exploration`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":343,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs"},{"id":320,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs"},{"id":354,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs"},{"id":346,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs"},{"id":348,"value":"md`**[3 July 2020: Journal Updates and User Testing](https://observablehq.com/@didoesdigital/3-july-2020-journal-updates-and-user-testing?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)**\n\n- Hide the legend when using size encodings: \\`\"legend\": null\\`\n- Use D3 formatting for tooltip data:\n ~~~js\n \"tooltip\": [\n {\"field\": \"title\", \"type\": \"nominal\"},\n {\"field\": \"accuracy\", \"type\": \"quantitative\", \"format\": \".2%\"},\n ⋮\n ],\n ~~~\n- Hide all details of axis except title: \\`\"axis\": { \"domain\": false, \"labels\": false, \"ticks\": false, \"title\": \"Lessons over time\"}\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":379,"value":"mdHeatmaps = md`\n## Day 71–76: Heatmaps\n\n**[4 July 2020: About Heatmaps](https://observablehq.com/@didoesdigital/4-july-2020-about-heatmaps?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)**\n\n- Henceforth, heatmap is one word.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":371,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs"},{"id":382,"value":"md`**[6 July 2020: D3 Heatmap Without Sorting](https://observablehq.com/@didoesdigital/6-july-2020-d3-heatmap-without-sorting?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)**\n\n- Color scale using interpolator:\n ~~~js\n const color = d3.scaleSequential()\n .interpolator(d3.interpolatePurples)\n .domain([0, 3]);\n ~~~\n- Translate whole rows using:\n ~~~js\n rows.attr(\"transform\", d => \\`translate(0, \\${scale.y(d[\"name\"])})\\`);\n ~~~\n- … and position cells horizontally using the \\`rect\\`'s \\`x\\` value:\n ~~~js\n const rect = cells.append(\"rect\")\n .attr(\"x\", d => scale.x(d.goodie))\n .attr(\"y\", 0) // Handled by the group transform\n ~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":388,"value":"$50","pinned":false,"hidden":false,"mode":"ojs"},{"id":395,"value":"$51","pinned":false,"hidden":false,"mode":"ojs"},{"id":398,"value":"$52","pinned":false,"hidden":false,"mode":"ojs"},{"id":412,"value":"mdBubbleCharts = md`\n## Day 77–81: Bubble charts\n\n**[10 July 2020: About Bubble Charts](https://observablehq.com/@didoesdigital/10-july-2020-about-bubble-charts?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)**\n\n- Theory about bubble charts.\n- A **bubble chart** plots points on a chart, showing two variables on the X and Y axis, and a third numeric variable using bubble size. It's a scatterplot with an extra variable shown through size.\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":419,"value":"$53","pinned":false,"hidden":false,"mode":"ojs"},{"id":430,"value":"md`**[12 July 2020: D3 Bubble Chart with Labels on Hover](https://observablehq.com/@didoesdigital/12-july-2020-d3-bubble-chart-with-labels-on-hover?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)**\n\n- Use \\`pointer-events: none\\` on labels so that hovering over the labels themselves doesn't block the mouseover event for the \\`circle\\` element underneath and therefore remove the labels.`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":440,"value":"$54","pinned":false,"hidden":false,"mode":"ojs"},{"id":442,"value":"$55","pinned":false,"hidden":false,"mode":"ojs"},{"id":452,"value":"$56","pinned":false,"hidden":false,"mode":"ojs"},{"id":457,"value":"$57","pinned":false,"hidden":false,"mode":"ojs"},{"id":472,"value":"$58","pinned":false,"hidden":false,"mode":"ojs"},{"id":479,"value":"$59","pinned":false,"hidden":false,"mode":"ojs"},{"id":488,"value":"$5a","pinned":false,"hidden":false,"mode":"ojs"},{"id":500,"value":"$5b","pinned":false,"hidden":false,"mode":"ojs"},{"id":516,"value":"$5c","pinned":false,"hidden":false,"mode":"ojs"},{"id":520,"value":"$5d","pinned":false,"hidden":false,"mode":"ojs"},{"id":551,"value":"md`**[23 July 2020: D3 Parallel Coordinates (Updates)](https://observablehq.com/@didoesdigital/23-july-2020-d3-parallel-coordinates-updates?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)**\n\n- The \"Number of goodies\" axis now shows only 3 ticks which is more representative of the whole number data. \\`.ticks(d === \"Number of goodies\" ? 2 : undefined)\\`—providing undefined for the other data falls back to the default tick for the scale.\n- Added \\`.attr(\"stroke-linecap\", \"round\")\\` styling to the line paths.\n- Changed the color scheme: \\`z = d3.scaleSequential(x.get(keyz).domain().reverse(), d3.interpolateRdYlBu)\\`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":557,"value":"mdSlopeCharts = md`## Day 91–97: Slope charts\n\n**[24 July 2020: About Slope Charts](https://observablehq.com/@didoesdigital/24-july-2020-about-slope-charts?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)**\n\n- Slope chart theory\n- A **slope chart** is like a [line chart](https://observablehq.com/@didoesdigital/10-may-2020-line-charts?collection=@didoesdigital/journal-getting-started-with-data-viz-collection) or [parallel coordinates](https://observablehq.com/@didoesdigital/22-july-2020-d3-parallel-coordinates?collection=@didoesdigital/journal-getting-started-with-data-viz-collection) showing quantitative data over two points in time. It's useful for **comparisons** and **trend over time** through a before and after visualization. Sometimes color or stroke weight are used to highlight direction of slope lines or categories.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":561,"value":"md`**[25 July 2020: Data Wrangling for a Slope Chart](https://observablehq.com/@didoesdigital/25-july-2020-data-wrangling-for-a-slope-chart?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)**\n\n- If there are mismatched data points at the two times compared, don't use default values like 0 for missing values as that would cause a messy chart.\n- Inspect data before charting: if values don't change over time, if would be a boring slope chart.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":565,"value":"$5e","pinned":false,"hidden":false,"mode":"ojs"},{"id":572,"value":"$5f","pinned":false,"hidden":false,"mode":"ojs"},{"id":578,"value":"$60","pinned":false,"hidden":false,"mode":"ojs"},{"id":584,"value":"md`**[29 July 2020: D3 Slope Chart Small Multiples (Work in Progress)](https://observablehq.com/@didoesdigital/29-july-2020-d3-slope-chart-small-multiples-work-in-progress?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)**\n\n- [Radar Chart Small Multiples by Stephanie Tuerk](https://observablehq.com/@stephanietuerk/radar-chart-small-multiples)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":587,"value":"$61","pinned":false,"hidden":false,"mode":"ojs"},{"id":601,"value":"mdDumbbellConnectedDotPlots = md`## Day 98–99: Dumbbell or Connected Dot Plots\n\n**[31 July 2020: About Dumbbell or Connected Dot Plots](https://observablehq.com/@didoesdigital/31-july-2020-about-dumbbell-or-connected-dot-plots?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)**\n\n- Theory about Dumbbell or Connected Dot Plots\n- **Dumbbell plot** show two or more connected series of data using dots connected by straight lines. They're typically used to two **quantitative** values for each **categorical** data. They're useful for **comparison** and **correlation**. They're ideal for showing ranges between min and max values.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":608,"value":"$62","pinned":false,"hidden":false,"mode":"ojs"},{"id":627,"value":"mdDay100WrapUpAndTextWrapping = md`## Day 100: Wrap up and text wrapping\n\n**[2 August 2020: 100 Days of Data Viz](https://observablehq.com/@didoesdigital/2-august-2020-100-days-of-data-viz?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)**\n\nData exploration:\n\n- [Using Datawrapper for exploration](https://observablehq.com/@didoesdigital/27-may-2020-exploratory-histogram?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)\n- [Using Vega-Lite for exploration](https://observablehq.com/@didoesdigital/30-june-2020-charting-typing-speed-data-and-exploration-wit?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)\n`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":629,"value":"$63","pinned":false,"hidden":false,"mode":"ojs"},{"id":631,"value":"$64","pinned":false,"hidden":false,"mode":"ojs"},{"id":633,"value":"\nmd`Interaction:\n\n- [CSS tooltips](https://observablehq.com/@didoesdigital/21-may-2020-donut-chart-in-d3-with-tooltips?collection=@didoesdigital/journal-getting-started-with-data-viz-collection), [Voronoi tooltips](https://observablehq.com/@didoesdigital/9-may-2020-d3-scatterplot-with-voronoi-tooltips?collection=@didoesdigital/journal-getting-started-with-data-viz-collection), [SVG tooltips](https://observablehq.com/@didoesdigital/25-may-2020-cumulative-area-chart-in-d3-with-tooltips?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)\n- [Transitions](https://observablehq.com/@didoesdigital/19-june-2020-d3-bar-chart-transitions-improved?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)\n- [Brushes](https://observablehq.com/@didoesdigital/26-june-2020-d3-bar-chart-brush?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":620,"value":"$65","pinned":false,"hidden":false,"mode":"ojs"},{"id":636,"value":"\nmd`Text wrapping with SVG:\n\n- [Fit Text to Circle / Mike Bostock / Observable](https://observablehq.com/@mbostock/fit-text-to-circle)\n- [Wrapping Long Labels by Mike Bostock](https://bl.ocks.org/mbostock/7555321)\n- [Text Wrap Axis / Alan Mar / Observable](https://observablehq.com/@dagonar/text-wrap-axis)\n- [SVG Word Wrap / Evan Galloway / Observable](https://observablehq.com/@gallowayevan/svg-word-wrap)\n- [Circle Packing - Text Wrap Example 2 / eric-lee / Observable](https://observablehq.com/@eric-lee/circle-packing-text-wrap-example-2)\n- [Labels with line wrap (HTML in SVG) by Domonkos Horvath](http://bl.ocks.org/domhorvath/0df3bf8b2b34d85c8e203b582581c76c)\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":638,"value":"\nmd`Label placement and separation:\n\n- [Slope Chart by Mike Bostock: dodge](https://observablehq.com/@d3/slope-chart#dodge)\n- [Force-based label placement by Moritz Stefaner](http://bl.ocks.org/MoritzStefaner/1377729)\n- [twitter/labella.js: Placing labels on a timeline without overlap](https://github.com/twitter/labella.js)\n- [Makeover Monday - marimekko with labella.js by Tom Shanley](http://bl.ocks.org/tomshanley/79e2a481a2c3747163a8633f877c8abb)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":668,"value":"$66","pinned":false,"hidden":false,"mode":"ojs"},{"id":639,"value":"mdTimelines = md`## Timelines\n\n**[About Timelines](https://observablehq.com/@didoesdigital/about-timelines?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)**\n\n- Theory about timelines\n- A **timeline** shows a list of events in chronological order. The events may be placed on a scale or in a sequence without a scale. Timelines are useful for telling a story of events over time. It's like a time-series line chart with no Y dimension.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":651,"value":"$67","pinned":false,"hidden":false,"mode":"ojs"},{"id":664,"value":"mdSparklines = md`## Sparklines\n\n**[About Sparklines](https://observablehq.com/@didoesdigital/about-sparklines)**\n\n- Theory about sparklines\n- A **sparkline** is a word-sized chart showing trend over time. It can be presented anywhere a word or number can, such as in a sentence, table, heading, graphic, or spreadsheet.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":721,"value":"mdCirclePacking = md`## Circle Packing\n\n**[About Circle Packing](https://observablehq.com/@didoesdigital/about-circle-packing)**\n\n- Theory about circle packing AKA a packed circle chart, circular packing, a circular treemap, a packed circle diagram, or sometimes even packed paths.\n- **Circle packing** uses hierarchically structured (tree-structured) data. Each node is represented by a circle. All children of a node are packed into that circle. All siblings of a node are positioned next to each other at that level. The size of leaf-nodes can indicate any property of that data.\n- Circle packing is similar to a [treemap](https://observablehq.com/@didoesdigital/2-june-2020-treemaps-dendrograms-sunbursts-circle-packing?collection=@didoesdigital/journal-getting-started-with-data-viz-collection), but uses circles instead of rectangles. While it takes up more visual space, it can be better for showing hierarchy than treemaps.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":725,"value":"$68","pinned":false,"hidden":false,"mode":"ojs"},{"id":735,"value":"mdSortByArbitraryArray = md`[**Sort by arbitrary array**](https://observablehq.com/@didoesdigital/sort-by-arbitrary-array?collection=@didoesdigital/journal-getting-started-with-data-viz-collection)\n\n- Sort a data array of arrays, \\`versionData\\`, according to an arbitrary array, \\`all_versions_in_use\\`:\n ~~~js\n versionData.slice(0).sort((a, b) => all_versions_in_use.indexOf(a[1]) - all_versions_in_use.indexOf(b[1]))\n ~~~\n- [version-sort module](https://github.com/quentinrossetti/version-sort)\n - \\`versionSort = require(\"https://bundle.run/version-sort\")\\`\n - \\`sortedData = versionSort(versionData.slice(), { nested: '1' })\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":742,"value":"$69","pinned":false,"hidden":false,"mode":"ojs"},{"id":756,"value":"mdChoroplethMaps = md`## Choropleth Maps\n\n**[About Choropleth Maps](https://observablehq.com/@didoesdigital/about-choropleth-maps)**\n\n- Theory about choropleth maps AKA choropleth heatmaps.\n- **Choropleth maps** are maps using color or patterns to show aggregate values of relative data in each region. They're great for showing general distribution and regional patterns of 1 variable. They can also be helpful for broad comparisons between geographical areas.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":759,"value":"mdGeoData = md`## Geo data and a D3 map\n\n**[About Map Data: GeoJSON and TopoJSON with D3](https://observablehq.com/@didoesdigital/about-map-data-geojson-and-topojson-with-d3#markers)**\n\n- Resources and tools for wrangling geo data\n- A simple D3 map with labels\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":643,"value":"import {toc} from \"@tomshanley/indented-toc\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W6a","stdlib":"1","titling":"auto"}