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: Interactive ChartsD3. Part 2 - Exercise SolutionD3. Part 3 - Brushing and LinkingD3. Essentials - selection.join explainedD3. Essentials - Further Learning VideosD3. Advanced - MapsD3. Advanced - Drawing custom Shapes
D3. Essentials - Color
ramp(d3.scaleLinear().range(['lightgreen', 'darkblue']).domain([0, 1])/*.interpolate(d3.interpolateRgb)*/, 7)
ramp(d3.scaleLinear().range(['lightgreen', 'darkblue']).domain([0, 1]).interpolate(d3.interpolateHsl), 7)
ramp(d3.scaleLinear().range(['lightgreen', 'darkblue']).domain([0, 1]).interpolate(d3.interpolateHcl), 7)
swatches({color: categoricalColor})
categoricalColor = d3.scaleOrdinal()
.domain(gapminderData.map(d => d.cluster))
.range(d3.schemeSet1);
legend({color: sequentialColor})
sequentialColor = d3.scaleSequential(d3.interpolateOranges)
.domain(d3.extent(gapminderData, d => d.life_expect))
legend({color: divergingColor})
divergingColor = d3.scaleDiverging(d3.interpolatePRGn)
.domain([-1, 0, 3])
d3.extent(gapminderData, d => d.life_expect)
legend({color: quantizedColor, tickFormat: ".0f"})
quantizedColor = d3.scaleQuantize()
.domain(d3.extent(gapminderData, d => d.life_expect))
.range(d3.schemeOranges[5]) // d3.schemeRdPu
makeScatterPlot = circlesContainer => {
const scatterData = gapminderData.filter(d => d.year === year);
circlesContainer.selectAll("circle.dot")
.data(scatterData)
.join("circle")
.attr("class", "dot")
.attr("cx", d => xScaleScatter(d.fertility))
.attr("cy", d => yScaleScatter(d.life_expect))
.attr("r", d => radiusScale(d.pop))
.attr("fill", d => d.country === selectedCountry ? "#3484c7" : quantizedColor(d.life_expect))
.attr("opacity", 0.8)
.on("click", (event, d) => {
if (d.country === selectedCountry) {
mutable selectedCountry = null;
}
else mutable selectedCountry = d.country;
});
circlesContainer.append("g")
.call(yAxisScatter);
circlesContainer.append("g")
.call(xAxisScatter);
circlesContainer.append("text")
.attr("font-family", "sans-serif")
.attr("font-size", 14)
.attr("fill", "currentColor")
.attr("y", 30)
.attr("x", 10)
.text(`Average Fertility & Life Expectancy by Country in ${year}`);
}
import {swatches, legend} from "@d3/color-legend"
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.
