D3. Part 1 - HTML, SVG and a Basic Bar ChartD3. Part 1 - Exercise: Bar Chart and Scatter PlotD3. Part 1 - Exercise SolutionD3. Part 2 - Click InteractionD3. Part 2 - Importing and combining ChartsD3. Part 2 - Animated Bar Chart RaceD3. 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 2 - Exercise: Interactive Charts
gapminderData = (await require('vega-datasets'))["gapminder.json"]()
linesDataByCountry = Array.from(d3.group(gapminderData, d => d.country).values())
height = 300;
margin = ({top: 30, right: 30, bottom: 30, left: 30})
lineGenerator = d3.line()
.x(d => xScale(d.year))
.y(d => yScale(d.pop));
lineGenerator(linesDataByCountry[0])
xScale = d3.scaleLinear()
// .domain(todo)
// .range(todo);
yScale = d3.scaleLinear()
// .domain(todo)
// .range(todo);
linechart = {
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height);
/*
todo:
- use the d3 data join to add a "path" element for every country (dataByCountry) to the svg.
- add a "d" attribute to the "path" elements and use the lineGenerator to generate the path commands
- add these attributes to the "path" elements: stroke is "lightgrey"; stroke-width is 2; fill is "none"
- add axes and anything else to complete the chart as described in the task description
*/
return svg.node();
}
d3 = require("d3@6")
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.
