diamonds = d3.csv("https://raw.githubusercontent.com/tidyverse/ggplot2/master/data-raw/diamonds.csv")
printTable(diamonds.slice(0, 5))
diamonds.forEach(d => {
// would want to do this for all numeric attributes, too
d.price = +d.price
});
viewof view_histo = embed(
{
"width": 500,
"height": 300,
"data": {"values": diamonds},
"mark":
{"type": "bar", "tooltip": true},
"encoding": {
"x": {"bin": {"step": 500}, "field": "price", "title": "price ($)"},
"y": {"aggregate": "count", "title": "count"},
}
})
vl.markBar({tooltip: true})
.data(diamonds)
.width(500).height(300)
.encode(
vl.x().fieldQ('price').bin({step: 500}).title("price ($)"),
vl.y().count().title("count")
)
.render()
viewof view_boxplot = embed(
{
"data": {"values": diamonds},
"mark": {"type":"boxplot", "tooltip":true},
"encoding": {
"y": {
"field": "price",
"type": "quantitative"
}
}
})
viewof view_boxplot_cut = embed(
{
"data": {"values": diamonds},
"mark": {"type": "boxplot", "tooltip": true},
"width": "400",
"encoding": {
"x": {
"field": "cut",
"type": "nominal"
},
"y": {
"field": "price",
"type": "quantitative"
}
}
})
vl.markBoxplot({tooltip: true})
.data(diamonds)
.encode(
vl.y().fieldQ("price").title("price ($)")
)
.render()
vl.markBoxplot({tooltip: true})
.data(diamonds)
.encode(
vl.x().fieldN("cut"),
vl.y().fieldQ("price").title("price ($)")
)
.width(400)
.render()
viewof view_ecdf_density = embed(
{
"data": {"values": diamonds},
"width": 500,
"height": 300,
"transform":[{
"density": "price",
"cumulative": "true" // needed for cumulative dist
}],
"mark": {"type": "line","tooltip": true},
"encoding": {
"x": {
"field": "value",
"title": "price ($)",
"type": "quantitative"
},
"y": {
"field": "density",
"type": "quantitative"
}
}
})
vl.markLine({tooltip: true})
.data(diamonds)
.width(500).height(300)
.transform(
vl.density('price').cumulative(true)
)
.encode(
// after density transform, fields are "value", "density"
vl.x().fieldQ('value').title("price ($)"),
vl.y().fieldQ('density')
)
.render()
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.
