Skip to content

Instantly share code, notes, and snippets.

@zuhao
Last active December 23, 2015 16: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 zuhao/6665043 to your computer and use it in GitHub Desktop.
Save zuhao/6665043 to your computer and use it in GitHub Desktop.
Plotrb Example: Choropleth

This example is taken from Vega's gallery

The following is the Ruby code that generates choropleth.json.

require 'plotrb.rb'

ump_data = pdata.name('unemp') do
  url('/zuhao/raw/6666293/unemployment.tsv')
  format(:tsv) { parse :rate => :number }
end
cty_data = pdata.name('counties') do
	url('/zuhao/raw/6666293/us-10m.tsv')
	format(:topojson) { feature 'counties' }
	transform [
		geopath_transform.projection(:albersUsa),
		zip_transform.with('unemp').match('id').against('id').as('value').default(nil),
		filter_transform.test('d.path!=null && d.value!=null')
	]
end

cs = quantize_scale.name('color').from([0, 0.15]).to(
  [
		"#f7fbff",
    "#deebf7",
    "#c6dbef",
    "#9ecae1",
    "#6baed6",
    "#4292c6",
    "#2171b5",
    "#08519c",
    "#08306b"
  ])

mark = path_mark.from(cty_data) do
	enter do
		path { from 'path' }
	end
	update do
		fill { scale(cs).from('value.data.rate') }
	end
	hover do
		fill 'red'
	end
end

vis = visualization.width(960).height(500) do
	data ump_data, cty_data
	scales cs
	marks mark
end

puts vis.generate_spec(:pretty)
{
"width": 960,
"height": 500,
"data": [
{
"name": "unemp",
"format": {
"parse": {
"rate": "number"
},
"type": "tsv"
},
"url": "/zuhao/raw/6666293/unemployment.tsv"
},
{
"name": "counties",
"format": {
"feature": "counties",
"type": "topojson"
},
"url": "/zuhao/raw/6666293/us-10m.json",
"transform": [
{
"value": "data",
"projection": "albersUsa",
"type": "geopath"
},
{
"with": "unemp",
"as": "value",
"key": "data.id",
"withKey": "data.id",
"type": "zip"
},
{
"test": "d.path!=null && d.value!=null",
"type": "filter"
}
]
}
],
"scales": [
{
"name": "color",
"type": "quantize",
"domain": [
0,
0.15
],
"range": [
"#f7fbff",
"#deebf7",
"#c6dbef",
"#9ecae1",
"#6baed6",
"#4292c6",
"#2171b5",
"#08519c",
"#08306b"
]
}
],
"marks": [
{
"type": "path",
"from": {
"data": "counties"
},
"properties": {
"enter": {
"path": {
"field": "path"
}
},
"update": {
"fill": {
"field": "value.data.rate",
"scale": "color"
}
},
"hover": {
"fill": {
"value": "red"
}
}
}
}
]
}
require 'plotrb.rb'
ump_data = pdata.name('unemp') do
url('/zuhao/raw/6666293/unemployment.tsv')
format(:tsv) { parse :rate => :number }
end
cty_data = pdata.name('counties') do
url('/zuhao/raw/6666293/us-10m.json')
format(:topojson) { feature 'counties' }
transform [
geopath_transform.projection(:albersUsa),
zip_transform.with('unemp').match('id').against('id').as('value').default(nil),
filter_transform.test('d.path!=null && d.value!=null')
]
end
cs = quantize_scale.name('color').from([0, 0.15]).to(
[
"#f7fbff",
"#deebf7",
"#c6dbef",
"#9ecae1",
"#6baed6",
"#4292c6",
"#2171b5",
"#08519c",
"#08306b"
])
mark = path_mark.from(cty_data) do
enter do
path { from 'path' }
end
update do
fill { scale(cs).from('value.data.rate') }
end
hover do
fill 'red'
end
end
vis = visualization.width(960).height(500) do
data ump_data, cty_data
scales cs
marks mark
end
puts vis.generate_spec(:pretty)
<html>
<head>
<title>Plotrb Example: Choropleth</title>
<script src="http://trifacta.github.io/vega/lib/topojson.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/d3.geo.projection.v0.min.js" charset="utf-8"></script>
<script src="http://trifacta.github.com/vega/vega.js"></script>
</head>
<body>
<div id="vis"></div>
</body>
<script type="text/javascript">
// parse a spec and create a visualization view
function parse(spec) {
vg.parse.spec(spec, function(chart) { chart({el:"#vis", renderer:"svg"}).update(); });
}
parse("choropleth.json");
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment