31:[] 2f:{"title":"Histogram vs. Circle Chart","cells":[{"id":0,"value":"md`# Histogram vs. Circle Chart\n\nThe standard way to view a distribution of values is to use a Histogram, which typically divided the value range into equal-sized bins, counts the number of values in each bin, and shows the count with bar length.\n\nAn advantage of histograms is that they show duplicate values, because the binning process counts duplicate values.\n\nA 'circle chart' shows a circle with a radius prortional to each value. Circles are drawn with transparency, so similar and duplicate values appear darker than outliers.\n\nBelow are initial comparisons of Histograms and Circle Charts for visualizing distributions.\n\nThe obvious differences are that Histograms are rectangular and binned, while Circle charts are radial and use overplotting.\n\nInterestingly, the radial layout of circle charts may make comparison of multiple distributions easier, compare for example https://observablehq.com/@jonhelfman/us-region-histograms and https://observablehq.com/@jonhelfman/us-region-circles\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":155,"value":"html`

\n${expHist}\n${expCirc}\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"html`

\n${normHist}\n${normCirc}\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"html`

\n${lHist}\n${lCirc}\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":250,"value":"html`

\n${norm2Hist}\n${norm2Circ}\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"html`

\n${randHist}\n${randCirc}\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"html`

\n${uHist}\n${uCirc}\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":179,"value":"md`### Hidden Cells\n\nThe following cells are hidden by the HTL macros above.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"expHist = histogram(expData, 350, 200, 'Exponential', 50)","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"expCirc = circleChart(expData, 200, 250, 'Exponential', radiusScale.domain(d3.extent(expData)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"normHist = histogram(normalData, 350, 200, 'Normal', 50)","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"normCirc = circleChart(normalData, 200, 250, 'Normal', radiusScale.domain(d3.extent(normalData)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"uHist = histogram(uniformData, 350, 200, 'Uniform', 50)","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"value":"uCirc = circleChart(uniformData, 200, 250, 'Uniform', radiusScale.domain(d3.extent(uniformData)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"lHist = histogram(laplaceData, 350, 200, 'LaPlace', 50)","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"lCirc = circleChart(laplaceData, 200, 250, 'LaPlace', radiusScale.domain(d3.extent(laplaceData)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"randHist = histogram(randomData, 350, 200, 'Random', 50)","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"randCirc = circleChart(randomData, 200, 250, 'Random', radiusScale.domain(d3.extent(randomData)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":247,"value":"norm2Hist = histogram(normal2Data, 350, 200, 'Bi-Modal', 50)","pinned":false,"hidden":false,"mode":"ojs"},{"id":246,"value":"norm2Circ = circleChart(normal2Data, 200, 250, 'Bi-Modal', radiusScale.domain(d3.extent(normal2Data)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"md`### Data Prep`","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"randomData = d3.range(1000).map(d => Math.random())","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"normalData = d3.range(1000).map(d => stdlib.base.random.normal(0.0, 0.25))","pinned":false,"hidden":false,"mode":"ojs"},{"id":243,"value":"normal2Data = {\n const r1 = d3.randomNormal(1, 0.2);\n const r2 = d3.randomNormal(2, 0.2);\n return Float64Array.from({length: 2000}, (_, i) => (i & 1 ? r1 : r2)());\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"laplaceData = d3.range(1000).map(d => stdlib.base.random.laplace(0.0, 0.25))","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"expData = d3.range(1000).map(d => stdlib.base.random.exponential(10))","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"uniformData = d3.range(1000).map(d => stdlib.base.random.uniform(0.0, 1.0))","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"radiusScale = d3.scaleLinear()\n .range([0.1, 100])","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"md`### Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"import { histogram } from '@jonhelfman/histogram'","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"import { circleChart } from '@jonhelfman/circle-chart'","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"stdlib = require( \"https://unpkg.com/@stdlib/stdlib@0.0.32/dist/stdlib-flat.min.js\" )","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"d3 = require(\"d3\", \"d3-array@^2.2\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}