Professor Big Data Science at Ghent University.
{
const width = 600;
const height = 300;
const padding = {top: 20, left: 40, right: 40, bottom: 50};
const graph = d3.select(DOM.svg(width, height));
const formatTime = d3.timeFormat("%b %e");
const data = timeData;
const [startDate, endDate] = d3.extent(data, d => d.date);
const xScale = d3.scaleTime()
.domain([d3.timeDay.offset(startDate, -1), d3.timeDay.offset(endDate, 1)])
.range([padding.left, width - padding.right]);
const yScale = d3.scaleLinear()
.domain([0, d3.max(data, d => d.amount)])
.range([height - padding.bottom, padding.top]);
const xAxis = d3.axisBottom()
.scale(xScale)
.ticks(9)
.tickFormat(formatTime);
const yAxis = d3.axisLeft()
.scale(yScale)
.ticks(10);
const line = d3.line() // create a new line helper
.x(d => xScale(d.date))
.y(d => yScale(d.amount));
graph.append("path") // draw the path using the helper
.datum(data)
.attr("fill", "none")
.attr("stroke", "hotpink")
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.attr("stroke-width", 1.5)
.attr("d", line);
graph.append("g")
.attr("class", "x axis")
.attr("transform", `translate(0, ${height - padding.bottom})`)
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", "rotate(-45)");
graph.append("g")
.attr("class", "y axis")
.attr("transform", `translate(${padding.left}, 0)`)
.call(yAxis);
graph.select(".y.axis")
.append("text")
.text("Unicorn sightings")
.style("text-anchor", "end")
.attr("dx", -padding.top)
.attr("dy", "1em")
.attr("transform", "rotate(-90)")
.attr("fill", "black");
return graph.node();
}
popData = d3.csv("https://gist.githubusercontent.com/bmesuere/e1ee33fe7509647744ca024d5292579d/raw/9036404f55669f7d2226528bfda0cd18dbea13be/data.csv", d => {return {age: d.age, population: +d.population}})
{
const width = 500;
const height = 500;
const padding = {top: 20, left: 20, right: 20, bottom: 20};
const graph = d3.select(DOM.svg(width, height));
const radius = Math.min(width - padding.left - padding.right, height - padding.top - padding.bottom) / 2;
let chart = graph.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
let colorScale = d3.scaleOrdinal(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
let pie = d3.pie() // d3 layout function that calculates derived data
.value(d => d.population);
let path = d3.arc() // d3 helper to draw svg arcs, similar to the line one used before
.outerRadius(radius - 10)
.innerRadius(0);
let label = d3.arc()
.outerRadius(radius - 40)
.innerRadius(radius - 40);
let arc = chart.selectAll(".arc") // we bind the data to g elements
.data(pie(popData)) // we don't give the actual data to d3, but the output of the layout function
.enter()
.append("g")
.attr("class", "arc");
arc.append("path") // for each of the g elements, we call the arc helper
.attr("d", d => path(d))
.attr("fill", d => colorScale(d.data.age));
arc.append("text") // place the labels in the middle of the slices
.attr("transform", d => "translate(" + label.centroid(d) + ")")
.attr("dy", "0.35em")
.text(d => d.data.age);
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.
