Published
Edited
Feb 19, 2019
Insert cell
Insert cell
d3 = require("d3")
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
data = d3.csv(dataUrl, parse)
Insert cell
function parse(datum) {
return {
brand: datum.brand,
model: datum.model,
price: +datum.price,
type: datum.type,
kmpl: +datum.kmpl,
bhp: +datum.bhp
}
}
Insert cell
Insert cell
function square (x) {
return x*x
}
Insert cell
data.filter( filterCriteria )
Insert cell
function filterCriteria (d) {
return d.type === "Hatchback"
}
Insert cell
function sortCriteria (a, b) {
return a.price - b.price
}
Insert cell
// Filter and the Sort
data.filter( filterCriteria )
.sort( sortCriteria )
Insert cell
Insert cell
Insert cell
vegalite({
data: {values: data },
mark: "bar",
encoding: {
x: {field: "model", type:"N"},
y: {field: "price", type: "Q"}
}
})
Insert cell
Insert cell
margin = ({top: 20, right: 30, bottom:20, left: 20})
Insert cell
Insert cell
width = 800 - margin.right - margin.left
Insert cell
height = 300 - margin.top - margin.bottom
Insert cell
simpleData = [5, 25, 15, 20, 10]
Insert cell
Insert cell
chart = {
const svg = d3.select(DOM.svg(width, height));
svg.selectAll("rect")
.data(simpleData)
.enter()
.append("rect")
.attr("x", (d, i) => i * width / data.length)
.attr("y", d => height - (d * 8))
.attr("width", width / data.length - barPadding)
.attr("height", d => d * 8)
.attr("fill", "brown");
return svg.node()
}
Insert cell
html`
<svg class="chart" width="250" height="200" fill="brown" >
<rect x="0" y="0" width="50" height="25"></rect>
<rect x="0" y="30" width="250" height="25"></rect>
<rect x="0" y="60" width="150" height="25"></rect>
<rect x="0" y="90" width="200" height="25"></rect>
<rect x="0" y="120" width="100" height="25"></rect>
</svg>`
Insert cell
chart3 = {
const svg = d3.select(DOM.svg(600, 100))
const circles = svg.selectAll("circle")
.data(simpleData)
circles.enter().append("circle")
.attr("cx", (d,i) => (i*100 + 50))
.attr("cy", 50 )
.attr("r", d => d )
return svg.node()
}
Insert cell
{
const div = d3.select(DOM.element("div", {"id": "vis"}));
d3.selectAll('p')
.data(simpleData)
.enter()
.append('p')
.text( d => d);
return div
}
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