| license: bsd-3-clause | |
| height: 400 | |
| border: no |
Dot-dash plots are presented in Edward Tufte's book Visual Display of Quantitative Information on page 133.
Notice the beauty of the vega-lite specification, i.e. concise in syntax, yet complex in appearance, with a newish twist: dashes grouped by a third variable.
This block has been forked from Domoritz's Vega-Lite Block example.
| { | |
| "$schema": "https://vega.github.io/schema/vega-lite/v2.json", | |
| "description": "Dot-dash plot à la Edward Tufte", | |
| "data": {"url": "https://vega.github.io/vega-datasets/data/cars.json"}, | |
| "hconcat": [ | |
| { | |
| "mark": "tick", | |
| "description": "y-axis dash plot", | |
| "encoding": { | |
| "y": { | |
| "field": "Horsepower", "type": "quantitative", | |
| "axis": { "labels": false, "domain": false, "ticks": false } | |
| }, | |
| "x": { | |
| "field": "Origin", "type": "nominal", | |
| "axis": { "title": "", "labels": false, "domain": false, "ticks": false } | |
| }, | |
| "color": {"field": "Origin", "type": "nominal"} | |
| } | |
| }, | |
| { | |
| "vconcat": [ | |
| { | |
| "mark": "point", | |
| "description": "dot plot", | |
| "encoding": { | |
| "x": { | |
| "field": "Miles_per_Gallon", "type": "quantitative", | |
| "axis": { "title": "" } | |
| }, | |
| "y": { | |
| "field": "Horsepower","type": "quantitative", | |
| "axis": { "title": "" } | |
| }, | |
| "color": {"field": "Origin", "type": "nominal"} | |
| } | |
| }, | |
| { | |
| "mark": "tick", | |
| "description": "x-axis dash plot", | |
| "encoding": { | |
| "x": { | |
| "field": "Miles_per_Gallon", "type": "quantitative", | |
| "axis": { "labels": false, "domain": false, "ticks": false } | |
| }, | |
| "y": { | |
| "field": "Origin", "type": "nominal", | |
| "axis": { "title": "", "labels": false, "domain": false, "ticks": false } | |
| }, | |
| "color": {"field": "Origin", "type": "nominal"} | |
| } | |
| } | |
| ] | |
| } | |
| ], | |
| "config": { | |
| "view": { "strokeWidth": 0 }, | |
| "axis": { | |
| "gridWidth": 0.3, "domainColor": "lightgray", "tickColor": "lightgray" | |
| }, | |
| "axisY": { "titlePadding": -15 }, | |
| "axisX": { "titlePadding": 10 } | |
| } | |
| } |
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/vega/3.0.7/vega.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/vega-lite/2.0.0/vega-lite.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/vega-embed/3.0.0-rc7/vega-embed.min.js"></script> | |
| <style> | |
| body { | |
| font-family: sans-serif; | |
| } | |
| .vega-actions a { | |
| padding: 0.2em; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="vis"></div> | |
| <script> | |
| const spec = "dot_dash.vl.json"; | |
| const opt = { renderer: "svg" }; | |
| vegaEmbed('#vis', spec, opt); | |
| </script> | |
| </body> |