Skip to content

Instantly share code, notes, and snippets.

@zuhao

zuhao/README.md

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/6663999 to your computer and use it in GitHub Desktop.
Save zuhao/6663999 to your computer and use it in GitHub Desktop.
Download ZIP
Plotrb Example: Area
Raw
README.md

This example is taken from Vega's gallery

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

require 'plotrb'

data = pdata.name('table').values(
    [
        {x: 1,  y: 28}, {x: 2,  y: 55},
        {x: 3,  y: 43}, {x: 4,  y: 91},
        {x: 5,  y: 81}, {x: 6,  y: 53},
        {x: 7,  y: 19}, {x: 8,  y: 87},
        {x: 9,  y: 52}, {x: 10, y: 48},
        {x: 11, y: 24}, {x: 12, y: 49},
        {x: 13, y: 87}, {x: 14, y: 66},
        {x: 15, y: 17}, {x: 16, y: 27},
        {x: 17, y: 68}, {x: 18, y: 16},
        {x: 19, y: 49}, {x: 20, y: 15}
    ]
)

xs = linear_scale.name('x').from('table.x').to_width.exclude_zero
ys = linear_scale.name('y').from('table.y').to_height.nicely

xa = x_axis.scale(xs).ticks(20)
ya = y_axis.scale(ys)

mark = area_mark.from(data) do
    enter do
        interpolate :monotone
        left {from('x').scale(xs)}
        top {from('y').scale(ys)}
        bottom {value(0).scale(ys)}
        fill 'steelblue'
    end
    update do
        fill_opacity 1
    end
    hover do
        fill_opacity 0.5
    end
end

vis = visualization.name('area').width(600).height(400) do
    padding :top => 10, :left => 30, :bottom => 30, :right => 10
    data data
    scales xs, ys
    axes xa, ya
    marks mark
end

puts vis.generate_spec(:pretty)
Raw
area.json
{
"name": "area",
"width": 600,
"height": 400,
"padding": {
"top": 10,
"left": 30,
"bottom": 30,
"right": 10
},
"data": [
{
"name": "table",
"values": [
{
"x": 1,
"y": 28
},
{
"x": 2,
"y": 55
},
{
"x": 3,
"y": 43
},
{
"x": 4,
"y": 91
},
{
"x": 5,
"y": 81
},
{
"x": 6,
"y": 53
},
{
"x": 7,
"y": 19
},
{
"x": 8,
"y": 87
},
{
"x": 9,
"y": 52
},
{
"x": 10,
"y": 48
},
{
"x": 11,
"y": 24
},
{
"x": 12,
"y": 49
},
{
"x": 13,
"y": 87
},
{
"x": 14,
"y": 66
},
{
"x": 15,
"y": 17
},
{
"x": 16,
"y": 27
},
{
"x": 17,
"y": 68
},
{
"x": 18,
"y": 16
},
{
"x": 19,
"y": 49
},
{
"x": 20,
"y": 15
}
]
}
],
"scales": [
{
"zero": false,
"name": "x",
"type": "linear",
"domain": {
"data": "table",
"field": "data.x"
},
"range": "width"
},
{
"nice": true,
"name": "y",
"type": "linear",
"domain": {
"data": "table",
"field": "data.y"
},
"range": "height"
}
],
"marks": [
{
"type": "area",
"from": {
"data": "table"
},
"properties": {
"enter": {
"interpolate": {
"value": "monotone"
},
"x": {
"field": "data.x",
"scale": "x"
},
"y": {
"field": "data.y",
"scale": "y"
},
"y2": {
"value": 0,
"scale": "y"
},
"fill": {
"value": "steelblue"
}
},
"update": {
"fillOpacity": {
"value": 1
}
},
"hover": {
"fillOpacity": {
"value": 0.5
}
}
}
}
],
"axes": [
{
"type": "x",
"scale": "x",
"ticks": 20
},
{
"type": "y",
"scale": "y"
}
]
}
Raw
area.rb
require 'plotrb'
data = pdata.name('table').values(
[
{x: 1, y: 28}, {x: 2, y: 55},
{x: 3, y: 43}, {x: 4, y: 91},
{x: 5, y: 81}, {x: 6, y: 53},
{x: 7, y: 19}, {x: 8, y: 87},
{x: 9, y: 52}, {x: 10, y: 48},
{x: 11, y: 24}, {x: 12, y: 49},
{x: 13, y: 87}, {x: 14, y: 66},
{x: 15, y: 17}, {x: 16, y: 27},
{x: 17, y: 68}, {x: 18, y: 16},
{x: 19, y: 49}, {x: 20, y: 15}
]
)
xs = linear_scale.name('x').from('table.x').to_width.exclude_zero
ys = linear_scale.name('y').from('table.y').to_height.nicely
xa = x_axis.scale(xs).ticks(20)
ya = y_axis.scale(ys)
mark = area_mark.from(data) do
enter do
interpolate :monotone
left {from('x').scale(xs)}
top {from('y').scale(ys)}
bottom {value(0).scale(ys)}
fill 'steelblue'
end
update do
fill_opacity 1
end
hover do
fill_opacity 0.5
end
end
vis = visualization.name('area').width(600).height(400) do
padding :top => 10, :left => 30, :bottom => 30, :right => 10
data data
scales xs, ys
axes xa, ya
marks mark
end
puts vis.generate_spec(:pretty)
Raw
index.html
<html>
<head>
<title>Plotrb Example: Area</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("area.json");
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment