Published
Edited
Mar 21, 2019
embed({
"$schema": "https://vega.github.io/schema/vega/v5.json",
"width": 960,
"height": 500,
"autosize": "none",
"data": [
{
"name": "unemp",
"url": "https://vega.github.io/vega-datasets/data/unemployment.tsv",
"format": {"type": "tsv", "parse": "auto"}
},
{
"name": "counties",
"url": "https://vega.github.io/vega-datasets/data/us-10m.json",
"format": {"type": "topojson", "feature": "counties"},
"transform": [
{ "type": "lookup", "from": "unemp", "key": "id", "fields": ["id"], "values": ["rate"] },
{ "type": "filter", "expr": "datum.rate != null" }
]
}
],
"projections": [
{
"name": "projection",
"type": "albersUsa"
}
],
"scales": [
{
"name": "color",
"type": "quantize",
"domain": [0, .15],
"range": {"scheme": "blues", "count": 7}
}
],
"legends": [
{
"fill": "color",
"orient": "bottom-right",
"title": "Unemployment",
"format": "0.1%"
}
],
"marks": [
{
"type": "shape",
"from": {"data": "counties"},
"encode": {
"enter": { "tooltip": {"signal": "format(datum.rate, '0.1%')"}},
"update": { "fill": {"scale": "color", "field": "rate"} },
"hover": { "fill": {"value": "red"} }
},
"transform": [
{ "type": "geoshape", "projection": "projection" }
]
}
]
})
uArray2 = {
uArray.forEach(function(ud,i)
{
ud.rate = +ud.rate;
console.log(i,ud.id,ud.rate);
});
return uArray;
}
embed({
"$schema": "https://vega.github.io/schema/vega/v5.json",
"width": 960,
"height": 500,
"autosize": "none",
"data": [
{
"name": "unemp",
"url": "https://vega.github.io/vega-datasets/data/unemployment.tsv",
"format": {"type": "tsv", "parse": "auto"}
},
{
"name": "counties",
"url": "https://vega.github.io/vega-datasets/data/us-10m.json",
"format": {"type": "topojson", "feature": "counties"},
"transform": [
{ "type": "lookup", "from": "unemp", "key": "id", "fields": ["id"], "values": ["rate"] },
{ "type": "filter", "expr": "datum.rate != null" }
]
}
],
"projections": [
{
"name": "projection",
"type": "albersUsa"
}
],
"scales": [
{
"name": "seqcolor",
"type": "quantize",
"domain": [0, uMax],
"range": {"scheme": "greens", "count": 10}
}
],
"legends": [
{
"fill": "seqcolor",
"orient": "bottom-right",
"title": "Unemployment",
"format": "0.1%"
}
],
"marks": [
{
"type": "shape",
"from": {"data": "counties"},
"encode": {
"enter": {
"tooltip": {"signal": "{'county': datum.id,'rate': format(datum.rate, '0.1%')}"}
},
"update": { "fill": {"scale": "seqcolor", "field": "rate"} },
"hover": { "fill": {"value": "red"} }
},
"transform": [
{ "type": "geoshape", "projection": "projection" }
]
}
]
})
uArray3 = {
uArray2.forEach(function(ud) {
var result = countylist.filter(county => +(county.Code) === +(ud.id)) ;
ud.name = (result[0] !== undefined) ? result[0].Name : null;
}
);
return uArray2
};
embed({
"$schema": "https://vega.github.io/schema/vega/v5.json",
"width": 960,
"height": 500,
"autosize": "none",
"data": [
{
"name": "unemp",
"url": "https://vega.github.io/vega-datasets/data/unemployment.tsv",
"format": {"type": "tsv", "parse": "auto"}
},
{
"name":"ue",
"values": uArray3
},
{
"name": "counties",
"url": "https://vega.github.io/vega-datasets/data/us-10m.json",
"format": {"type": "topojson", "feature": "counties"},
"transform": [
{ "type": "lookup", "from": "unemp", "key": "id", "fields": ["id"], "values": ["rate"] },
{ "type": "filter", "expr": "datum.rate != null" },
{ "type": "lookup", "from": "ue", "key": "id", "fields": ["id"], "values": ["name"] },
]
}
],
"projections": [
{
"name": "projection",
"type": "albersUsa"
}
],
"scales": [
{
"name": "divcolor",
"type": "quantize",
"domain": [0, uMax],
"range": {"scheme": "blueorange", "count": 10}
}
],
"legends": [
{
"fill": "divcolor",
"orient": "bottom-right",
"title": "Unemployment",
"format": "0.1%"
}
],
"marks": [
{
"type": "shape",
"from": {"data": "counties"},
"encode": {
"enter": {
"tooltip": {"signal": "{'County': datum.name,'rate': format(datum.rate, '0.1%')}"}
},
"update": { "fill": {"scale": "divcolor", "field": "rate"} },
"hover": { "fill": {"value": "red"} }
},
"transform": [
{ "type": "geoshape", "projection": "projection" }
]
}
]
})
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
