31:T5a6,previews([ { path: "@twitter/density-scatterplot", thumbnail: "d4b49a7f546810fdfee10ba628c0e31b47500bc2f26ca8ff4c54fff0ac506d4e", title: "Density Scatterplot", date: "2021-01-13", author: "Yuri Vishnevsky" }, { path: "@twitter/zoomable-density-scatterplot", thumbnail: "092b7d319ef1b057bb8cdf31537608b79aa229c7cf569fd4bda8a0f61ae8393b", title: "Zoomable Density Scatterplot", date: "2021-01-13", author: "Yuri Vishnevsky" }, { path: "@twitter/density-comparison-scatterplot", thumbnail: "f1203cb8d344addc609e1f32395584bb718247f40a23bc3f9907a48498190dab", title: "Density Comparison Scatterplot", date: "2021-01-13", author: "Yuri Vishnevsky" }, { path: "@twitter/one-dimensional-density-plot", thumbnail: "247d4c0879e2ad3db09a31edddae5597b4dde0b639e0a15581e43fff5fa301f4", title: "One-dimensional Density Plot", date: "2021-01-14", author: "Yuri Vishnevsky" }, { path: "@twitter/time-series-density-plot", thumbnail: "77f3e61a687eaefa2ba8b828c05e8aa5b6fbd425f8f2ab9f5610fde4b8739c84", title: "Time Series Density Plot", date: "2021-01-12", author: "Yuri Vishnevsky" }, { path: "@twitter/strange-attractors", thumbnail: "a91e448fb0642ba3a62b718820b2be8aeb1833f464f66cb532dcb7ea3257b7ac", title: "Strange Attractors", date: "2021-01-12", author: "Yuri Vishnevsky" } ])32:T45d,// adapted from https://observablehq.com/@tophtucker/reflecting-on-vote-cones#preview function preview({ path, title, author, thumbnail, date }) { return html` (event.currentTarget.firstElementChild.style.borderColor = "#1b1e23")} onmouseout=${event => (event.currentTarget.firstElementChild.style.borderColor = "#e8e8e8")}>

`; }33:[{"id":"0c58def5d820694bf47f790f17486217c40dacee27d926d6ed98571c0f818e6d9748819e2d42dbd6b8057c3946f4d71557f1dfc82519ca1a90dfc46165482e09","href":"https://static.observableusercontent.com/files/0c58def5d820694bf47f790f17486217c40dacee27d926d6ed98571c0f818e6d9748819e2d42dbd6b8057c3946f4d71557f1dfc82519ca1a90dfc46165482e09","name":"Grid (3).svg","type":"image/svg+xml","lastModified":1610577436089.597,"size":4251}] 2f:{"title":"Density Plots","cells":[{"id":0,"value":"md`# Density Plots\n\nStandard charts such as scatterplots and line charts often encounter issues with performance and overplotting as the amount of data increases. Density plots are an alternative that can work better for larger volumes of data.\n\nDensity plots work by overlaying a grid onto the canvas and visualizing the number of data points that fall into each bin. This notebook introduces a small [library](https://observablehq.com/@twitter/density-plot-documentation) to compute density histograms and render them visually. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":375,"value":"FileAttachment(\"Grid (3).svg\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":473,"value":"md`\nBy making the number of bins equal to the number of pixels, it's possible to use a density plot without losing visual resolution.\n\nThis approach also works for time series but needs to be refined slightly to account for the fact that some curves are more wiggly than others. We normalize the contribution of each curve by its [arc length](https://en.wikipedia.org/wiki/Arc_length) to ensure that every curve contributes equal density per unit time regardless of its dynamics.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":396,"value":"md`Here are some examples of what's possible with density plots:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"md`There is also a full API reference in the [documentation](https://observablehq.com/@twitter/density-plot-documentation):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"previews([\n {\n path: \"@twitter/density-plot-documentation\",\n thumbnail:\n \"493691a9d1bb85ebf80ccc361e2e97880714f503762901f480b85664668b1c11\",\n title: \"Density Plot Documentation\",\n date: \"2021-01-12\",\n author: \"Yuri Vishnevsky\"\n }\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":634,"value":"md`While density plots are a useful tool, there are situations for which they aren't appropriate. In particular, scatterplots or line charts can be easier to read when you have a small number of points. Density plots can also be hard to understand when the data is heavily quantized, e.g. to integer coordinates, though this can be mitigated by choosing an appropriate number of bins.\n\nThis library has not yet been heavily optimized for performance and attempts to make things fast by not doing things that make it slow. Right now it can comfortably plot one million points on my 2014 laptop at interactive speeds and I'd be interested in suggestions for improving performance. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"md`## Further Reading\n\n* [Visualizing a Million Time Series with the Density Line Chart](https://arxiv.org/abs/1808.06019) introduces the DenseLines technique used by this library to calculate density histograms for time series.\n\n* [DataShader](https://datashader.org/) is a Python library and graphics pipeline centered around high-resolution density histograms.\n\n* [Selecting the Right Opacity for 2D Point Clouds](https://observablehq.com/@rreusser/selecting-the-right-opacity-for-2d-point-clouds) shows an alternative approach that uses GPU rendering and modulates point opacity based on the zoom level.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":678,"value":"md`Thanks to Dan Luu, Kunal Trivedi, Yao Yue, and Jacob Rus for helpful comments and suggestions during the development of this library.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"function previews(notebooks) {\n return html`

${notebooks.map(preview)}

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"// todo: UTC?\nformatDate = date =>\n date\n ? new Date(date).toLocaleDateString(\"en-US\", {\n weekday: 'long',\n year: 'numeric',\n month: 'long',\n day: 'numeric'\n })\n : \"\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"html = (await require(\"htl@0.2\")).html","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}