Skip to content

Instantly share code, notes, and snippets.

@peterschretlen
Last active June 29, 2017 15:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save peterschretlen/536aacadea83be46c4660fe909b3cacf to your computer and use it in GitHub Desktop.
Save peterschretlen/536aacadea83be46c4660fe909b3cacf to your computer and use it in GitHub Desktop.
vega-lite tile map
license: mit

This example replicates a tile map using vega-lite. Compared to a choropleth map, a tile maps shows state level data with more clairty, by giving all states the same visual weight.

You can go to the blockbuilder and to fork this block and create your own visualizations. Check out the Vega-Lite website for more information, tutorials, and documentation.

{
"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
"description": "A simple bar chart with embedded data.",
"width": 600,
"height": -420,
"data": {
"values": [
{ "state": "AK", "value": 0.898315822, "row": 1, "col": 1 },
{ "state": "ME", "value": 0.918937779, "row": 1, "col": 12 },
{ "state": "VT", "value": 0.329645860, "row": 2, "col": 11 },
{ "state": "NH", "value": 0.603323891, "row": 2, "col": 12 },
{ "state": "WA", "value": 0.689882250, "row": 3, "col": 2 },
{ "state": "ID", "value": 0.045088198, "row": 3, "col": 3 },
{ "state": "MT", "value": 0.926243650, "row": 3, "col": 4 },
{ "state": "ND", "value": 0.133746143, "row": 3, "col": 5 },
{ "state": "MN", "value": 0.598460167, "row": 3, "col": 6 },
{ "state": "IL", "value": 0.633941424, "row": 3, "col": 7 },
{ "state": "WI", "value": 0.926379290, "row": 3, "col": 8 },
{ "state": "MI", "value": 0.775953247, "row": 3, "col": 9 },
{ "state": "NY", "value": 0.745371730, "row": 3, "col": 10 },
{ "state": "RI", "value": 0.750002478, "row": 3, "col": 11 },
{ "state": "MA", "value": 0.345267277, "row": 3, "col": 12 },
{ "state": "OR", "value": 0.207097705, "row": 4, "col": 2 },
{ "state": "NV", "value": 0.855661424, "row": 4, "col": 3 },
{ "state": "WY", "value": 0.705276939, "row": 4, "col": 4 },
{ "state": "SD", "value": 0.818660690, "row": 4, "col": 5 },
{ "state": "IA", "value": 0.061349607, "row": 4, "col": 6 },
{ "state": "IN", "value": 0.050984208, "row": 4, "col": 7 },
{ "state": "OH", "value": 0.687074468, "row": 4, "col": 8 },
{ "state": "PA", "value": 0.273236212, "row": 4, "col": 9 },
{ "state": "NJ", "value": 0.125522346, "row": 4, "col": 10 },
{ "state": "CT", "value": 0.565681973, "row": 4, "col": 11 },
{ "state": "CA", "value": 0.401076347, "row": 5, "col": 2 },
{ "state": "UT", "value": 0.872974382, "row": 5, "col": 3 },
{ "state": "CO", "value": 0.089326514, "row": 5, "col": 4 },
{ "state": "NE", "value": 0.051824757, "row": 5, "col": 5 },
{ "state": "MO", "value": 0.820515294, "row": 5, "col": 6 },
{ "state": "KY", "value": 0.083586898, "row": 5, "col": 7 },
{ "state": "WV", "value": 0.897081444, "row": 5, "col": 8 },
{ "state": "VA", "value": 0.314234901, "row": 5, "col": 9 },
{ "state": "MD", "value": 0.400489597, "row": 5, "col": 10 },
{ "state": "DE", "value": 0.713872278, "row": 5, "col": 11 },
{ "state": "AZ", "value": 0.825952232, "row": 6, "col": 3 },
{ "state": "NM", "value": 0.287512636, "row": 6, "col": 4 },
{ "state": "KS", "value": 0.445021384, "row": 6, "col": 5 },
{ "state": "AR", "value": 0.242165786, "row": 6, "col": 6 },
{ "state": "TN", "value": 0.608682550, "row": 6, "col": 7 },
{ "state": "NC", "value": 0.698158321, "row": 6, "col": 8 },
{ "state": "SC", "value": 0.583641750, "row": 6, "col": 9 },
{ "state": "DC", "value": 0.408861290, "row": 6, "col": 10 },
{ "state": "OK", "value": 0.028233472, "row": 7, "col": 5 },
{ "state": "LA", "value": 0.115371889, "row": 7, "col": 6 },
{ "state": "MS", "value": 0.451711949, "row": 7, "col": 7 },
{ "state": "AL", "value": 0.881213112, "row": 7, "col": 8 },
{ "state": "GA", "value": 0.605758273, "row": 7, "col": 9 },
{ "state": "HI", "value": 0.558410534, "row": 8, "col": 1 },
{ "state": "TX", "value": 0.178867991, "row": 8, "col": 5 },
{ "state": "FL", "value": 0.314296171, "row": 8, "col": 10 }
]
},
"layer": [
{
"mark": "rect",
"encoding": {
"x": {
"field": "col",
"type": "ordinal",
"axis": false
},
"y": {
"field": "row",
"type": "ordinal",
"axis": false
},
"color": {
"aggregate": "sum",
"field": "value",
"type": "quantitative",
"scale": {
"nice": true,
"zero": true,
"range": [
"#eee",
"#1f77b4"
]
},
"legend": false
}
}
},
{
"transform": [
{
"calculate": "round(1-datum.value)",
"as": "textcolor"
}
],
"mark": "text",
"encoding": {
"x": {
"field": "col",
"type": "ordinal",
"axis": false
},
"y": {
"field": "row",
"type": "ordinal",
"axis": false
},
"color": {
"field": "textcolor",
"type": "quantitative",
"legend": false
},
"text": {
"field": "state",
"type": "nominal"
}
}
}
],
"config": {
"overlay": {
"rect": true
},
"text" : {
"baseline" : "middle"
}
}
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega/3.0.0-beta.36/vega.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-lite/2.0.0-beta.5/vega-lite.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-embed/3.0.0-beta.18/vega-embed.js"></script>
<style>
body {
font-family: sans-serif;
}
.vega-actions a {
padding: 0.2em;
}
</style>
</head>
<body>
<div id="vis"></div>
<script>
const spec = "bar.vl.json";
vega.embed('#vis', spec);
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment