45:["$","title",null,{"children":"Dot Mark / Observable Plot | 1907040202 | Observable"}] 4d:[{"id":"81d7bd5e9551f005d7a4764e2dcb46c44f04b5918551ce19dba191a8799b498beddb5ef2da994047586fc7231749e8911c825b1967f22814a57bee58c590c86e","href":"https://static.observableusercontent.com/files/81d7bd5e9551f005d7a4764e2dcb46c44f04b5918551ce19dba191a8799b498beddb5ef2da994047586fc7231749e8911c825b1967f22814a57bee58c590c86e","name":"us-population-state-age.csv","type":"text/csv","lastModified":1637549140450.295,"size":3516},{"id":"f41c1a1f4d1361c3738d427f1bbdbfaa9e5c651f8bec0902b876bda70ed1801a5aa8f487f53b2cd9bfa94fc40b874e54f4659e58d88044cdde1919cd5eebe8ac","href":"https://static.observableusercontent.com/files/f41c1a1f4d1361c3738d427f1bbdbfaa9e5c651f8bec0902b876bda70ed1801a5aa8f487f53b2cd9bfa94fc40b874e54f4659e58d88044cdde1919cd5eebe8ac","name":"driving.csv","type":"text/csv","lastModified":1637549140450.295,"size":1546},{"id":"75d52e6c3130b1cae83cda89305e17b50f33e7420ef205587a135e8562bcfd22e483cf4fa2fb5df6dff66f9c5d19740be1cfaf47406286e2eb6574b49ffc685d","href":"https://static.observableusercontent.com/files/75d52e6c3130b1cae83cda89305e17b50f33e7420ef205587a135e8562bcfd22e483cf4fa2fb5df6dff66f9c5d19740be1cfaf47406286e2eb6574b49ffc685d","name":"alphabet.csv","type":"text/csv","lastModified":1637549140450.295,"size":275},{"id":"cb3b255da07fd7d153388e7c29366394e13c160f011f45ebfc87e988b4224e32f9ec3243aa046b92e2991da0afee1bfe8fac31cff9c434e8638e4c7bdcc93e92","href":"https://static.observableusercontent.com/files/cb3b255da07fd7d153388e7c29366394e13c160f011f45ebfc87e988b4224e32f9ec3243aa046b92e2991da0afee1bfe8fac31cff9c434e8638e4c7bdcc93e92","name":"diamonds.csv","type":"text/csv","lastModified":1637549140450.295,"size":513118},{"id":"3ccff97fd2d93da734e76829b2b066eafdaac6a1fafdec0faf6ebc443271cfc109d29e80dd217468fcb2aff1e6bffdc73f356cc48feb657f35378e6abbbb63b9","href":"https://static.observableusercontent.com/files/3ccff97fd2d93da734e76829b2b066eafdaac6a1fafdec0faf6ebc443271cfc109d29e80dd217468fcb2aff1e6bffdc73f356cc48feb657f35378e6abbbb63b9","name":"aapl.csv","type":"text/csv","lastModified":1637549140450.295,"size":92399},{"id":"bc7c1ea172d2e7ecb638dd379cc35232e80e272e668b3e8fee27378d5ab67f6be881ba9608040b699ffc3262cebbddd5defa9dcfbacd917353523c39f4972c67","href":"https://static.observableusercontent.com/files/bc7c1ea172d2e7ecb638dd379cc35232e80e272e668b3e8fee27378d5ab67f6be881ba9608040b699ffc3262cebbddd5defa9dcfbacd917353523c39f4972c67","name":"gistemp.csv","type":"text/csv","lastModified":1637549140450.295,"size":27014},{"id":"048ec3dfd528110c0665dfa363dd28bc516ffb7247231f3ab25005036717f5c4c232a5efc7bb74bc03037155cb72b1abe85a33d86eb9f1a336196030443be4f6","href":"https://static.observableusercontent.com/files/048ec3dfd528110c0665dfa363dd28bc516ffb7247231f3ab25005036717f5c4c232a5efc7bb74bc03037155cb72b1abe85a33d86eb9f1a336196030443be4f6","name":"cars.csv","type":"text/csv","lastModified":1637549140450.295,"size":17438}] 49:{"id":"95cb358669799795","slug":"dot-mark-observable-plot","title":"Dot Mark / Observable Plot","thumbnail":"e53adaa2fb01eb776783ff5417efa96742d61d88d5af6b9f53581690e4eaea5e","access_level":"public","create_time":"$D2021-11-22T02:45:40.450Z","update_time":"$D2021-11-22T09:44:57.080Z","view_time":null,"first_public_time":"$D2021-11-22T09:46:36.796Z","has_unpublished_edits":null,"fork":{"id":"d71820e4e5468c53","slug":"plot-dot","title":"Dot Mark / Observable Plot","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"ab56f65a3c59a775","login":"1907040202","name":"","avatar_url":null,"tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":546,"publish_version":546,"role":null,"authored":false,"authors":[{"type":"individual","id":"422dae94408264fe","login":"1907040202","name":"","avatar_url":null,"tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"422dae94408264fe","login":"1907040202","name":"","avatar_url":null,"tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Dot Mark / Observable Plot","cells":[{"id":0,"value":"md`

Dot Mark / Observable Plot

Observable Plot › Marks › Dot · API

\n\n# Plot: Dot\n\n\n点标记将数据表示为圆圈，通常位于 x 和 y 定量维度，如散点图。下面的散点图显示了汽车数据集中的 y↑ 中的功率（以马力horsepower为单位）和 x→ 中的燃油效率（以英里/加仑miles per gallon为单位）之间的大致反比关系。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"cars = FileAttachment(\"cars.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"md`定义一个关于 x 的函数，当燃油效率表示为每 100 英里加仑（类似于采用公制系统的国家/地区使用的每 100 公里公制）时，我们可以绘制大致的线性关系。请注意，此数据集包含空值，这些被转换为 NaN 以防止他们被强制转换为零。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"md`除了沿 x 和 y 之外，点标记还支持 stroke 和 fill 通道。下面这个图中，颜色用作 y 位置的冗余编码，以强调全球平均表面温度的上升趋势。低于平均值的被分配为蓝色，高于平均值的被分配为红色。（Plot 尚未自动生成颜色图例。）`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"gistemp = FileAttachment(\"gistemp.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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 },\n marks: [\n Plot.ruleY([0]),\n Plot.dot(gistemp, {x: \"Date\", y: \"Anomaly\", stroke: \"Anomaly\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"md`点标记还支持一个 r 通道，即允许用点的大小来表示数据。下面的图中，每个点代表一个交易日； x 代表当天的变化，而 y 和 r 代表当天的交易量。正如所料，波动性较高的日子有较高的交易量。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"aapl = FileAttachment(\"aapl.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"md`通过[ bin 变换](/@observablehq/plot-bin)，不同大小的点也可以用作基于矩形([rect-based](/@observablehq/plot-rect))的热图的替代方案，以显示二维分布。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"diamonds = FileAttachment(\"diamonds.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"md`虽然点通常位于二维（x 和 y）中，但也支持一维点（仅 x 或仅 y）。下图中的点用于表示英语中字母的频率，作为条形图的袖珍替代品。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"alphabet = FileAttachment(\"alphabet.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"md`点还可用于标记低密度数据中的观察结果，因此很容易区分观察到的内容和插值的内容。例如，下面的连接散点图描绘了年人均驾驶量与汽油价格之间的关系如何随时间变化。（这再现了 Hannah Fairfield 2009 年的[“Driving Shifts Into Reverse”](http://www.nytimes.com/imagepages/2010/05/02/business/02metrics.html)。）`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"driving = FileAttachment(\"driving.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":340,"value":"md`点与[rules](/@observablehq/plot-rule)一起可用作条形[bars](/@observablehq/plot-bar)风格相似的替代品，以生成“棒棒糖”图表。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"md`有时，散点图可能在 x 和 y 上有一个序数维度，如下图比较各州的人口统计数据：颜色代表年龄组，x 代表该州人口在该年龄组中的比例。 reduce变换用于提取每个状态的最小值和最大值，以便rule可以跨越范围以获得更好的格式塔分组。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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 },\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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"md`下面是具有序数维度的散点图的另一个示例，我们可以沿 x 轴绘制年龄组并用线连接状态。这强调了美国的整体年龄分布，同时暗示了各州之间的差异。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"md`点标记支持的另一种可视化技术是分位数-分位数图[quantile-quantile (QQ) plot](/d/6bb4330bca6eba2b) (QQ图) ，用于比较单变量的两个分布。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":447,"value":"md`Next \nAPI Reference`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 44:null