Skip to content

Instantly share code, notes, and snippets.

@zuhao
Last active December 23, 2015 16:48
    Show Gist options
    • Select an option

    • Save zuhao/6664107 to your computer and use it in GitHub Desktop.

    Select an option

    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