PyData Amsterdam 2018 – Building customer-visible data science dashboards with Altair / Vega / Vue

Uwe Korn
Uwe KornML / Data Engineer
1
PyData Amsterdam 2018
Uwe L. Korn
Building customer-visible data science
dashboards with Altair / Vega / Vue
2
• Senior Data Scientist at Blue Yonder
(@BlueYonderTech)
• Apache {Arrow, Parquet} PMC
• Work in Python, C++11 and SQL
• Data Engineer and Architect with heavy
focus around Pandas
About me
xhochy
mail@uwekorn.com
3
1. Use Case
2. Conflict of interests
3. The nice compromise
4. Technical dive-in
Agenda
4
Photo by Kari Shea on Unsplash
5
Why do we need dashboards?
• Present output of your machine learning models
• Make insights available to non-technical users
• Repetitive tasks can also be done much faster, even for tech-savy folks
• „You cannot give your customer just an API“
6
So, have you seen Bokeh?
from bokeh.io import curdoc
from bokeh.layouts import column
from bokeh.models.widgets import TextInput, Button, Paragraph
# create some widgets
button = Button(label="Say HI")
input = TextInput(value="Bokeh")
output = Paragraph()
# add a callback to a widget
def update():
output.text = "Hello, " + input.value
button.on_click(update)
# create a layout for everything
layout = column(button, input, output)
# add the layout to curdoc
curdoc().add_root(layout)
7
Why didn’t we use it?
• It’s really great but…
• It provides an environment to write dashboards in purely Python
• Our frontend devs work in JavaScript et al.
• Bokeh(js) introduces its own dependencies on the frontend
• Building dashboards just for you or your data science team? Use it!
8
What do these UI developers want?
• Work with their native toolchain, i.e. JavaScript, CSS, … not Python
• Choose dependencies freely
• Don’t be constrained by the backend
• Custom widgets should be a concern of the frontend
9
Vega and Vega-lite
Vega is a declarative format for creating,
saving, and sharing visualization
designs. With Vega, visualizations are
described in JSON, …
Vega-Lite is a more high-level version of
this grammar approach.
https://vega.github.io/
10
VueJS for the frontend
• Vega is for visualizations, we also need widgets
• Could be substituted by ReactJS / Angular / …
• provides reactive and composable view
components
• Basics can be learned without deep frontend
knowlegde
Demo11
12
Vega(-lite) specs in Python
from flask import Flask, jsonify
app = Flask(__name__)
@app.route("/barchart.json")
def barchart():
return jsonify({
"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
"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"}
}
}
13
Altair
import altair as alt
import pandas as pd
df = pd.DataFrame({
'a': ["A", "B", "C", "D", "E", "F", "G", "H", "I"],
'b': [28, 55, 43, 91, 81, 53, 19, 87, 52]
})
alt.Chart(df).mark_bar().encode(
x='a',
y='b',
)
Code14
15
app = Flask(__name__)
cars = vega_datasets.data.cars()
@app.route("/vega-example")
def hello():
columns = [
…
]
chart = alt.Chart(cars).mark_point().encode(
x=random.choice(columns),
y=random.choice(columns)
)
return jsonify(chart.to_dict())
app.py
16
HelloWorld.vue (I/II)
<script>
import {default as vegaEmbed} from 'vega-embed'
export default {
methods: {
reloadImage () {
fetch('/vega-example').then(response => {
response.json().then(spec => {
vegaEmbed('#vega-box', spec, {actions: false})
})
})
}
}
}
</script>
17
HelloWorld.vue (II/II)
<template>
<v-container fluid>
<v-slide-y-transition mode="out-in">
<v-layout column align-center>
<v-btn @click.native="reloadImage()">Reload</v-btn>
<div id="vega-box"></div>
</v-layout>
</v-slide-y-transition>
</v-container>
</template>
18
https://github.com/xhochy/altair-vue-vega-example
19
Altair Basics
Some really simple basics, for more see https://github.com/altair-viz/
altair-tutorial
from vega_datasets import data
import altair as alt
cars = data.cars()
20
alt.Chart(cars).mark_point()
21
alt.Chart(cars).mark_point().encode(
x='Miles_per_Gallon'
)
22
alt.Chart(cars).mark_tick().encode(
x='Miles_per_Gallon'
)
23
alt.Chart(cars).mark_point().encode(
x='Miles_per_Gallon'
)
24
alt.Chart(cars).mark_point().encode(
x='Miles_per_Gallon',
y='Horsepower'
)
25
alt.Chart(cars).mark_point().encode(
x='Miles_per_Gallon',
y='Horsepower',
color='Origin'
)
26
Summary
• Chose technologies that make all involved happy
• Talk to each other
• Tools that work good for you, might not work for your team
• Altair is a great visualization library
• Use it in UIs
• Use it in Jupyter Notebooks
27
By JOEXX (Own work) [CC BY-SA 3.0 (http://creativecommons.org/licenses/by-sa/3.0)], via Wikimedia Commons
By JOEXX (Own work) [CC BY-SA 3.0 (http://creativecommons.org/licenses/by-sa/3.0)], via Wikimedia Commons
24. - 26. October
+ 2 days of sprints (27/28.10.)
ZKM Karlsruhe, DEKarlsruhe
Call for Participation opens next week.
28
Karlsruhe
24. - 26. October
ZKM Karlsruhe
+ 2 days of sprints (27/28.10.)
Conference all in English language.
More info:
http://pycon.de
Wed Fri
Call for Proposals OPEN!
Tickets soon.
29
I’m Uwe Korn
Twitter: @xhochy
https://github.com/xhochy
Thank you!
1 of 29

Recommended

Computer Engineering (Programming Language: Swift) by
Computer Engineering (Programming Language: Swift)Computer Engineering (Programming Language: Swift)
Computer Engineering (Programming Language: Swift)Sethmi Kachchakaduge
279 views15 slides
The present and the future of functional programming in c++ by
The present and the future of functional programming in c++The present and the future of functional programming in c++
The present and the future of functional programming in c++Alexander Granin
343 views125 slides
Monadic parsers in C++ by
Monadic parsers in C++Monadic parsers in C++
Monadic parsers in C++Alexander Granin
579 views58 slides
GDG Mediterranean Dev Fest Code lab #DevFestMed15 da android ad android wear ... by
GDG Mediterranean Dev Fest Code lab #DevFestMed15 da android ad android wear ...GDG Mediterranean Dev Fest Code lab #DevFestMed15 da android ad android wear ...
GDG Mediterranean Dev Fest Code lab #DevFestMed15 da android ad android wear ...Bruno Salvatore Belluccia
284 views50 slides
E.D.D.I - Open Source Chatbot Platform by
E.D.D.I - Open Source Chatbot PlatformE.D.D.I - Open Source Chatbot Platform
E.D.D.I - Open Source Chatbot PlatformGregor Jarisch
906 views40 slides
Architecture for scalable Angular applications (with introduction and extende... by
Architecture for scalable Angular applications (with introduction and extende...Architecture for scalable Angular applications (with introduction and extende...
Architecture for scalable Angular applications (with introduction and extende...Paweł Żurowski
1.1K views104 slides

More Related Content

Similar to PyData Amsterdam 2018 – Building customer-visible data science dashboards with Altair / Vega / Vue

Creating sub zero dashboard plugin for apex with google by
Creating sub zero dashboard plugin for apex with googleCreating sub zero dashboard plugin for apex with google
Creating sub zero dashboard plugin for apex with googleRoel Hartman
2.8K views41 slides
Ehsan parallel accelerator-dec2015 by
Ehsan parallel accelerator-dec2015Ehsan parallel accelerator-dec2015
Ehsan parallel accelerator-dec2015Christian Peel
2.2K views31 slides
Crafting Evolvable Api Responses by
Crafting Evolvable Api ResponsesCrafting Evolvable Api Responses
Crafting Evolvable Api Responsesdarrelmiller71
7.6K views36 slides
InterConnect2016: WebApp Architectures with Java and Node.js by
InterConnect2016: WebApp Architectures with Java and Node.jsInterConnect2016: WebApp Architectures with Java and Node.js
InterConnect2016: WebApp Architectures with Java and Node.jsChris Bailey
1K views115 slides
The Present and Future of the Web Platform by
The Present and Future of the Web PlatformThe Present and Future of the Web Platform
The Present and Future of the Web PlatformC4Media
917 views43 slides
Cloud Endpoints _Polymer_ Material design by Martin Görner by
Cloud Endpoints_Polymer_Material design by Martin GörnerCloud Endpoints_Polymer_Material design by Martin Görner
Cloud Endpoints _Polymer_ Material design by Martin GörnerEuropean Innovation Academy
2.9K views25 slides

Similar to PyData Amsterdam 2018 – Building customer-visible data science dashboards with Altair / Vega / Vue(20)

Creating sub zero dashboard plugin for apex with google by Roel Hartman
Creating sub zero dashboard plugin for apex with googleCreating sub zero dashboard plugin for apex with google
Creating sub zero dashboard plugin for apex with google
Roel Hartman2.8K views
Ehsan parallel accelerator-dec2015 by Christian Peel
Ehsan parallel accelerator-dec2015Ehsan parallel accelerator-dec2015
Ehsan parallel accelerator-dec2015
Christian Peel2.2K views
Crafting Evolvable Api Responses by darrelmiller71
Crafting Evolvable Api ResponsesCrafting Evolvable Api Responses
Crafting Evolvable Api Responses
darrelmiller717.6K views
InterConnect2016: WebApp Architectures with Java and Node.js by Chris Bailey
InterConnect2016: WebApp Architectures with Java and Node.jsInterConnect2016: WebApp Architectures with Java and Node.js
InterConnect2016: WebApp Architectures with Java and Node.js
Chris Bailey1K views
The Present and Future of the Web Platform by C4Media
The Present and Future of the Web PlatformThe Present and Future of the Web Platform
The Present and Future of the Web Platform
C4Media917 views
"The OpenCV Open Source Computer Vision Library: Latest Developments," a Pres... by Edge AI and Vision Alliance
"The OpenCV Open Source Computer Vision Library: Latest Developments," a Pres..."The OpenCV Open Source Computer Vision Library: Latest Developments," a Pres...
"The OpenCV Open Source Computer Vision Library: Latest Developments," a Pres...
generate IP CORES by guest296013
generate IP CORESgenerate IP CORES
generate IP CORES
guest2960134.4K views
GR8Conf 2009: Industrial Strength Groovy by Paul King by GR8Conf
GR8Conf 2009: Industrial Strength Groovy by Paul KingGR8Conf 2009: Industrial Strength Groovy by Paul King
GR8Conf 2009: Industrial Strength Groovy by Paul King
GR8Conf591 views
Introduction to interactive data visualisation using R Shiny by anamarisaguedes
Introduction to interactive data visualisation using R ShinyIntroduction to interactive data visualisation using R Shiny
Introduction to interactive data visualisation using R Shiny
anamarisaguedes186 views
What to expect from Java 9 by Ivan Krylov
What to expect from Java 9What to expect from Java 9
What to expect from Java 9
Ivan Krylov717 views
Azure for SharePoint Developers - Workshop - Part 2: Azure Functions by Bob German
Azure for SharePoint Developers - Workshop - Part 2: Azure FunctionsAzure for SharePoint Developers - Workshop - Part 2: Azure Functions
Azure for SharePoint Developers - Workshop - Part 2: Azure Functions
Bob German116 views
Kotlin: Why Do You Care? by intelliyole
Kotlin: Why Do You Care?Kotlin: Why Do You Care?
Kotlin: Why Do You Care?
intelliyole5.4K views
Running Trusted Payload with Nomad and Waypoint by Bram Vogelaar
Running Trusted Payload with Nomad and WaypointRunning Trusted Payload with Nomad and Waypoint
Running Trusted Payload with Nomad and Waypoint
Bram Vogelaar28 views
Everything You Should Know About the New Angular CLI by Amadou Sall
Everything You Should Know About the New Angular CLIEverything You Should Know About the New Angular CLI
Everything You Should Know About the New Angular CLI
Amadou Sall697 views

More from Uwe Korn

pandas.(to/from)_sql is simple but not fast by
pandas.(to/from)_sql is simple but not fastpandas.(to/from)_sql is simple but not fast
pandas.(to/from)_sql is simple but not fastUwe Korn
278 views35 slides
PyData Frankfurt - (Efficient) Data Exchange with "Foreign" Ecosystems by
PyData Frankfurt - (Efficient) Data Exchange with "Foreign" EcosystemsPyData Frankfurt - (Efficient) Data Exchange with "Foreign" Ecosystems
PyData Frankfurt - (Efficient) Data Exchange with "Foreign" EcosystemsUwe Korn
422 views35 slides
Berlin Buzzwords 2019 - Taming the language border in data analytics and scie... by
Berlin Buzzwords 2019 - Taming the language border in data analytics and scie...Berlin Buzzwords 2019 - Taming the language border in data analytics and scie...
Berlin Buzzwords 2019 - Taming the language border in data analytics and scie...Uwe Korn
757 views18 slides
PyConDE / PyData Karlsruhe 2017 – Connecting PyData to other Big Data Landsca... by
PyConDE / PyData Karlsruhe 2017 – Connecting PyData to other Big Data Landsca...PyConDE / PyData Karlsruhe 2017 – Connecting PyData to other Big Data Landsca...
PyConDE / PyData Karlsruhe 2017 – Connecting PyData to other Big Data Landsca...Uwe Korn
407 views28 slides
ApacheCon Europe Big Data 2016 – Parquet in practice & detail by
ApacheCon Europe Big Data 2016 – Parquet in practice & detailApacheCon Europe Big Data 2016 – Parquet in practice & detail
ApacheCon Europe Big Data 2016 – Parquet in practice & detailUwe Korn
986 views22 slides
Fulfilling Apache Arrow's Promises: Pandas on JVM memory without a copy by
Fulfilling Apache Arrow's Promises: Pandas on JVM memory without a copyFulfilling Apache Arrow's Promises: Pandas on JVM memory without a copy
Fulfilling Apache Arrow's Promises: Pandas on JVM memory without a copyUwe Korn
1.7K views22 slides

More from Uwe Korn(10)

pandas.(to/from)_sql is simple but not fast by Uwe Korn
pandas.(to/from)_sql is simple but not fastpandas.(to/from)_sql is simple but not fast
pandas.(to/from)_sql is simple but not fast
Uwe Korn278 views
PyData Frankfurt - (Efficient) Data Exchange with "Foreign" Ecosystems by Uwe Korn
PyData Frankfurt - (Efficient) Data Exchange with "Foreign" EcosystemsPyData Frankfurt - (Efficient) Data Exchange with "Foreign" Ecosystems
PyData Frankfurt - (Efficient) Data Exchange with "Foreign" Ecosystems
Uwe Korn422 views
Berlin Buzzwords 2019 - Taming the language border in data analytics and scie... by Uwe Korn
Berlin Buzzwords 2019 - Taming the language border in data analytics and scie...Berlin Buzzwords 2019 - Taming the language border in data analytics and scie...
Berlin Buzzwords 2019 - Taming the language border in data analytics and scie...
Uwe Korn757 views
PyConDE / PyData Karlsruhe 2017 – Connecting PyData to other Big Data Landsca... by Uwe Korn
PyConDE / PyData Karlsruhe 2017 – Connecting PyData to other Big Data Landsca...PyConDE / PyData Karlsruhe 2017 – Connecting PyData to other Big Data Landsca...
PyConDE / PyData Karlsruhe 2017 – Connecting PyData to other Big Data Landsca...
Uwe Korn407 views
ApacheCon Europe Big Data 2016 – Parquet in practice & detail by Uwe Korn
ApacheCon Europe Big Data 2016 – Parquet in practice & detailApacheCon Europe Big Data 2016 – Parquet in practice & detail
ApacheCon Europe Big Data 2016 – Parquet in practice & detail
Uwe Korn986 views
Fulfilling Apache Arrow's Promises: Pandas on JVM memory without a copy by Uwe Korn
Fulfilling Apache Arrow's Promises: Pandas on JVM memory without a copyFulfilling Apache Arrow's Promises: Pandas on JVM memory without a copy
Fulfilling Apache Arrow's Promises: Pandas on JVM memory without a copy
Uwe Korn1.7K views
Scalable Scientific Computing with Dask by Uwe Korn
Scalable Scientific Computing with DaskScalable Scientific Computing with Dask
Scalable Scientific Computing with Dask
Uwe Korn743 views
Extending Pandas using Apache Arrow and Numba by Uwe Korn
Extending Pandas using Apache Arrow and NumbaExtending Pandas using Apache Arrow and Numba
Extending Pandas using Apache Arrow and Numba
Uwe Korn5.5K views
PyData London 2017 – Efficient and portable DataFrame storage with Apache Par... by Uwe Korn
PyData London 2017 – Efficient and portable DataFrame storage with Apache Par...PyData London 2017 – Efficient and portable DataFrame storage with Apache Par...
PyData London 2017 – Efficient and portable DataFrame storage with Apache Par...
Uwe Korn1.4K views
How Apache Arrow and Parquet boost cross-language interoperability by Uwe Korn
How Apache Arrow and Parquet boost cross-language interoperabilityHow Apache Arrow and Parquet boost cross-language interoperability
How Apache Arrow and Parquet boost cross-language interoperability
Uwe Korn2.9K views

Recently uploaded

PyData Global 2022 - Things I learned while running neural networks on microc... by
PyData Global 2022 - Things I learned while running neural networks on microc...PyData Global 2022 - Things I learned while running neural networks on microc...
PyData Global 2022 - Things I learned while running neural networks on microc...SARADINDU SENGUPTA
5 views12 slides
Games, Queries, and Argumentation Frameworks: Time for a Family Reunion by
Games, Queries, and Argumentation Frameworks: Time for a Family ReunionGames, Queries, and Argumentation Frameworks: Time for a Family Reunion
Games, Queries, and Argumentation Frameworks: Time for a Family ReunionBertram Ludäscher
9 views37 slides
CRM stick or twist workshop by
CRM stick or twist workshopCRM stick or twist workshop
CRM stick or twist workshopinfo828217
14 views16 slides
Inawsidom - Data Journey by
Inawsidom - Data JourneyInawsidom - Data Journey
Inawsidom - Data JourneyPhilipBasford
9 views38 slides
Inawisdom Quick Sight by
Inawisdom Quick SightInawisdom Quick Sight
Inawisdom Quick SightPhilipBasford
8 views27 slides
Product Research sample.pdf by
Product Research sample.pdfProduct Research sample.pdf
Product Research sample.pdfAllenSingson
35 views29 slides

Recently uploaded(20)

PyData Global 2022 - Things I learned while running neural networks on microc... by SARADINDU SENGUPTA
PyData Global 2022 - Things I learned while running neural networks on microc...PyData Global 2022 - Things I learned while running neural networks on microc...
PyData Global 2022 - Things I learned while running neural networks on microc...
Games, Queries, and Argumentation Frameworks: Time for a Family Reunion by Bertram Ludäscher
Games, Queries, and Argumentation Frameworks: Time for a Family ReunionGames, Queries, and Argumentation Frameworks: Time for a Family Reunion
Games, Queries, and Argumentation Frameworks: Time for a Family Reunion
CRM stick or twist workshop by info828217
CRM stick or twist workshopCRM stick or twist workshop
CRM stick or twist workshop
info82821714 views
Product Research sample.pdf by AllenSingson
Product Research sample.pdfProduct Research sample.pdf
Product Research sample.pdf
AllenSingson35 views
DGST Methodology Presentation.pdf by maddierlegum
DGST Methodology Presentation.pdfDGST Methodology Presentation.pdf
DGST Methodology Presentation.pdf
maddierlegum7 views
Pydata Global 2023 - How can a learnt model unlearn something by SARADINDU SENGUPTA
Pydata Global 2023 - How can a learnt model unlearn somethingPydata Global 2023 - How can a learnt model unlearn something
Pydata Global 2023 - How can a learnt model unlearn something
Best Home Security Systems.pptx by mogalang
Best Home Security Systems.pptxBest Home Security Systems.pptx
Best Home Security Systems.pptx
mogalang9 views
Listed Instruments Survey 2022.pptx by secretariat4
Listed Instruments Survey  2022.pptxListed Instruments Survey  2022.pptx
Listed Instruments Survey 2022.pptx
secretariat4130 views
Dr. Ousmane Badiane-2023 ReSAKSS Conference by AKADEMIYA2063
Dr. Ousmane Badiane-2023 ReSAKSS ConferenceDr. Ousmane Badiane-2023 ReSAKSS Conference
Dr. Ousmane Badiane-2023 ReSAKSS Conference
AKADEMIYA20635 views
AZConf 2023 - Considerations for LLMOps: Running LLMs in production by SARADINDU SENGUPTA
AZConf 2023 - Considerations for LLMOps: Running LLMs in productionAZConf 2023 - Considerations for LLMOps: Running LLMs in production
AZConf 2023 - Considerations for LLMOps: Running LLMs in production
GDG Cloud Community Day 2022 - Managing data quality in Machine Learning by SARADINDU SENGUPTA
GDG Cloud Community Day 2022 -  Managing data quality in Machine LearningGDG Cloud Community Day 2022 -  Managing data quality in Machine Learning
GDG Cloud Community Day 2022 - Managing data quality in Machine Learning
Data about the sector workshop by info828217
Data about the sector workshopData about the sector workshop
Data about the sector workshop
info82821729 views
6498-Butun_Beyinli_Cocuq-Daniel_J.Siegel-Tina_Payne_Bryson-2011-259s.pdf by 10urkyr34
6498-Butun_Beyinli_Cocuq-Daniel_J.Siegel-Tina_Payne_Bryson-2011-259s.pdf6498-Butun_Beyinli_Cocuq-Daniel_J.Siegel-Tina_Payne_Bryson-2011-259s.pdf
6498-Butun_Beyinli_Cocuq-Daniel_J.Siegel-Tina_Payne_Bryson-2011-259s.pdf
10urkyr347 views

PyData Amsterdam 2018 – Building customer-visible data science dashboards with Altair / Vega / Vue

  • 1. 1 PyData Amsterdam 2018 Uwe L. Korn Building customer-visible data science dashboards with Altair / Vega / Vue
  • 2. 2 • Senior Data Scientist at Blue Yonder (@BlueYonderTech) • Apache {Arrow, Parquet} PMC • Work in Python, C++11 and SQL • Data Engineer and Architect with heavy focus around Pandas About me xhochy mail@uwekorn.com
  • 3. 3 1. Use Case 2. Conflict of interests 3. The nice compromise 4. Technical dive-in Agenda
  • 5. 5 Why do we need dashboards? • Present output of your machine learning models • Make insights available to non-technical users • Repetitive tasks can also be done much faster, even for tech-savy folks • „You cannot give your customer just an API“
  • 6. 6 So, have you seen Bokeh? from bokeh.io import curdoc from bokeh.layouts import column from bokeh.models.widgets import TextInput, Button, Paragraph # create some widgets button = Button(label="Say HI") input = TextInput(value="Bokeh") output = Paragraph() # add a callback to a widget def update(): output.text = "Hello, " + input.value button.on_click(update) # create a layout for everything layout = column(button, input, output) # add the layout to curdoc curdoc().add_root(layout)
  • 7. 7 Why didn’t we use it? • It’s really great but… • It provides an environment to write dashboards in purely Python • Our frontend devs work in JavaScript et al. • Bokeh(js) introduces its own dependencies on the frontend • Building dashboards just for you or your data science team? Use it!
  • 8. 8 What do these UI developers want? • Work with their native toolchain, i.e. JavaScript, CSS, … not Python • Choose dependencies freely • Don’t be constrained by the backend • Custom widgets should be a concern of the frontend
  • 9. 9 Vega and Vega-lite Vega is a declarative format for creating, saving, and sharing visualization designs. With Vega, visualizations are described in JSON, … Vega-Lite is a more high-level version of this grammar approach. https://vega.github.io/
  • 10. 10 VueJS for the frontend • Vega is for visualizations, we also need widgets • Could be substituted by ReactJS / Angular / … • provides reactive and composable view components • Basics can be learned without deep frontend knowlegde
  • 12. 12 Vega(-lite) specs in Python from flask import Flask, jsonify app = Flask(__name__) @app.route("/barchart.json") def barchart(): return jsonify({ "$schema": "https://vega.github.io/schema/vega-lite/v2.json", "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"} } }
  • 13. 13 Altair import altair as alt import pandas as pd df = pd.DataFrame({ 'a': ["A", "B", "C", "D", "E", "F", "G", "H", "I"], 'b': [28, 55, 43, 91, 81, 53, 19, 87, 52] }) alt.Chart(df).mark_bar().encode( x='a', y='b', )
  • 15. 15 app = Flask(__name__) cars = vega_datasets.data.cars() @app.route("/vega-example") def hello(): columns = [ … ] chart = alt.Chart(cars).mark_point().encode( x=random.choice(columns), y=random.choice(columns) ) return jsonify(chart.to_dict()) app.py
  • 16. 16 HelloWorld.vue (I/II) <script> import {default as vegaEmbed} from 'vega-embed' export default { methods: { reloadImage () { fetch('/vega-example').then(response => { response.json().then(spec => { vegaEmbed('#vega-box', spec, {actions: false}) }) }) } } } </script>
  • 17. 17 HelloWorld.vue (II/II) <template> <v-container fluid> <v-slide-y-transition mode="out-in"> <v-layout column align-center> <v-btn @click.native="reloadImage()">Reload</v-btn> <div id="vega-box"></div> </v-layout> </v-slide-y-transition> </v-container> </template>
  • 19. 19 Altair Basics Some really simple basics, for more see https://github.com/altair-viz/ altair-tutorial from vega_datasets import data import altair as alt cars = data.cars()
  • 26. 26 Summary • Chose technologies that make all involved happy • Talk to each other • Tools that work good for you, might not work for your team • Altair is a great visualization library • Use it in UIs • Use it in Jupyter Notebooks
  • 27. 27 By JOEXX (Own work) [CC BY-SA 3.0 (http://creativecommons.org/licenses/by-sa/3.0)], via Wikimedia Commons By JOEXX (Own work) [CC BY-SA 3.0 (http://creativecommons.org/licenses/by-sa/3.0)], via Wikimedia Commons 24. - 26. October + 2 days of sprints (27/28.10.) ZKM Karlsruhe, DEKarlsruhe Call for Participation opens next week.
  • 28. 28 Karlsruhe 24. - 26. October ZKM Karlsruhe + 2 days of sprints (27/28.10.) Conference all in English language. More info: http://pycon.de Wed Fri Call for Proposals OPEN! Tickets soon.
  • 29. 29 I’m Uwe Korn Twitter: @xhochy https://github.com/xhochy Thank you!