Professor Big Data Science at Ghent University.
{
const graph = d3.select(DOM.element("div")); // DOM.element is an Observable API call
graph.append("p").text("New paragraph!"); // Add to new element instead of body
return graph.node(); // return the node to display the result above the code
}
{
const graph = d3.select(DOM.element("div"));
graph.selectAll("p") // make a selection of all paragraphs, there are none yet
.data(dataset) // bind our data to the selection
.enter() // take the set of placeholder elements
.append("p") // append a paragraph for each placeholder
.text("New paragraph!"); // set the text of each paragraph
return graph.node();
}
{
const graph = d3.select(DOM.element("div"));
graph.selectAll("p")
.data(dataset)
.enter()
.append("p")
.text(d => d); // use the value of d as text. Longer version: function(d){return d;}
return graph.node();
}
{
const graph = d3.select(DOM.element("div"));
graph.selectAll("p")
.data(dataset)
.enter()
.append("p")
.text(d => d)
.style("color", "blue"); // make the text blue by applying css
return graph.node();
}
{
const graph = d3.select(DOM.element("div"));
graph.selectAll("p")
.data(dataset)
.enter()
.append("p")
.text(d => d)
.style("color", d => d > 10 ? "blue" : "green"); // adapt color based on the value
return graph.node();
}
html`
<style>
div.bar {
display: inline-block;
width: 20px;
height: 75px;
margin-right: 2px;
background-color: hotpink;
}
</style>
`
{
const graph = d3.select(DOM.element("div"));
graph.selectAll("div")
.data(dataset)
.enter()
.append("div") // append a div instead of a p
.attr("class", "bar"); // add a class to apply css styling
return graph.node();
}
{
const graph = d3.select(DOM.element("div"));
graph.selectAll("div")
.data(dataset)
.enter()
.append("div")
.attr("class", "bar")
.style("height", d => d + "px"); // use the data value in pixels as height
return graph.node();
}
function getRandomDataset(size = 25) {
const data = [];
for (let i = 0; i < size; i++) {
data.push(5 + Math.floor(Math.random() * 20));
}
return data;
}
{
const graph = d3.select(DOM.element("div"));
graph.selectAll("div")
.data(getRandomDataset()) // generate random data instead of fixed dataset
.enter()
.append("div")
.attr("class", "bar")
.style("height", d => d + "px");
return graph.node();
}
{
const width = 500;
const height = 50;
const graph = d3.select(DOM.svg(width, height)); // create an svg element with width and height
return graph.node();
}
{
const width = 500;
const height = 50;
const graph = d3.select(DOM.svg(width, height));
const circles = graph.selectAll("circle")
.data(dataset)
.enter()
.append("circle"); // append circles
circles.attr("cx", (d, i) => (i * 50) + 25) // set the center x-coord based on position in dataset
.attr("cy", height / 2) // set the center y-coord based on height
.attr("r", d => d); // set the radius based on value
return graph.node();
}
{
const width = 500;
const height = 50;
const graph = d3.select(DOM.svg(width, height));
const circles = graph.selectAll("circle")
.data(dataset)
.enter()
.append("circle");
circles.attr("cx", (d, i) => (i * 50) + 25)
.attr("cy", height / 2)
.attr("r", d => d)
.attr("fill", "pink") // now also set the fill, stroke, and stroke-width
.attr("stroke", "hotpink")
.attr("stroke-width", d => d/2);
return graph.node();
}
{
const width = 500;
const height = 100;
const graph = d3.select(DOM.svg(width, height));
const data = getRandomDataset();
graph.selectAll("rect")
.data(data)
.enter()
.append("rect") // create a rectangle for each element and set some attributes
.attr("x", (d, i) => i * 21)
.attr("y", 0)
.attr("width", 20)
.attr("height", 100);
return graph.node();
}
{
const width = 500;
const height = 100;
const graph = d3.select(DOM.svg(width, height));
const data = getRandomDataset(5);
const barPadding = 1; // use 1px padding between bars
graph.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", (d, i) => i * (width / data.length)) // make width dependant on dataset length and svg width
.attr("y", 0)
.attr("width", width / data.length - barPadding) // incorporate the padding
.attr("height", 100);
return graph.node();
}
{
const width = 500;
const height = 100;
const graph = d3.select(DOM.svg(width, height));
const data = getRandomDataset();
const barPadding = 1;
graph.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", (d, i) => i * (width / data.length))
.attr("y", 0)
.attr("width", width / data.length - barPadding)
.attr("height", d => d * 4); // scale the bars according to value
return graph.node();
}
{
const width = 500;
const height = 100;
const graph = d3.select(DOM.svg(width, height));
const data = getRandomDataset();
const barPadding = 1;
graph.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", (d, i) => i * (width / data.length))
.attr("y", d => height - d * 4) // don't let the bars start from the top
.attr("width", width / data.length - barPadding)
.attr("height", d => d * 4);
return graph.node();
}
{
const width = 500;
const height = 100;
const graph = d3.select(DOM.svg(width, height));
const data = getRandomDataset();
const barPadding = 1;
graph.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", (d, i) => i * (width / data.length))
.attr("y", d => height - d * 4)
.attr("width", width / data.length - barPadding)
.attr("height", d => d * 4)
.attr("fill", d => d3.lab(40 + 2 * d, 100, -60)); // vary the l component in lab color space
return graph.node();
}
{
const width = 500;
const height = 100;
const graph = d3.select(DOM.svg(width, height));
const data = getRandomDataset();
const barPadding = 1;
graph.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", (d, i) => i * (width / data.length))
.attr("y", d => height - d * 4)
.attr("width", width / data.length - barPadding)
.attr("height", d => d * 4)
.attr("fill", d => d3.lab(40 + 2 * d, 100, -60));
graph.selectAll("text")
.data(data)
.enter()
.append("text") // add a label for each data point
.text(d => d) // set its value as text
.attr("x", (d, i) => i * (width / data.length) + 5) // position it similar as bars
.attr("y", d => height - d * 4 + 15)
.attr("font-family", "sans-serif") // add some style
.attr("font-size", "11px")
.attr("fill", "white");
return graph.node();
}
{
const width = 500;
const height = 100;
const graph = d3.select(DOM.svg(width, height));
const data = getRandomDataset();
const barPadding = 1;
graph.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", (d, i) => i * (width / data.length))
.attr("y", d => height - d * 4)
.attr("width", width / data.length - barPadding)
.attr("height", d => d * 4)
.attr("fill", d => d3.lab(40 + 2 * d, 100, -60));
graph.selectAll("text")
.data(data)
.enter()
.append("text")
.text(d => d)
// set the x position at the middle of the bar
.attr("x", (d, i) => i * (width / data.length) + (width / data.length - barPadding) / 2)
.attr("y", d => height - d * 4 + 15)
.attr("text-anchor", "middle") // set the text anchor to middle
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "white");
return graph.node();
}
{
const width = 500;
const height = 100;
const graph = d3.select(DOM.svg(width, height));
const data = scatterData;
graph.selectAll("circle")
.data(data)
.enter()
.append("circle") // use circles instead of rects
.attr("cx", d => d[0]) // use value in first array position as x coordinate
.attr("cy", d => d[1]) // use value in second array position as y coordinate
.attr("r", 5);
return graph.node();
}
{
const width = 500;
const height = 100;
const graph = d3.select(DOM.svg(width, height));
const data = scatterData;
graph.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", d => d[0])
.attr("cy", d => d[1])
.attr("r", d => Math.sqrt(height - d[1])); // scale the area according to the y-value
return graph.node();
}
{
const width = 500;
const height = 100;
const graph = d3.select(DOM.svg(width, height));
const data = scatterData;
graph.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", d => d[0])
.attr("cy", d => d[1])
.attr("r", d => Math.sqrt(height - d[1]));
graph.selectAll("text") // add labels
.data(data)
.enter()
.append("text")
.text(d => d[0] + "," + d[1])
.attr("x", d => d[0])
.attr("y", d => d[1])
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "hotpink");
return graph.node();
}
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.
