Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
data = d3.csv("https://vega.github.io/vega-lite/data/seattle-weather.csv")
vegalite({
data: {values: data},
mark: "tick",
encoding: {
x: {field: "precipitation", type: "quantitative"}
}
})
vegalite({
data: {values: data},
mark: "bar",
encoding: {
x: {bin: true, field: "precipitation", type: "quantitative"},
y: {aggregate: "count", field: "*", type: "quantitative"}
}
})
vegalite({
data: {values: data},
mark: "line",
encoding: {
x: {timeUnit: "month", field: "date", type: "temporal"},
y: {aggregate: "mean", field: "precipitation", type: "quantitative"}
}
})
vegalite({
data: {values: data},
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"}
}
})
vegalite({
data: {values: data},
mark: "bar",
encoding: {
x: {timeUnit: "month", field: "date", type: "ordinal"},
y: {aggregate: "count", field: "*", type: "quantitative"},
color: {field: "weather", type: "nominal"}
}
})
vegalite({
data: {values: data},
mark: "bar",
encoding: {
x: {
timeUnit: "month",
field: "date",
type: "ordinal",
axis: {
title: "Month"
}
},
y: {
aggregate: "count",
field: "*",
type: "quantitative",
axis: {
title: "Number of Days"
}
},
color: {
field: "weather",
type: "nominal",
scale: {
domain: ["sun", "fog", "drizzle", "rain", "snow"],
range: ["#e7ba52", "#c7c7c7", "#aec7e8", "#1f77b4", "#9467bd"]
},
legend: {
title: "Weather"
}
}
}
})
vegalite = require("@observablehq/vega-lite@0.2")
d3 = require("d3-fetch@1")
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.
