Skip to content

Instantly share code, notes, and snippets.

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

This example is taken from Vega's gallery

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

require 'plotrb'

data = pdata.name('table').values([12,23,47,6,52,19]).transform(pie_transform)

scale = sqrt_scale.name('r').from(data).to([20,100])

mark = arc_mark.from(data) do
    enter do
        x_start { group(:width).times(0.5) }
        y_start { group(:height).times(0.5) }
        start_angle { from :start_angle }
        end_angle { from :end_angle }
        inner_radius 20
        outer_radius { scale(scale) }
        stroke '#fff'
    end
    update do
        fill '#ccc'
    end
    hover do
        fill 'pink'
    end
end

vis = visualization.name('arc').width(600).height(400) do
    data data
    scales scale
    marks mark
end

puts vis.generate_spec(:pretty)
{
"name": "arc",
"width": 600,
"height": 400,
"data": [
{
"name": "table",
"values": [
12,
23,
47,
6,
52,
19
],
"transform": [
{
"value": "data",
"type": "pie"
}
]
}
],
"scales": [
{
"name": "r",
"type": "sqrt",
"domain": {
"data": "table",
"field": "data"
},
"range": [
20,
100
]
}
],
"marks": [
{
"type": "arc",
"from": {
"data": "table"
},
"properties": {
"enter": {
"innerRadius": {
"value": 20
},
"outerRadius": {
"scale": "r"
},
"startAngle": {
"field": "startAngle"
},
"endAngle": {
"field": "endAngle"
},
"x": {
"mult": 0.5,
"group": "width"
},
"y": {
"mult": 0.5,
"group": "height"
},
"stroke": {
"value": "#fff"
}
},
"update": {
"fill": {
"value": "#ccc"
}
},
"hover": {
"fill": {
"value": "pink"
}
}
}
}
]
}
require 'plotrb'
data = pdata.name('table').values([12,23,47,6,52,19]).transform(pie_transform)
scale = sqrt_scale.name('r').from(data).to([20,100])
mark = arc_mark.from(data) do
enter do
x_start { group(:width).times(0.5) }
y_start { group(:height).times(0.5) }
start_angle { from :start_angle }
end_angle { from :end_angle }
inner_radius 20
outer_radius { scale(scale) }
stroke '#fff'
end
update do
fill '#ccc'
end
hover do
fill 'pink'
end
end
vis = visualization.name('arc').width(600).height(400) do
data data
scales scale
marks mark
end
puts vis.generate_spec(:pretty)
<html>
<head>
<title>Plotrb Example: Arc</title>
<script src="http://d3js.org/d3.v3.min.js"></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("arc.json");
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment