D3. Part 1 - HTML, SVG and a Basic Bar ChartD3. Part 1 - Exercise: Bar Chart and Scatter PlotD3. Part 1 - Exercise SolutionD3. 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 2 - Click Interaction
gapminder2000 = gapminder // data to use in your chart, filtered on 2000 and sorted by fertility
.filter(d => d.year === 2000)
.sort((a, b) => b.pop - a.pop)
.slice(0, 50)
.sort((a, b) => b.fertility - a.fertility)
//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.2)
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y).tickSize(0))
.call(g => g.select(".domain").remove())
d3.create("g").call(xAxis)
xAxis = g => g
.attr("transform", `translate(0,${chartHeight - margin.bottom})`)
.call(d3.axisTop(x).tickSizeOuter(0).tickSizeInner(chartHeight - margin.bottom - margin.top))
.call(g => {
g.select(".domain").remove();
g.selectAll(".tick line").attr("stroke", "white").attr("stroke-width", 0.5)
})
xAxisScatter = g => g
.attr("transform", `translate(0,${chartHeight - margin.bottom})`)
.call(d3.axisBottom(x).tickSizeOuter(0))
.call(g => {
g.select(".domain").remove();
})
yAxisScatter = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(yScatter))
.call(g => g.select(".domain").remove())
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.
