D3. Part 1 - HTML, SVG and a Basic Bar ChartD3. Part 1 - Exercise: Bar Chart and Scatter PlotD3. Part 2 - Click InteractionD3. Part 2 - Importing and combining ChartsD3. Part 2 - Animated Bar Chart RaceD3. Part 2 - Exercise: Interactive ChartsD3. Part 2 - Exercise SolutionD3. Part 3 - Brushing and LinkingD3. Essentials - selection.join explainedD3. Essentials - ColorD3. Essentials - Further Learning VideosD3. Advanced - MapsD3. Advanced - Drawing custom Shapes
D3. Part 1 - Exercise Solution
printTable(gapminder.slice(0, 14))
gapminder2000 = gapminder // data to use in your chart, filtered on 2000 and sorted by fertility
.filter(d => d.year === 2000)
.sort((a, b) => b.fertility - a.fertility)
chartHeight = 500;
chartWidth = width; // use observable's built-in width for responsive size
margin = ({top: 20, right: 20, bottom: 40, left: 100}); // spacing around chart to make room for axes
//x =... create the d3 scale for the x axis here
x = d3.scaleLinear()
.domain([0, d3.max(gapminder2000, d => d.fertility)])
.range([margin.left, width - margin.right])
//y =... create the d3 scale for the y axis here
y = d3.scaleBand()
.domain(gapminder2000.map(d => d.country))
.range([margin.top, chartHeight - margin.bottom])
.padding(0.1)
barchart = {
const svg = d3.create("svg")
.attr("width", chartWidth)
.attr("height", chartHeight);
svg.selectAll("rect")
.data(gapminder2000)
.join("rect")
.attr("x", x(0))
.attr("y", d => y(d.country))
.attr("height", y.bandwidth())
.attr("width", d => x(d.fertility) - x(0))
.attr("fill", d => selectedData !== null && selectedData !== d ? "lightgrey" : "steelblue")
.on("click", (event, d) => {
if(selectedData === d) {
mutable selectedData = null;
}
else mutable selectedData = d;
});
svg.append("g")
.call(d3.axisLeft(y))
.attr("transform", `translate(${margin.left}, 0)`);
svg.append("g")
.call(d3.axisBottom(x))
.attr("transform", `translate(0, ${chartHeight - margin.bottom})`);
return svg.node();
}
yScatter = d3.scaleLinear()
.domain(d3.extent(gapminder2000, d => d.life_expect))
.range([chartHeight - margin.bottom, margin.top]);
colorScatter = d3.scaleOrdinal()
.domain(gapminder2000.map(d => d.cluster))
.range(d3.schemeCategory10)
scatterplot = {
const svg = d3.create("svg")
.attr("width", chartWidth)
.attr("height", chartHeight);
svg.selectAll("circle")
.data(gapminder2000)
.join("circle")
.attr("cx", d => x(d.fertility))
.attr("cy", d => yScatter(d.life_expect))
.attr("r", 5)
.attr("fill", d => selectedData !== null && selectedData !== d ? "lightgrey" : colorScatter(d.cluster))
.on("click", (event, d) => {
if(selectedData === d) {
mutable selectedData = null;
}
else mutable selectedData = d;
});
svg.append("g")
.call(d3.axisLeft(yScatter))
.attr("transform", `translate(${margin.left}, 0)`);
svg.append("g")
.call(d3.axisBottom(x))
.attr("transform", `translate(0, ${chartHeight - margin.bottom})`);
return svg.node();
}
mutable selectedData = null;
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.
