Skip to content

Instantly share code, notes, and snippets.

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

This example is taken from Vega's gallery

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

require 'plotrb'

people = pdata.name('people').url('people.json')

events = pdata.name('events').url('events.json') do
    format(:json) { parse 'when' => :date }
end

y_scale = ordinal_scale.name('y').from('people.label').to_height
x_scale = time_scale.name('x').from(['people.born', 'people.died']).to_width.round.in_years

events_mark_t = text_mark.from(events) do
    enter do
        x_start { scale(x_scale).from('when') }
        y_start -10
        angle -25
        fill '#000'
        text { from 'name' }
        font 'Helvetica Neue'
        font_size 10
    end
end

events_mark_r = rect_mark.from(events) do
    enter do
        x_start { scale(x_scale).from('when') }
        y_start -8
        width 1
        height { group(:height).offset(8) }
        fill '#888'
    end
end

people_mark_t = text_mark.from(people) do
    enter do
        x_start { scale(x_scale).from('born') }
        y_start { scale(y_scale).from('label').offset(-3) }
        fill '#000'
        text { from('label') }
        font 'Helvetica Neue'
        font_size 10
    end
end

people_mark_r = rect_mark.from(people) do
    enter do
        x_start { scale(x_scale).from('born') }
        x_end { scale(x_scale).from('died') }
        y_start { scale(y_scale).from('label') }
        height 2
        fill '#557'
    end
end

people_mark_r2 = rect_mark.from(people) do
    enter do
        x_start { scale(x_scale).from('enter') }
        x_end { scale(x_scale).from('leave') }
        y_start { scale(y_scale).from('label').offset(-1) }
        height 4
        fill '#e44'
    end
end

vis = visualization.name('lifelines').width(600).height(300) do
    data people, events
    scales x_scale, y_scale
    axes x_axis.scale('x')
    marks events_mark_t, events_mark_r, people_mark_t, people_mark_r, people_mark_r2
end

puts vis.generate_spec(:pretty)
[
{"name":"Decl. of Independence", "when":"July 4, 1776"},
{"name":"U.S. Constitution", "when":"3/4/1789"},
{"name":"Louisiana Purchase", "when":"April 30, 1803"},
{"name":"Monroe Doctrine", "when":"Dec 2, 1823"}
]
<html>
<head>
<title>Plotrb Example: Lifelines</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("lifelines.json");
</script>
</html>
{
"name": "lifelines",
"width": 600,
"height": 300,
"data": [
{
"name": "people",
"url": "people.json"
},
{
"name": "events",
"format": {
"parse": {
"when": "date"
},
"type": "json"
},
"url": "events.json"
}
],
"scales": [
{
"nice": "year",
"name": "x",
"type": "time",
"domain": {
"fields": [
{
"data": "people",
"field": "data.born"
},
{
"data": "people",
"field": "data.died"
}
]
},
"range": "width",
"round": true
},
{
"name": "y",
"type": "ordinal",
"domain": {
"data": "people",
"field": "data.label"
},
"range": "height"
}
],
"marks": [
{
"type": "text",
"from": {
"data": "events"
},
"properties": {
"enter": {
"text": {
"field": "data.name"
},
"angle": {
"value": -25
},
"font": {
"value": "Helvetica Neue"
},
"fontSize": {
"value": 10
},
"x": {
"field": "data.when",
"scale": "x"
},
"y": {
"value": -10
},
"fill": {
"value": "#000"
}
}
}
},
{
"type": "rect",
"from": {
"data": "events"
},
"properties": {
"enter": {
"x": {
"field": "data.when",
"scale": "x"
},
"width": {
"value": 1
},
"y": {
"value": -8
},
"height": {
"offset": 8,
"group": "height"
},
"fill": {
"value": "#888"
}
}
}
},
{
"type": "text",
"from": {
"data": "people"
},
"properties": {
"enter": {
"text": {
"field": "data.label"
},
"font": {
"value": "Helvetica Neue"
},
"fontSize": {
"value": 10
},
"x": {
"field": "data.born",
"scale": "x"
},
"y": {
"field": "data.label",
"scale": "y",
"offset": -3
},
"fill": {
"value": "#000"
}
}
}
},
{
"type": "rect",
"from": {
"data": "people"
},
"properties": {
"enter": {
"x": {
"field": "data.born",
"scale": "x"
},
"x2": {
"field": "data.died",
"scale": "x"
},
"y": {
"field": "data.label",
"scale": "y"
},
"height": {
"value": 2
},
"fill": {
"value": "#557"
}
}
}
},
{
"type": "rect",
"from": {
"data": "people"
},
"properties": {
"enter": {
"x": {
"field": "data.enter",
"scale": "x"
},
"x2": {
"field": "data.leave",
"scale": "x"
},
"y": {
"field": "data.label",
"scale": "y",
"offset": -1
},
"height": {
"value": 4
},
"fill": {
"value": "#e44"
}
}
}
}
],
"axes": [
{
"type": "x",
"scale": "x"
}
]
}
require 'plotrb'
people = pdata.name('people').url('people.json')
events = pdata.name('events').url('events.json') do
format(:json) { parse 'when' => :date }
end
y_scale = ordinal_scale.name('y').from('people.label').to_height
x_scale = time_scale.name('x').from(['people.born', 'people.died']).to_width.round.in_years
events_mark_t = text_mark.from(events) do
enter do
x_start { scale(x_scale).from('when') }
y_start -10
angle -25
fill '#000'
text { from 'name' }
font 'Helvetica Neue'
font_size 10
end
end
events_mark_r = rect_mark.from(events) do
enter do
x_start { scale(x_scale).from('when') }
y_start -8
width 1
height { group(:height).offset(8) }
fill '#888'
end
end
people_mark_t = text_mark.from(people) do
enter do
x_start { scale(x_scale).from('born') }
y_start { scale(y_scale).from('label').offset(-3) }
fill '#000'
text { from('label') }
font 'Helvetica Neue'
font_size 10
end
end
people_mark_r = rect_mark.from(people) do
enter do
x_start { scale(x_scale).from('born') }
x_end { scale(x_scale).from('died') }
y_start { scale(y_scale).from('label') }
height 2
fill '#557'
end
end
people_mark_r2 = rect_mark.from(people) do
enter do
x_start { scale(x_scale).from('enter') }
x_end { scale(x_scale).from('leave') }
y_start { scale(y_scale).from('label').offset(-1) }
height 4
fill '#e44'
end
end
vis = visualization.name('lifelines').width(600).height(300) do
data people, events
scales x_scale, y_scale
axes x_axis.scale('x')
marks events_mark_t, events_mark_r, people_mark_t, people_mark_r, people_mark_r2
end
puts vis.generate_spec(:pretty)
[
{"label":"Washington", "born":-7506057600000, "died":-5366196000000, "enter":-5701424400000, "leave":-5453884800000},
{"label":"Adams", "born":-7389766800000, "died":-4528285200000, "enter":-5453884800000, "leave":-5327740800000},
{"label":"Jefferson", "born":-7154586000000, "died":-4528285200000, "enter":-5327740800000, "leave":-5075280000000},
{"label":"Madison", "born":-6904544400000, "died":-4213184400000, "enter":-5075280000000, "leave":-4822819200000},
{"label":"Monroe", "born":-6679904400000, "died":-4370518800000, "enter":-4822819200000, "leave":-4570358400000}
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment