Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Altair: Declarative Visualization in Python (DSE Summit 2016)

Altair: Declarative Visualization in Python (DSE Summit 2016)

In this lightning talk, I give a quick tour and motivation for Altair, the Python library for declarative statistical visualization based on Vega-Lite. http://altair-viz.github.io/

Jake VanderPlas

October 26, 2016
Tweet

More Decks by Jake VanderPlas

Other Decks in Technology

Transcript

  1. #JSM2016
    Jake VanderPlas
    Altair: Declarative
    Visualization in Python
    Jake VanderPlas @jakevdp
    Oct 26, 2016

    View full-size slide

  2. #JSM2016
    Jake VanderPlas
    D3 is Everywhere . . .
    (click for live version)

    View full-size slide

  3. #JSM2016
    Jake VanderPlas
    But working in D3 can
    be challenging . . .

    View full-size slide

  4. #JSM2016
    Jake VanderPlas
    Bar Chart: d3
    var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
    var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1);
    var y = d3.scale.linear()
    .range([height, 0]);
    var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");
    var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .ticks(10, "%");
    var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    d3.tsv("data.tsv", type, function(error, data) {
    if (error) throw error;
    x.domain(data.map(function(d) { return d.letter; }));
    y.domain([0, d3.max(data, function(d) { return d.frequency; })]);
    svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);
    svg.append("g")
    .attr("class", "y axis")
    .call(yAxis)
    .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .text("Frequency");
    svg.selectAll(".bar")
    .data(data)
    .enter().append("rect")
    .attr("class", "bar")
    .attr("x", function(d) { return x(d.letter); })
    .attr("width", x.rangeBand())
    .attr("y", function(d) { return y(d.frequency); })
    .attr("height", function(d) { return height - y(d.frequency); });
    });
    function type(d) {
    d.frequency = +d.frequency;
    return d;
    }
    D3 is a Javascript package that
    streamlines manipulation of
    objects on a webpage.

    View full-size slide

  5. #JSM2016
    Jake VanderPlas
    Bar Chart: Vega
    {
    "width": 400,
    "height": 200,
    "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": [
    {
    "name": "x",
    "type": "ordinal",
    "range": "width",
    "domain": {"data": "table", "field": "x"}
    },
    {
    "name": "y",
    "type": "linear",
    "range": "height",
    "domain": {"data": "table", "field": "y"},
    "nice": true
    }
    ],
    "axes": [
    {"type": "x", "scale": "x"},
    {"type": "y", "scale": "y"}
    ],
    "marks": [
    {
    "type": "rect",
    "from": {"data": "table"},
    "properties": {
    "enter": {
    "x": {"scale": "x", "field": "x"},
    "width": {"scale": "x", "band": true, "offset": -1},
    "y": {"scale": "y", "field": "y"},
    "y2": {"scale": "y", "value": 0}
    },
    "update": {
    "fill": {"value": "steelblue"}
    Vega is a detailed declarative
    specification for visualizations,
    built on D3.

    View full-size slide

  6. #JSM2016
    Jake VanderPlas
    Bar Chart: Vega-Lite
    {
    "description": "A simple bar chart with embedded data.",
    "data": {
    "values": [
    {"a": "A","b": 28}, {"a": "B","b": 55}, {"a": "C","b": 43},
    {"a": "D","b": 91}, {"a": "E","b": 81}, {"a": "F","b": 53},
    {"a": "G","b": 19}, {"a": "H","b": 87}, {"a": "I","b": 52}
    ]
    },
    "mark": "bar",
    "encoding": {
    "x": {"field": "a", "type": "ordinal"},
    "y": {"field": "b", "type": "quantitative"}
    }
    }
    Vega-Lite is a simpler
    declarative specification aimed
    at statistical visualization.

    View full-size slide

  7. #JSM2016
    Jake VanderPlas
    Bar Chart: Altair
    Altair is a Python API for creating
    Vega-Lite specifications.

    View full-size slide

  8. #JSM2016
    Jake VanderPlas
    Altair
    Declarative statistical visualization library for Python,
    driven by Vega-Lite
    http://altair-viz.github.io/
    Collaboration between Brian Granger (Jupyter team),
    myself, and UW’s Interactive Data Lab

    View full-size slide

  9. #JSM2016
    Jake VanderPlas
    Example: Cars Dataset
    Altair works seamlessly with Pandas
    dataframes, a standard data format in Python

    View full-size slide

  10. #JSM2016
    Jake VanderPlas
    Example: Cars Dataset
    Specify mappings
    from visual
    components to
    data columns

    View full-size slide

  11. #JSM2016
    Jake VanderPlas
    Key feature: Altair provides a
    Declarative API
    Declarative
    - Specify What should be
    done
    - Details determined
    automatically
    - Separates Specification
    from Execution
    Imperative
    - Specify How something
    should be done.
    - Must manually specify
    plotting steps
    - Specification &
    Execution intertwined.
    Declarative visualization lets you think about data
    and relationships, rather than incidental details.

    View full-size slide

  12. #JSM2016
    Jake VanderPlas
    Matplotlib is an imperative API:
    Specify details of
    how to build the
    visualization

    View full-size slide

  13. #JSM2016
    Jake VanderPlas
    Altair is a declarative API:
    Specify what
    quantities should
    be mapped to
    each visual
    encoding

    View full-size slide

  14. #JSM2016
    Jake VanderPlas
    But why another plotting library?
    Teaching: students can learn
    visualization concepts with minimal
    syntactic distraction.
    Publishing: Instead of publishing
    pixels, can publish data + plot
    specification for greater flexibility &
    reproducibility.
    Cross-Pollenation: Vega-Lite has the
    potential to provide a cross-platform
    lingua franca of statistical visualization.
    - Matplotlib
    - Bokeh
    - Plotly
    - Seaborn
    - Holoviews
    - VisPy
    - ggplot
    - pandas plot
    - Lightning

    View full-size slide

  15. #JSM2016
    Jake VanderPlas
    Altair/Vega-Lite supports many plot types:

    View full-size slide

  16. #JSM2016
    Jake VanderPlas
    Altair/Vega-Lite supports many plot types:

    View full-size slide

  17. #JSM2016
    Jake VanderPlas
    Altair/Vega-Lite supports many plot types:

    View full-size slide

  18. #JSM2016
    Jake VanderPlas
    Altair/Vega-Lite supports many plot types:

    View full-size slide

  19. #JSM2016
    Jake VanderPlas
    Altair/Vega-Lite supports many plot types:

    View full-size slide

  20. #JSM2016
    Jake VanderPlas
    Altair/Vega-Lite supports many plot types:

    View full-size slide

  21. #JSM2016
    Jake VanderPlas
    (Visualizations from
    jakevdp/altair-examples).

    View full-size slide

  22. #JSM2016
    Jake VanderPlas
    or
    $ conda install altair --channel conda-forge
    $ pip install altair
    $ jupyter nbextension install --sys-prefix --py vega
    Try Altair:
    Website: http://altair-viz.github.io/
    For a Jupyter notebook tutorial, type
    import altair
    altair.tutorial()

    View full-size slide

  23. #JSM2016
    Jake VanderPlas
    Email: [email protected]
    Twitter: @jakevdp
    Github: jakevdp
    Web: http://vanderplas.com
    Blog: http://jakevdp.github.io
    Thank You!

    View full-size slide

  24. #JSM2016
    Jake VanderPlas

    View full-size slide

  25. #JSM2016
    Jake VanderPlas
    Altair is a declarative API:
    Altair’s creates validated
    Vega-Lite specifications:
    - Portable JSON serialization (Vega-Lite spec)
    - Interest from other viz libraries (matplotlib,
    Bokeh, Plotly) in supporting this serialization.
    - Potential for cross-language compatibility

    View full-size slide

  26. #JSM2016
    Jake VanderPlas
    Vega-Lite schema is well-defined; allows
    round-trip between spec and code:

    View full-size slide