vl.markCircle()
.data(countryData)
.encode(
vl.x().fieldQ("life_expect").scale({domain:[40,85]}),
vl.y().fieldQ("fertility"),
vl.size().fieldQ("pop").scale({range:[10,1000], domain:[0, 1303182268]}),
vl.color().fieldN("cluster"),
vl.tooltip("country")
)
.width(700)
.height(500)
.render()
{
// create SVG here
}
{
// your graph with the circles in place
}
d3.extent([5,3,8,2,89,34,42])
d3.extent([{a:3, b:6}, {a:1, b:42}, {a:7, b:7}, {a:34, b: 21}], (d)=>d.b)
{
// your graph with the circles in the correct place
}
{
// your graph with axis labels here
}
{
// your plot with axis labels
}
{
// your graph with colored dots
}
{
// your graph with sized, colored dots
}
{
// your graph with sized, colored dots and tooltips
}
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.
