Published
Edited
Aug 9, 2018
Insert cell
Insert cell
html`
<style>
.chart div{
font: 10px sans-serif;
background-color: steelblue;
text-align: right;
padding: 3px;
margin: 1px;
color: white;
}
</style>
<div class="chart">
</div>
`
Insert cell
data = [30, 86, 168, 281, 303, 365]
Insert cell
{
// Update
var chart = d3.select(".chart")
.selectAll(".bar")
.data(data)
.style("width", function(d) { return d + "px"; })
.text(function(d) { return d; });
// Enter
chart
.enter()
.append("div")
.attr("class", "bar")
.style("width", function(d) { return d + "px"; })
.text(function(d) { return d; });
// Exit ...
chart.exit().remove();
}
Insert cell
Insert cell
html`
<style>
.scaled-chart div{
font: 10px sans-serif;
background-color: steelblue;
text-align: right;
padding: 3px;
margin: 1px;
color: white;
}
</style>
<div class="scaled-chart">
</div>
`
Insert cell
{
// linear scale
var xScale = d3.scaleLinear()
.domain([0, d3.max(data)])
.range([0, 900])
// Update
var scaledChart = d3.select(".scaled-chart")
.selectAll(".scaled-bar")
.data(data)
.style("width", function(d) { return xScale(d) + "px"; })
.text(function(d) { return d; });
// Enter
scaledChart
.enter().append("div")
.attr("class", "scaled-bar")
.style("width", function(d) { return xScale(d) + "px"; })
.text(function(d) { return d; });
// Exit ...
scaledChart.exit().remove()
}
Insert cell
Insert cell

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.
Learn more