Skip to content

Instantly share code, notes, and snippets.

@g3o2 g3o2/.block
Last active Nov 3, 2017

Embed
What would you like to do?
Dot-dash plot
license: bsd-3-clause
height: 400
border: no

Dot-dash plot

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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.