D3. Part 1 - HTML, SVG and a Basic Bar ChartD3. Part 1 - Exercise SolutionD3. 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: Bar Chart and Scatter Plot
Inputs.table(gapminder)
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 scale for the x axis here
//y =... create the scale for the y axis here
barchart = {
const svg = d3.create("svg")
.attr("width", chartWidth)
.attr("height", chartHeight);
svg.selectAll("rect")
.data(gapminder2000)
.join("rect")
// TODO: set the attributes for the bars:
// .attr("x", ... )
// .attr("y", ... )
// .attr("height", ... )
// .attr("width", ... )
// .attr("fill", ... )
// uncomment the next line to add rudimentary tooltips to the bars eg. to double check if your data is
// shown correctly and matches the scale as displayed on the axis.
// .append("title").text(d => "tooltip information here")
// TODO: uncomment to add axes to the chart:
// 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();
}
// TODO: define the x scale for the scatter plot
// xScatter = ...
// TODO: define the y scale for the scatter plot
// yScatter = ...;
// color scale for the scatter plot (maps each cluster to a different color from d3.schemeCategory10)
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")
// TODO: to reach the target image you need to define the attributes cx, cy, r (radius), and fill (color)
// - you can use a radius of 5 pixels for example
// - for the fill make use of the color scale defined above "colorScatter"
// .attr("cx", ...)
// .attr("cy", ...)
// .attr("r", ...)
// .attr("fill", ...);
// TODO: add x and y axes to the scatter plot.
return svg.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.
