31:T432,md` In general, humans are better at comparing lengths than angles—this has been a key finding of research into visual perception of data graphics (summarized, for example, [here](https://medium.com/@kennelliott/39-studies-about-human-perception-in-30-minutes-4728f9e31a73) or [here](https://paldhous.github.io/ucb/2016/dataviz/week2.html)) and is sometimes cited as a reason not to use pie charts at all. However, this is an over-simplification, and there are many good uses of pie charts: for example, to convey easily and quickly that a single number represents a given proportion of the whole. Pie charts are discussed extensively in every text about data visualization, so in this notebook I instead want to focus on the use of radial visualizations for other types of data: - Hierarchies - Time series data - Categorical data For now, this notebook does not specifically cover circular representations of matrix data (such as a [chord diagram](https://observablehq.com/@d3/chord-diagram) or a [radial heatmap](https://policyviz.com/2019/12/04/the-radial-map/)). `32:T443,md`## Categorical data Bars are the most common way to represent the values of categorical data, and in a radial form they can sometimes look similar to pie charts. They differ as follows: - in a pie chart, the **angle** of each segment is used to encode the value; each segment has the same radius, producing an overall shape that is a circle - in a radial bar chart, the **radius** of each segment is used to encode the value; each segment spans the same angle Below, we use the same dataset from the pie chart example, to transition a bar chart between its radial and non-radial forms. The radial form has an interesting spiral-like shape, and immediately makes a clear contrast between the youngest (blue) and oldest (red) segments of the population, by placing them next to each other. Otherwise, though, it is easier to make comparisons in the non-radial form, because the shared baseline for the bars facilitates comparison of length, even when the bars are not adjacent. The radial form may also suggest a false continuity between the youngest (blue) and oldest (red) segments. `33:T4da,md` There are some specialized use cases where a radial chart makes particular sense for categorical data, like a [wind rose](https://en.wikipedia.org/wiki/Wind_rose) where the positions around the circle correspond to compass directions. The compact nature of radial charts means that they can be a good choice if you have a large number of categories—assuming that you have made an explicit design decision that all of those categories are necessary to include. However, this is only likely to work well if your main point is very obvious (for example, one category’s value is much larger than the others) and does not require accurate comparison of the sizes of non-adjacent bars. Also, if mobile usage is important, a horizontal bar chart is probably a better choice, in a tall format that can be vertically scrolled. When connected lines are used instead of bars, this is known as a [radar chart](https://observablehq.com/@palewire/radar-chart), and the resulting shapes can also be the basis for [small multiples](https://observablehq.com/@stephanietuerk/radar-chart-small-multiples). The patterns that are most apparent can depend entirely on the order of the categories, so you have to be careful that this is not misleading. ` 34:T5b0,md` Finally, a radial form is unlikely to be a good choice if you want to use **stacked bars**, even though this is one of their most well-known uses (because of [Florence Nightingale](https://en.wikipedia.org/wiki/Florence_Nightingale#/media/File:Nightingale-mortality.jpg)). They are prone to the same distortion issues we saw with the sunburst—the segments on the outside will be larger, and therefore appear more prominent, than those on the inside—but in a way that is more difficult to mitigate. D3 provides a [\`scaleRadial\`](https://github.com/d3/d3-scale#radial-scales) that adjusts the proportions so that the segment areas (rather than lengths) correspond to their values. This scale is the best choice for radial charts in general, and in a stacked chart it helps create the right overall impression: in the example below, adapted from [this notebook](/@d3/radial-stacked-bar-chart-ii), the orange segments represent about two-thirds of the total value of the data. Using \`d3.scaleLinear\` (on the left), there is too much orange overall, but with \`d3.scaleRadial\` (on the right), it looks roughly correct. However, when considering the proportions within a single bar, it may be harder to judge value by area rather than length. For example, look at the largest bar in each of the two versions below. The orange segment represents about 64% of the total for that bar, but in the version on the right, I would have guessed about 50%. `35:T451,md`## A note about engagement and attention Radial visualizations are very engaging—there’s something about a circular visualization that naturally provokes interest. This can be both an advantage and a disadvantage. On the one hand, assuming that your visualization is accurate and well-annotated, it can sometimes be very important to also put effort into making it engaging, especially if you are designing for a setting (such as inside a large company) where your audience have many other things competing for their attention. This aspect is often underestimated, and can sometimes make a key difference in someone’s decision to read your research findings or ignore them. However, the flip side of this is that people will sometimes choose to use a radial visualization **only** because they like the way it looks, without regard to whether it’s appropriate for their data. This can lead to a perception that a radial visualization is a shallow bid for attention, and likely to be misused or misleading. Engagement should not ever be the **only** reason to choose a radial visualization. `36:[{"id":"748f2d1acca29e6f6a9fca040e9a7ad33b8056d3083e72d24d6cf8a9fd3a34059a3d658b21afa5fd16e9d12fb731f5511dd9125219e1a90a299f085f4c5299e1","href":"https://static.observableusercontent.com/files/748f2d1acca29e6f6a9fca040e9a7ad33b8056d3083e72d24d6cf8a9fd3a34059a3d658b21afa5fd16e9d12fb731f5511dd9125219e1a90a299f085f4c5299e1","name":"radial-stacked-bar-chart-radial-scale.svg","type":"image/svg+xml","lastModified":1606934127927.584,"size":24385},{"id":"8fbb55e10f5b8b056686805d1386bc76003cf3e84bced6c6fbcdb874edc798a822245f7d0b89260658f4a894e43cc4539f4626d0176829d1d6e1cf93e9e77823","href":"https://static.observableusercontent.com/files/8fbb55e10f5b8b056686805d1386bc76003cf3e84bced6c6fbcdb874edc798a822245f7d0b89260658f4a894e43cc4539f4626d0176829d1d6e1cf93e9e77823","name":"radial-stacked-bar-chart-linear-scale.svg","type":"image/svg+xml","lastModified":1606934127927.584,"size":24444},{"id":"4720d86d6c39d81bd357d6ed9478d2c3841b567fd6be27b6ca21821be2097ec178a8b1bb8e9cdd1963a09327c8b7f151f8f47b2fe4cd392abf6fbf7ed925cf7f","href":"https://static.observableusercontent.com/files/4720d86d6c39d81bd357d6ed9478d2c3841b567fd6be27b6ca21821be2097ec178a8b1bb8e9cdd1963a09327c8b7f151f8f47b2fe4cd392abf6fbf7ed925cf7f","name":"sunburst-highlighted-section.svg","type":"image/svg+xml","lastModified":1606934127927.584,"size":66296},{"id":"56e541c37e1cb99677eb8a5e941e302bf0ee2ede63954df8dda4eca645129765e9ae78fc615981a45c2db080bd98fa79193ceccfb8401edf205fbc0726c64e20","href":"https://static.observableusercontent.com/files/56e541c37e1cb99677eb8a5e941e302bf0ee2ede63954df8dda4eca645129765e9ae78fc615981a45c2db080bd98fa79193ceccfb8401edf205fbc0726c64e20","name":"bar-chart-ages.svg","type":"image/svg+xml","lastModified":1606934127927.584,"size":3894},{"id":"b749ae2e26ce6b1b415ef5ddb8b4c6445dd07c0e070227934b1aad1d6d8d0e18750e04d727fdd88ee1545ef24dc4f9bc3fe85874b36a91d01edf88fc6b5b061d","href":"https://static.observableusercontent.com/files/b749ae2e26ce6b1b415ef5ddb8b4c6445dd07c0e070227934b1aad1d6d8d0e18750e04d727fdd88ee1545ef24dc4f9bc3fe85874b36a91d01edf88fc6b5b061d","name":"pie-chart-ages.svg","type":"image/svg+xml","lastModified":1606934127927.584,"size":6334}] 2f:{"title":"Why use a radial data visualization?","cells":[{"id":0,"value":"md`# Why use a radial data visualization?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"md`Recently I published a visualization where you could [explore possible Electoral College outcomes](https://observablehq.com/@observablehq/electoral-college-decision-tree), using a decision tree with a circular (or *radial*) layout. \n\nI got some great feedback about it on Twitter, including these comments from Andy Cotgreave:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"tweet(\"1323309688901963776\", { conversation: \"none\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"md`... which I thought was a perfect example of the negative initial reaction that radial visualizations sometimes provoke, even if the same person eventually has a positive impression. \n\nWhy is that? There is something about circles that we find [inherently beautiful](https://www.sciencefocus.com/science/why-do-we-find-circles-so-beautiful/), which makes radial visualizations very visually appealing. But, people who are relatively new to data visualization may choose them even when another chart type would be more appropriate for the use case. This leads to complaints among data visualization experts that radial visualizations are overused. More seriously, it’s possible to use them in a way that is confusing or even misleading.\n\nSo, this notebook is intended to explain some of the pros and cons of radial visualizations, to help you decide whether you might want to use one.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":758,"value":"toc({\n headers: \"h2,h3,h4\",\n hideStartingFrom: \"Acknowledgements\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"md`## What is a radial visualization?\n\nBroadly, a radial visualization is any data representation that is laid out in a circular form. This typically means using [polar coordinates](https://en.wikipedia.org/wiki/Polar_coordinate_system) for layout, instead of [Cartesian coordinates](https://en.wikipedia.org/wiki/Cartesian_coordinate_system): the center of the circle is the origin, and the angle and radius are used in place of x- and y-coordinates.\n\nThe simplest and most well-known type of radial visualization is a [pie chart](/@d3/pie-chart) (and its cousin, the [donut chart](/@d3/donut-chart)), with segments that represent percentages of a total. The circular representation lends itself very well to an intuitive sense that the data corresponds to “parts of a whole”, but pie charts are usually suboptimal when segments are close in size.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":386,"value":"md`To illustrate this, we can compare a pie chart and a bar chart, using the same dataset (the U.S. population from 2015, divided into 5-year age buckets—from [this notebook](/@d3/pie-chart)). Below, the pie chart helps make clear that the segments combine to make a whole, and conveys an impression that each age group is roughly the same size, decreasing for the older groups.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":392,"value":"html`

${await FileAttachment(\n \"pie-chart-ages.svg\"\n).text()}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":391,"value":"md`The bar chart, on the other hand, makes it much easier to see that the two largest groups are 20-24 and 50-54.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":403,"value":"html`

${await FileAttachment(\n \"bar-chart-ages.svg\"\n).text()}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":209,"value":"md`## Hierarchies\nI have a particular interest in this use case, because the Electoral College decision tree was the second project where I’ve chosen a radial layout to represent hierarchical data. My first D3 visualization was the [sequences sunburst](https://observablehq.com/@kerryrodden/sequences-sunburst) from 2011, which I’ve [written](https://www.computer.org/csdl/magazine/cg/2014/05/mcg2014050036/13rRUIJcWfY) and [spoken](https://www.youtube.com/watch?v=vyZzbsL_fsg&list=PLOHIJAFwtkEd3ClY-LlqZK_8IogDSVcPM&index=5) about elsewhere.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"md`\nFor both of these examples, one of my primary reasons for choosing a radial visualization was that it allowed me to fit a large hierarchy onto a laptop screen, in a way that created more space for the leaf nodes (those on the outside of the hierarchy) to be spread out. I’ll demonstrate what I mean by this in the next two sections.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"md`### Trees\n\nFor demonstration purposes, I’m using a synthetic hierarchical dataset, which has 3 levels with 5 branches each (5³ = 125 leaf nodes, which is about the same number as the [Electoral College decision tree](/@observablehq/electoral-college-decision-tree)). \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":470,"value":"md`First we’ll look at it in a radial layout, which is compact enough that all of the leaf nodes (with the label “3”) are visible on a laptop screen. If a design goal for your visualization is to invite exploration, this layout helps to pique the curiosity of the viewer by presenting them with all of the data at once. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":309,"value":"html`\n

\n${radialDendrogram}\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":415,"value":"md`\nAs a comparison, here is the same hierarchy in a left-to-right layout. This leads to a tall visualization that does not fit on a laptop screen, and has to be scrolled. However, this may be the right design choice if it’s important that the visualization is legible on mobile devices, where inviting interaction may be less of a design goal.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":307,"value":"html`\n

\n${clusterDendrogram}\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":736,"value":"md`Another non-radial possibility that is more space-efficient is a collapsible tree, which presents the user with only a limited set of options to choose from, rather than showing all of the nodes at once. In the example below, you can click on the nodes to expand or collapse them.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":323,"value":"collapsibleTree","pinned":false,"hidden":false,"mode":"ojs"},{"id":428,"value":"md`With the Electoral College decision tree, a collapsible layout could have worked well in combination with the ability to choose the ordering of the states, with some key paths open by default. However, I chose to prioritize the design choice of showing all of the paths at once, to invite exploration without requiring the user to click.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":504,"value":"md`### Space-filling representations\n\nIf a hierarchy has a value associated with each node, we can use the size of the node to represent its value. In a radial form, this is known as a [sunburst](/@d3/sunburst); its non-radial counterpart is the [icicle](/@d3/icicle) (also known as a [flamegraph](http://www.brendangregg.com/flamegraphs.html) if inverted).\n\nBelow, you can compare these two forms by transitioning from one to the other, using the realistic dataset from my [sequences sunburst](/@kerryrodden/sequences-sunburst) notebook (which also has a [sequences icicle](/@kerryrodden/sequences-icicle) counterpart).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"viewof sunburstToIcicleSlider","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"sunburstToIcicle","pinned":false,"hidden":false,"mode":"ojs"},{"id":516,"value":"md`As with the tree visualizations above, you can see that the radial presentation is more compact, while still giving enough space to the leaf nodes to allow for interaction. The icicle version has to either be stretched very long, or squeezed in a way that would make some of the leaf nodes too small to see.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":530,"value":"md`\nUnlike radial trees, sunburst visualizations have some extra considerations with regard to visual perception, because they use angles to encode information. Most seriously, the segments get bigger towards the outside, even if the data that they are representing stays the same. For example, look at the yellow section below, which represents the same total value in all three rings.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":523,"value":"html`\n

\n${await FileAttachment(\"sunburst-highlighted-section.svg\").text()}\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"md`\nThis is good for interaction, making the outer segments big enough to see and hover over. But, it can result in a misleading presentation, which (depending on the application) may be mitigated with careful use of labeling. For example, in the [sequences sunburst](@kerryrodden/sequences-sunburst), the actual sizes of the segments are always shown very prominently.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":751,"value":"md`Finally, sunbursts share some of the pros and cons of pie charts, discussed above: on the positive side, the circular shape intuitively suggests that the segments represent parts of a whole, but on the negative side, people are worse at comparing angles than they are at comparing lengths.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"md`## Time series data\n\nRadial charts have a particular use case for time series data, and that is when a design goal is to convey cyclical or seasonal trends:\n- Weather and climate data, for example [WeatherWheel](https://observablehq.com/@analyzer2004/west-coast-weather-from-seattle-to-san-diego), [Weather Radials](http://www.weather-radials.com/), [Climate Spirals](http://www.climate-lab-book.ac.uk/spirals/)\n- Human activity that relates to time, for example [Why Are So Many Babies Born Around 8:00 A.M.?](https://blogs.scientificamerican.com/sa-visual/why-are-so-many-babies-born-around-8-00-a-m/) (I recommend the accompanying blog posts by [Zan Armstrong](https://medium.com/@zanarmstrong/story-behind-the-viz-the-baby-spike-21d0cd7bc54f) and [Nadieh Bremer](https://www.visualcinnamon.com/2017/10/creating-baby-births-visual), explaining their design choices and process)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":592,"value":"md`The simple example below shows the monthly average high temperature for two cities: New York (blue) and San Francisco (orange). In the radial version, the points for January and December coincide at the bottom of the circle, and warmer temperatures are towards the outside.\n\nThe main takeaway from both versions is that New York’s temperatures are more extreme than San Francisco’s. The radial version takes longer to interpret (the orange circle is more centered, while the blue one is more shifted towards the top and left) but has the advantage of continuity between the winter months—across the arbitrary year boundary.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":585,"value":"viewof lineChartSlider","pinned":false,"hidden":false,"mode":"ojs"},{"id":587,"value":"lineChart","pinned":false,"hidden":false,"mode":"ojs"},{"id":841,"value":"md`\nIf we had many locations to represent, the compact form of the radial presentation would make it easy to give each location its own chart, which may have a characteristic shape: a *small multiples* approach. For example, [A Night Under The Stars](https://jordan-vincent.com/night-under-the-stars) represents seasonal visitor data to U.S. National Parks, using a separate radial time series chart for each park. If highly accurate comparison between the locations is important, a [ridgeline plot](https://observablehq.com/@d3/ridgeline-plot) may be a better choice, because it aligns the series very close to each other.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":606,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":561,"value":"viewof barChartSlider","pinned":false,"hidden":false,"mode":"ojs"},{"id":564,"value":"radialBarChart","pinned":false,"hidden":false,"mode":"ojs"},{"id":871,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":679,"value":"html`\n

${await FileAttachment(\n \"radial-stacked-bar-chart-linear-scale.svg\"\n).text()}

d3.scaleLinear

${await FileAttachment(\n \"radial-stacked-bar-chart-radial-scale.svg\"\n).text()}

d3.scaleRadial

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":174,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"md`## Summary\nHere’s a quick summary of the pros and cons of radial visualizations that we’ve covered in this notebook: \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"html`\n

\n\n\n\n\n\n\n

Pros
💻 Compact representation on a computer screen
💯 Can suggest “part of a whole”
⏰ Can convey continuity in cyclical data
😍 Most people find them engaging

\n\n\n\n\n\n\n

Cons
📱 May be too compact for mobile
🍰 Harder to compare size of pieces
🤥 Some types can be misleading due to distortion
🙄 Some people find them gratuitous

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":625,"value":"md`\nYour visualization design choices should primarily depend on your data, and on what you’re trying to communicate. Radial visualizations can be both appropriate and engaging, but if you choose to use one, you should understand the potential trade-offs in terms of clarity and accuracy.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"md`## Acknowledgements\n\nThank you [Noah Veltman](https://observablehq.com/@veltman) for the technique of [unrolling a radial visualization](https://bl.ocks.org/veltman/bd8d6a2f57dd8729da3437492fb9debd). I’m also grateful to Shan Carter, Toph Tucker, Ian Johnson, Deepti Srivastava, Lauren Buchman, Visnu Pitiyanuvath, Dunstan Orchard, Zan Armstrong, and Susie Lu for encouragement and thoughtful feedback. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"md`---\n## Appendix\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"import { tweet } from \"@mbostock/tweet\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":756,"value":"import { toc } from \"@nebrius/indented-toc\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":303,"value":"import {Tree as RadialTree} from \"@d3/radial-tree\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":305,"value":"import {Tree} from \"@d3/tree\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":893,"value":"radialDendrogram = RadialTree(hierarchicalData, {\n label: d => d.name,\n width: 640,\n height: 640\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":892,"value":"clusterDendrogram = Tree(hierarchicalData, {\n label: d => d.name,\n width: 640\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":321,"value":"import { chart as collapsibleTree } with {\n hierarchicalData as data\n} from \"@d3/collapsible-tree\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":150,"value":"import {\n viewof t as sunburstToIcicleSlider,\n chart as sunburstToIcicle\n} from \"@kerryrodden/unrolling-a-sunburst\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":583,"value":"import {\n viewof t as lineChartSlider,\n chart as lineChart\n} from \"@kerryrodden/unrolling-a-line-chart\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":558,"value":"import {\n viewof t as barChartSlider,\n chart as radialBarChart\n} from \"@kerryrodden/unrolling-a-radial-bar-chart\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":232,"value":"hierarchicalData = {\n const maxDepth = 3;\n const numChildren = 5;\n function buildTree(node, depth) {\n if (depth <= maxDepth) {\n node.children = Array(numChildren).fill(null)\n .map(() => ({ name: String(depth) }));\n node.children.forEach(child => buildTree(child, depth + 1));\n } else {\n node.value = 1;\n }\n return node;\n }\n return buildTree({ name: \"root\" }, 1);\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}