30:[{"id":"817caa7c8d834bcdd8c9d328faab1866a20865e730986d597611e4799bdebead89785e32828d1dd25a6fa866024e52d3b787624414e85c8e38d9b29bf7d115cd","href":"https://static.observableusercontent.com/files/817caa7c8d834bcdd8c9d328faab1866a20865e730986d597611e4799bdebead89785e32828d1dd25a6fa866024e52d3b787624414e85c8e38d9b29bf7d115cd","name":"faithful.tsv","type":"text/tab-separated-values","lastModified":1656103760914.21,"size":2466}] 2e:{"title":"Density Mark / Observable Plot","cells":[{"id":0,"value":"

Density Mark / Observable Plot

Observable Plot › Marks › Density · API

\n\n# Plot: Density\n\nThe Density mark shows the estimated density of two-dimensional point clouds. Contours guide the eye towards the local peaks of concentration of the data, much like a topographic map does with elevation. This is especially useful given overplotting in dense datasets.","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"Plot.plot({\n inset: 20,\n marks: [\n Plot.density(faithful, {x: \"waiting\", y: \"eruptions\", stroke: \"steelblue\", strokeWidth: 0.25}),\n Plot.density(faithful, {x: \"waiting\", y: \"eruptions\", stroke: \"steelblue\", thresholds: 4}),\n Plot.dot(faithful, {x: \"waiting\", y: \"eruptions\", fill: \"currentColor\", r: 1.5})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"faithful = FileAttachment(\"faithful.tsv\").tsv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":105,"value":"The **bandwidth** option specifies the radius of the [Gaussian kernel](https://en.wikipedia.org/wiki/Gaussian_function) describing the influence of each point as a function of distance; this kernel is summed over a discrete grid covering the plot, and then contours (*isolines*) are derived for values between 0 (exclusive) and the maximum density (exclusive) using the [marching squares algorithm](https://en.wikipedia.org/wiki/Marching_squares). (Internally, the bandwidth is rounded based on the precision of the underlying discrete grid.)","pinned":false,"hidden":false,"mode":"md"},{"id":374,"value":"viewof bandwidth = Inputs.range([0, 40], {label: \"Bandwidth\", value: 20, step: 0.2})","pinned":false,"hidden":false,"mode":"ojs"},{"id":369,"value":"Plot.plot({\n inset: 20,\n marks: [\n Plot.density(faithful, {x: \"waiting\", y: \"eruptions\", bandwidth}),\n Plot.dot(faithful, {x: \"waiting\", y: \"eruptions\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":366,"value":"The **thresholds** option specifies the number of contour lines (minus one) to be computed. For example, with 4 thresholds and a maximum density of 10, contour lines would be drawn for the values 2.5, 5, and 7.5. The default number of thresholds is 20. (You can also pass the thresholds as an explicit array of values.)","pinned":false,"hidden":false,"mode":"md"},{"id":387,"value":"viewof thresholds = Inputs.range([1, 40], {label: \"Thresholds\", value: 20, step: 1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":385,"value":"Plot.plot({\n inset: 20,\n marks: [\n Plot.density(faithful, {x: \"waiting\", y: \"eruptions\", thresholds}),\n Plot.dot(faithful, {x: \"waiting\", y: \"eruptions\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":92,"value":"The density mark also works with one-dimensional values:\n","pinned":false,"hidden":false,"mode":"md"},{"id":16,"value":"Plot.plot({\n height: 100,\n inset: 20,\n marks: [\n Plot.density(faithful, {x: \"waiting\", stroke: \"steelblue\", strokeWidth: 0.25, bandwidth: 10}),\n Plot.density(faithful, {x: \"waiting\", stroke: \"steelblue\", thresholds: 4, bandwidth: 10}),\n Plot.dot(faithful, {x: \"waiting\", fill: \"currentColor\", r: 1.5})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":90,"value":"By using the _density_ keyword as a **fill** or **stroke** color, you can draw\nregions with a sequential color encoding.\n","pinned":false,"hidden":false,"mode":"md"},{"id":44,"value":"Plot.density(diamonds, {x: \"carat\", y: \"price\", fill: \"density\"}).plot({\n height: 500,\n grid: true,\n x: {type: \"log\"},\n y: {type: \"log\"},\n color: {scheme: \"ylgnbu\"}\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":144,"value":"To make the contours comparable when used across facets or with different series\n(specified by **z**, **stroke**, or **fill**), the number of thresholds is computed on\nthe series that reaches the highest density. For instance, the chart below shows\nthe highest concentration of penguins, arranged by flipper length and culmen\nlength, in the Biscoe island facet. The contours in the other facets will thus\nrespect the values determined by the Biscoe facet, resulting in comparable\ndensity levels.\n","pinned":false,"hidden":false,"mode":"md"},{"id":25,"value":"Plot.plot({\n width: 928,\n height: 360,\n color: {\n scheme: \"ylgnbu\",\n label: \"Density\"\n },\n facet: {\n data: penguins,\n x: \"island\"\n },\n marks: [\n Plot.density(penguins, {x: \"flipper_length_mm\", y: \"culmen_length_mm\", fill: \"density\", clip: true}),\n Plot.frame()\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":157,"value":"Similarly, when arranged by series (here, specified with *stroke*), the series with the highest local maximum will drive the thresholds which will then be used across all the series.","pinned":false,"hidden":false,"mode":"md"},{"id":22,"value":"Plot.plot({\n width: 360,\n height: 360,\n inset: 20,\n color: {\n legend: true\n },\n marks: [\n Plot.density(penguins, {\n x: \"flipper_length_mm\",\n y: \"culmen_length_mm\",\n stroke: \"species\",\n fill: \"species\",\n title: \"species\",\n fillOpacity: 0.1,\n thresholds: 15,\n mixBlendMode: \"multiply\",\n clip: true\n }),\n Plot.frame()\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":320,"value":"With the default settings, the density is the local average number of dots on an area of ${tex`100\\text{px}^2`}—a square of 10px by 10px. This can be multiplied by the dots’ weights.","pinned":false,"hidden":false,"mode":"md"},{"id":87,"value":"The **weight** is the importance of each data point, and defaults to 1 (counting\ndots). Otherwise, the weight is usually specified as a channel, used to signify\nthat some points have proportionally more influence than others.","pinned":false,"hidden":false,"mode":"md"},{"id":284,"value":"viewof skew = Inputs.range([-1, 1], {step: 0.01, label: \"Skew (-M/+F)\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":282,"value":"Plot.plot({\n width: 360,\n height: 360,\n nice: true,\n color: {legend: true},\n marks: [\n Plot.density(penguins.filter(d => d.sex), {\n weight: d => d.sex === \"MALE\" ? 1 - skew : 1 + skew,\n x: \"flipper_length_mm\",\n y: \"culmen_length_mm\",\n strokeOpacity: 0.5,\n clip: true\n }),\n Plot.dot(penguins.filter(d => d.sex), {\n x: \"flipper_length_mm\",\n y: \"culmen_length_mm\",\n stroke: \"sex\",\n strokeOpacity: d => d.sex === \"MALE\" ? 1 - skew : 1 + skew\n }),\n Plot.frame()\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":206,"value":"A common use case (or “trick”, if you will) is to specify a negative weight for points that\nthe density contours should avoid—allowing to to draw regions of influence that\ndo not overlap.\n","pinned":false,"hidden":false,"mode":"md"},{"id":171,"value":"Plot.plot({\n width: 360,\n height: 360,\n nice: true,\n color: {legend: true},\n marks: [\n [\"Adelie\", \"Chinstrap\", \"Gentoo\"].map((species) =>\n Plot.density(penguins, {\n weight: d => d.species === species ? 1 : -1,\n x: \"flipper_length_mm\",\n y: \"culmen_length_mm\",\n z: null,\n fill: () => species,\n fillOpacity: 0.2,\n thresholds: [0.05],\n clip: true\n })\n ),\n Plot.dot(penguins, {\n x: \"flipper_length_mm\",\n y: \"culmen_length_mm\",\n fill: \"species\",\n strokeWidth: 0.5,\n stroke: \"white\"\n }),\n Plot.frame()\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":428,"value":"Next \nAPI Reference","pinned":false,"hidden":false,"mode":"md"}],"files":"$W30","stdlib":"1","titling":"auto"}