Published
Edited
Feb 21, 2018
1 fork
2 stars
vl = require("@observablehq/vega-lite@0.0")
values = [
{"a": "C", "b": 2},
{"a": "C", "b": 7},
{"a": "C", "b": 4},
{"a": "D", "b": 1},
{"a": "D", "b": 2},
{"a": "D", "b": 6},
{"a": "E", "b": 8},
{"a": "E", "b": 4},
{"a": "E", "b": 7}
]
data = ({
"data": {
"values": values
}
})
vl({
"data": {
"values": values
},
"mark": "point",
"encoding": {}
})
{ return vl({
"data": {
"values": values
},
"mark": "point",
"encoding": {
"x" : {"field": "a", "type" : "nominal"},
"y" : {"field": "b", "type" : "quantitative"}
}
})}
vl({
"data": {
"values": values
},
"mark": "point",
"encoding": {
"x" : {"field": "a", "type" : "nominal"},
"y" : {"field": "b", "type" : "quantitative", "aggregate": "average"}
}
})
vl({
"data": {
"values": values
},
"mark": "bar",
"encoding": {
"y" : {"field": "a", "type" : "nominal"},
"x" : {"field": "b",
"type" : "quantitative",
"aggregate": "average",
"axis": {"title": "the avg. of b"}
}
}
})
weather_data = d3.csv("https://vega.github.io/vega-lite/data/seattle-weather.csv")
vl({
"data": {
"values": weather_data},
"mark": "tick",
"encoding": {
"x": {
"field": "precipitation",
"type": "quantitative"
}
}
})
vl({
"data": {
"values": weather_data},
"mark": "bar",
"encoding": {
"x": {
"bin": true,
"field": "precipitation",
"type": "quantitative"
},
"y": {
"aggregate": "count",
// "field": "safjsa;f*",
"type": "quantatitive"
}
}
})
vl({
"data": {
"url": "https://vega.github.io/vega-lite/data/seattle-weather.csv"},
"mark": "line",
"encoding": {
"x": {
"timeUnit": "month",
"field": "date",
"type": "temporal"
},
"y": {
"aggregate": "mean",
"field": "precipitation",
"type": "quantitative"
}
}
})
vl({
"data": {"url": "https://vega.github.io/vega-lite/data/seattle-weather.csv"},
"mark": "line",
"encoding": {
"x": {
"axis":{
"title": "Month"
},
"timeUnit": "month",
"field": "date",
"type": "temporal"
},
"y": {
"aggregate": "sum",
"field": "precipitation",
"type": "quantitative"
}
}
}
)
vl({
"data": {
"url": "https://vega.github.io/vega-lite/data/seattle-weather.csv"},
"mark": "line",
"encoding": {
"x": {
"timeUnit": "yearmonth",
"field": "date",
"type": "temporal"
},
"y": {
"aggregate": "max",
"field": "temp_max",
"type": "quantitative"
}
}
})
vl({
"data": {
"url": "https://vega.github.io/vega-lite/data/seattle-weather.csv"},
"mark": "line",
"encoding": {
"x": {
"timeUnit": "year",
"field": "date",
"type": "temporal"
},
"y": {
"aggregate": "mean",
"field": "temp_min",
"type": "quantitative"
}
}
})
vl({
"data": {
"url": "https://vega.github.io/vega-lite/data/seattle-weather.csv"},
"transform": [ {
"calculate": "datum.temp_max - datum.temp_min",
"as": "temp_range"
} ],
"mark": "line",
"encoding": {
"x": {
"timeUnit": "month",
"field": "date",
"type": "temporal"
},
"y": {
"aggregate": "mean",
"field": "temp_range",
"type": "quantitative"
}
}
})
vl({
"data": {
"url": "https://vega.github.io/vega-lite/data/seattle-weather.csv"},
"mark": "bar",
"encoding": {
"x": {
"timeUnit": "month",
"field": "date",
"type": "ordinal"
},
"y": {
"aggregate": "count",
"field": "kdslfjak",
"type": "quantitative"
},
"color": {
"field": "weather",
"type": "nominal"
}
}
})
vl({
"data": {
"url": "https://vega.github.io/vega-lite/data/seattle-weather.csv"},
"mark": "bar",
"encoding": {
"x": {
"timeUnit": "month",
"field": "date",
"type": "ordinal"
},
"y": {
"aggregate": "count",
"field": "kdslfjak",
"type": "quantitative"
},
"color": {
"field": "weather",
"type": "nominal",
"scale": {
"domain": ["sun","fog","drizzle","rain","snow"],
"range": ["#e7ba52","#c7c7c7","#aec7e8","#1f77b4","#9467bd"]
},
"legend": {"title": "Weather type"}
}
}
})
vl({
"data": {"url": "https://vega.github.io/vega-lite/data/cars.json"},
"vconcat": [
{
"selection": {
"brush": {"type": "interval"}
},
"mark": "point",
"encoding": {
"x": {"field": "Horsepower","type": "quantitative"},
"y": {"field": "Miles_per_Gallon","type": "quantitative"}
}
}, {
"transform": [
{"filter": {"selection": "brush"}}
],
"mark": "point",
"encoding": {
"x": {
"field": "Acceleration", "type": "quantitative",
"scale": {"domain": [0,25]}
},
"y": {
"field": "Displacement","type": "quantitative",
"scale": {"domain": [0, 500]}
}
}
}]
})
vl({
"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
"data": {"url": "https://vega.github.io/vega-lite/data/cars.json"},
"width": 300,
"height": 200,
"selection": {
"alex": {
"type": "interval",
"on": "[mousedown[!event.shiftKey], mouseup] > mousemove",
"translate": "[mousedown[!event.shiftKey], mouseup] > mousemove",
"encodings": [
"x",
"y"
],
"zoom": "wheel!",
"mark": {
"fill": "#333",
"fillOpacity": 0.125,
"stroke": "white"
},
"resolve": "global"
},
"morgan": {
"type": "interval",
"on": "[mousedown[event.shiftKey], mouseup] > mousemove",
"translate": "[mousedown[event.shiftKey], mouseup] > mousemove",
"mark": {
"fill": "#fdbb84",
"fillOpacity": 0.5,
"stroke": "#e34a33"
},
"encodings": [
"x",
"y"
],
"zoom": "wheel!",
"resolve": "global"
}
},
"mark": "rect",
"encoding": {
"y": {
"field": "Origin",
"type": "ordinal"
},
"x": {
"field": "Cylinders",
"type": "ordinal"
},
"color": {
"condition": {
"selection": {
"and": [
"alex",
"morgan"
]
},
"aggregate": "count",
"field": "*",
"type": "quantitative"
},
"value": "grey"
}
}
})
vl({
"data": {
"values": [
{"task": "A","start": 1, "end": 3},
{"task": "B","start": 3, "end": 8},
{"task": "C","start": 8, "end": 10}
]
},
"mark": "bar",
"encoding": {
"y": {"field": "task", "type": "ordinal"},
"x": {"field": "start", "type": "quantitative"},
"x2": {"field": "end", "type": "quantitative"}
}
})
d3 = require("https://d3js.org/d3.v5.min.js")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
