import mermaid from 'https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.2.3/mermaid.esm.min.mjs'; mermaid.initialize({ startOnLoad: true });
from jyquickhelper import add_notebook_menu
add_notebook_menu()
Javascript needs to be installed for Jupyter.
pip install jupyter pandas vega
jupyter nbextension install --py vega
jupyter nbextension enable vega --py
from vega import Vega
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"}
},
"hover": { "fill": {"value": "red"} } } } ] })
from vega import VegaLite
import json
from io import StringIO
d = json.load(StringIO("""
{
"data": {"url": "https://vega.github.io/vega-editor/app/data/unemployment-across-industries.json"},
"mark": "area",
"encoding": {
"x": {
"timeUnit": "yearmonth", "field": "date", "type": "temporal",
"scale": {"nice": "month"},
"axis": {"axisWidth": 0, "format": "%Y", "labelAngle": 0, "tickSize": 0}
},
"y": {
"aggregate": "sum", "field": "count","type": "quantitative",
"axis": false
},
"color": {"field":"series", "type":"nominal", "scale":{"range": "category20b"}}
},
"config": {"cell": {"width": 300, "height": 200}, "mark": {"stacked": "center"}}
}
"""))
VegaLite(d)