30:[{"id":"3ccff97fd2d93da734e76829b2b066eafdaac6a1fafdec0faf6ebc443271cfc109d29e80dd217468fcb2aff1e6bffdc73f356cc48feb657f35378e6abbbb63b9","href":"https://static.observableusercontent.com/files/3ccff97fd2d93da734e76829b2b066eafdaac6a1fafdec0faf6ebc443271cfc109d29e80dd217468fcb2aff1e6bffdc73f356cc48feb657f35378e6abbbb63b9","name":"aapl.csv","type":"text/csv","lastModified":1614378494274.809,"size":92399},{"id":"81d7bd5e9551f005d7a4764e2dcb46c44f04b5918551ce19dba191a8799b498beddb5ef2da994047586fc7231749e8911c825b1967f22814a57bee58c590c86e","href":"https://static.observableusercontent.com/files/81d7bd5e9551f005d7a4764e2dcb46c44f04b5918551ce19dba191a8799b498beddb5ef2da994047586fc7231749e8911c825b1967f22814a57bee58c590c86e","name":"us-population-state-age.csv","type":"text/csv","lastModified":1615511537218.533,"size":3516},{"id":"75d52e6c3130b1cae83cda89305e17b50f33e7420ef205587a135e8562bcfd22e483cf4fa2fb5df6dff66f9c5d19740be1cfaf47406286e2eb6574b49ffc685d","href":"https://static.observableusercontent.com/files/75d52e6c3130b1cae83cda89305e17b50f33e7420ef205587a135e8562bcfd22e483cf4fa2fb5df6dff66f9c5d19740be1cfaf47406286e2eb6574b49ffc685d","name":"alphabet.csv","type":"text/csv","lastModified":1615511283575.496,"size":275},{"id":"cb3b255da07fd7d153388e7c29366394e13c160f011f45ebfc87e988b4224e32f9ec3243aa046b92e2991da0afee1bfe8fac31cff9c434e8638e4c7bdcc93e92","href":"https://static.observableusercontent.com/files/cb3b255da07fd7d153388e7c29366394e13c160f011f45ebfc87e988b4224e32f9ec3243aa046b92e2991da0afee1bfe8fac31cff9c434e8638e4c7bdcc93e92","name":"diamonds.csv","type":"text/csv","lastModified":1615511172056.115,"size":513118},{"id":"f41c1a1f4d1361c3738d427f1bbdbfaa9e5c651f8bec0902b876bda70ed1801a5aa8f487f53b2cd9bfa94fc40b874e54f4659e58d88044cdde1919cd5eebe8ac","href":"https://static.observableusercontent.com/files/f41c1a1f4d1361c3738d427f1bbdbfaa9e5c651f8bec0902b876bda70ed1801a5aa8f487f53b2cd9bfa94fc40b874e54f4659e58d88044cdde1919cd5eebe8ac","name":"driving.csv","type":"text/csv","lastModified":1614378732512.903,"size":1546},{"id":"bc7c1ea172d2e7ecb638dd379cc35232e80e272e668b3e8fee27378d5ab67f6be881ba9608040b699ffc3262cebbddd5defa9dcfbacd917353523c39f4972c67","href":"https://static.observableusercontent.com/files/bc7c1ea172d2e7ecb638dd379cc35232e80e272e668b3e8fee27378d5ab67f6be881ba9608040b699ffc3262cebbddd5defa9dcfbacd917353523c39f4972c67","name":"gistemp.csv","type":"text/csv","lastModified":1614378436321.55,"size":27014},{"id":"048ec3dfd528110c0665dfa363dd28bc516ffb7247231f3ab25005036717f5c4c232a5efc7bb74bc03037155cb72b1abe85a33d86eb9f1a336196030443be4f6","href":"https://static.observableusercontent.com/files/048ec3dfd528110c0665dfa363dd28bc516ffb7247231f3ab25005036717f5c4c232a5efc7bb74bc03037155cb72b1abe85a33d86eb9f1a336196030443be4f6","name":"cars.csv","type":"text/csv","lastModified":1614378319095.957,"size":17438}] 2e:{"title":"Dot Mark / Observable Plot","cells":[{"id":0,"value":"

Dot Mark / Observable Plot

Observable Plot › Marks › Dot · API

\n\n# Plot: Dot\n\nThe **dot** mark represents data as circles, typically positioned in *x* and *y* quantitative dimensions, as in a scatterplot. For example, the scatterplot below shows the roughly-inverse relationship in a dataset of cars between power (in horsepower) in *y*↑ and fuel efficiency (in miles per gallon) in *x*→.","pinned":false,"hidden":false,"mode":"md"},{"id":32,"value":"cars = FileAttachment(\"cars.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":231,"value":"Plot.plot({\n grid: true,\n marks: [\n Plot.dot(cars, {x: \"economy (mpg)\", y: \"power (hp)\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":251,"value":"Using a functional definition of *x*, we can instead plot the roughly-linear relationship when fuel efficiency is represented as gallons per 100 miles (similar to the liters per 100 km metric used in countries that have adopted the metric system). Note that this data set contains nulls; these are converted to NaN to prevent coercion to zero.","pinned":false,"hidden":false,"mode":"md"},{"id":34,"value":"Plot.plot({\n grid: true,\n inset: 10,\n x: {\n label: \"Fuel consumption (gallons per 100 miles) →\"\n },\n y: {\n label: \"↑ Horsepower\"\n },\n marks: [\n Plot.dot(cars, {\n x: d => 100 / (d[\"economy (mpg)\"] ?? NaN), \n y: \"power (hp)\"\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"Dots support *stroke* and *fill* channels in addition to position along *x* and *y*. Below, color is used as a redundant encoding with *y*-position to emphasize the rising trend in average global surface temperatures. A diverging color scale assigns values below the mean blue and above the mean red. Plot can optionally generate the associated legend.","pinned":false,"hidden":false,"mode":"md"},{"id":43,"value":"gistemp = FileAttachment(\"gistemp.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"Plot.plot({\n y: {\n grid: true,\n tickFormat: \"+f\",\n label: \"↑ Surface temperature anomaly (°F)\"\n },\n color: {\n type: \"diverging\",\n scheme: \"BuRd\",\n legend: true\n },\n marks: [\n Plot.ruleY([0]),\n Plot.dot(gistemp, {x: \"Date\", y: \"Anomaly\", stroke: \"Anomaly\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"Dots also support an *r* channel allowing the size of dots to represent data. Below, each dot represents a trading day; the *x*-position represents the day’s change, while the *y*-position and area (*r*) represent the day’s trading volume. As you might expect, days with higher volatility have higher trading volume.","pinned":false,"hidden":false,"mode":"md"},{"id":50,"value":"aapl = FileAttachment(\"aapl.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":51,"value":"Plot.plot({\n grid: true,\n x: {\n label: \"Daily change (%) →\",\n tickFormat: \"+f\",\n transform: d => d * 100\n },\n y: {\n label: \"↑ Daily trading volume\",\n type: \"log\",\n tickFormat: \"~s\"\n },\n marks: [\n Plot.ruleX([0]),\n Plot.dot(aapl, {x: d => (d.Close - d.Open) / d.Open, y: \"Volume\", r: \"Volume\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"With the [*bin* transform](/@observablehq/plot-bin?collection=@observablehq/plot), sized dots can also be used as an alternative to a [rect-based](/@observablehq/plot-rect?collection=@observablehq/plot) heatmap to show a two-dimensional distribution.","pinned":false,"hidden":false,"mode":"md"},{"id":123,"value":"diamonds = FileAttachment(\"diamonds.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":125,"value":"Plot.plot({\n height: 640,\n grid: true,\n x: {\n label: \"Carats →\"\n },\n y: {\n label: \"↑ Price ($)\"\n },\n r: {\n range: [0, 20]\n },\n marks: [\n Plot.dot(diamonds, Plot.bin({r: \"count\"}, {x: \"carat\", y: \"price\", thresholds: 100}))\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":129,"value":"While dots are typically positioned in two dimensions (*x* and *y*), one-dimensional dots (only *x* or only *y*) are also supported. Below, dot area is used to represent the frequency of letters in the English language as a compact alternative to a bar chart.","pinned":false,"hidden":false,"mode":"md"},{"id":130,"value":"alphabet = FileAttachment(\"alphabet.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":132,"value":"Plot.plot({\n marks: [\n Plot.dot(alphabet, {x: \"letter\", r: \"frequency\", fill: \"currentColor\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"Dots can also be used to mark observations in low-density data, so it’s easy to distinguish what was observed from what is interpolated. For example, the connected scatterplot below plots how the relationship between annual per capita driving and the price of gasoline has changed over time. (This recreates Hannah Fairfield’s [“Driving Shifts Into Reverse”](http://www.nytimes.com/imagepages/2010/05/02/business/02metrics.html) from 2009.)","pinned":false,"hidden":false,"mode":"md"},{"id":72,"value":"driving = FileAttachment(\"driving.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":73,"value":"Plot.plot({\n grid: true,\n x: {\n label: \"Miles driven (per capita per year) →\"\n },\n y: {\n label: \"↑ Price of gas (average per gallon, adjusted)\"\n },\n marks: [\n Plot.line(driving, {x: \"miles\", y: \"gas\", curve: \"catmull-rom\"}),\n Plot.dot(driving, {x: \"miles\", y: \"gas\", fill: \"currentColor\"}),\n Plot.text(driving, {filter: d => d.year % 5 === 0, x: \"miles\", y: \"gas\", text: \"year\", dy: -8})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":340,"value":"Dots, together with [rules](/@observablehq/plot-rule?collection=@observablehq/plot), can be used as a stylistic alternative to [bars](/@observablehq/plot-bar?collection=@observablehq/plot) to produce a “lollipop” chart. Sadly these lollipops cannot actually be eaten.","pinned":false,"hidden":false,"mode":"md"},{"id":341,"value":"Plot.plot({\n x: {\n label: null,\n tickSize: 0\n },\n y: {\n label: \"↑ Frequency (%)\",\n transform: d => d * 100\n },\n marks: [\n Plot.ruleY([0]),\n Plot.ruleX(alphabet, {x: \"letter\", y: \"frequency\", fill: \"black\"}),\n Plot.dot(alphabet, {x: \"letter\", y: \"frequency\", fill: \"black\", r: 4})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"Sometimes, a scatterplot may have an ordinal dimension on either *x* and *y*, as in the plot below comparing the demographics of states: color represents age group, and *x* represents the proportion of the state’s population in that age group. A *reduce* transform is used to pull out the minimum and maximum values for each state such that a rule can span the extent for better Gestalt grouping.","pinned":false,"hidden":false,"mode":"md"},{"id":139,"value":"stateage = {\n const data = await FileAttachment(\"us-population-state-age.csv\").csv({typed: true});\n const ages = data.columns.slice(1); // convert wide data to tidy data\n return Object.assign(ages.flatMap(age => data.map(d => ({state: d.name, age, population: d[age]}))), {ages});\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":206,"value":"{\n const xy = Plot.normalizeX({basis: \"sum\", z: \"state\", x: \"population\", y: \"state\"});\n return Plot.plot({\n height: 660,\n grid: true,\n x: {\n axis: \"top\",\n label: \"Percent (%) →\",\n transform: d => d * 100\n },\n y: {\n axis: null\n },\n color: {\n scheme: \"spectral\",\n domain: stateage.ages, // in order\n legend: true\n },\n marks: [\n Plot.ruleX([0]),\n Plot.ruleY(stateage, Plot.groupY({x1: \"min\", x2: \"max\"}, xy)),\n Plot.dot(stateage, {...xy, fill: \"age\", title: \"age\"}),\n Plot.text(stateage, Plot.selectMinX({...xy, textAnchor: \"end\", dx: -6, text: \"state\"}))\n ]\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":87,"value":"As another example of a scatterplot with an ordinal dimension, we can plot age groups along the *x*-axis and connect states with lines. This emphasizes the overall age distribution of the United States, while giving a hint to variation across states.","pinned":false,"hidden":false,"mode":"md"},{"id":143,"value":"{\n const xy = Plot.normalizeY({basis: \"sum\", z: \"state\", x: \"age\", y: \"population\"});\n return Plot.plot({\n grid: true,\n x: {\n domain: stateage.ages, // in order\n label: \"Age range (years) →\",\n labelAnchor: \"right\"\n },\n y: {\n label: \"↑ Percent of population (%)\",\n transform: d => d * 100\n },\n marks: [\n Plot.ruleY([0]),\n Plot.line(stateage, {...xy, strokeWidth: 1, stroke: \"#ccc\"}),\n Plot.dot(stateage, xy)\n ]\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"Another visualization technique supported by the dot mark is the [quantile-quantile (QQ) plot](/d/6bb4330bca6eba2b); this is used to compare univariate two distributions.","pinned":false,"hidden":false,"mode":"md"},{"id":447,"value":"Next \nAPI Reference","pinned":false,"hidden":false,"mode":"md"}],"files":"$W30","stdlib":"1","titling":"auto"}