A6 - Color Scales in D3

A6 - Sequential Color Scale Bar Chart

This example visualizes average temperatures across cities using a horizontal bar chart with a sequential blue color scale. It shows how temperature values map to color intensity, with a legend on the right providing the quantitative scale. The visualization uses D3.js v6 with d3.scaleSequential and d3.interpolateBlues for the color encoding, along with d3.scaleLinear and d3.scaleBand for the axes. A linear gradient legend displays the temperature-to-color mapping, and the data comes from a CSV file hosted on GitHub Gist. The chart includes axis labels and a title, with the bars' color intensity reflecting the average temperature for each city.

RRiya Mathur

81% match

A6_BarChart with Sequential Scale

This example visualizes the happiness scores of various countries using a bar chart where each bar’s color encodes its score through a sequential blue scale. The chart is rendered as an SVG in a React application, leveraging D3 v7 for scaling and axis generation, while the color mapping is handled by `d3.scaleSequential` with the `interpolateBlues` interpolator. The data is loaded via `d3.csv` from a GitHub-hosted dataset, and a legend is added using the `d3-legend` library to clarify the score-to-color mapping. The visualization highlights the relative happiness rankings across countries while making score differences visually intuitive through color intensity.

80% match

A4 - Introduction to D3

This example introduces D3.js through a collection of four interactive visualizations: a bar chart, a scatter plot, a boxplot, and a strip plot with a logarithmic scale. Each chart uses D3’s core modules—`d3.scaleLinear`, `d3.scaleLog`, `d3.axisBottom`, and `d3.axisLeft`—to map data to pixel coordinates and render SVG elements like `rect`, `circle`, and `line`. The visualizations draw from datasets embedded in the accompanying script files, with the boxplot summarizing distributions via quartile calculations. The code is structured as separate VizHub projects linked from a single HTML page, demonstrating basic chart construction without external data files.

A7 - Time Series in D3

This example demonstrates four time-series visualizations: a multi-line chart, a heatmap, small multiples of lines, and a streamgraph. It uses the D3.js library to render SVG elements and scales, with a color legend for each chart to distinguish categories. The data is mapped to time-based axes, and the streamgraph employs stacked area shapes. The code includes interactive tooltips that appear on hover, enhancing data exploration. All charts share a consistent color scheme, and the visualizations are built using D3’s data-binding and selection APIs.

D3 Scale - ScaleSequential - Different Interpolators

This example demonstrates eight different D3 color interpolators applied to sequential scales, each rendered as a horizontal band of colored rectangles. The visualization shows how the viridis, inferno, magma, plasma, warm, cool, rainbow, and cubehelixDefault colormaps transition across a 0–100 domain, with each interpolator labeled above its corresponding row. The code uses `d3.scaleSequential()` with each interpolator to map data values to fill colors, while `d3.scaleLinear()` positions the rectangles along the x-axis. The SVG output is generated from range data via `d3.range()` and rendered with D3's data join pattern.

SSubhendu Karmakar

A6_Color Scales in D3

This scatter plot matrix visualizes the relationships between four numeric flower measurements—sepal length, sepal width, petal length, and petal width—with points colored by species. The grid layout shows pairwise comparisons, with each cell plotting one measurement against another. The code uses D3.js v7, including `scaleLinear`, `scaleOrdinal`, `schemeSet1`, and axes created with `axisLeft` and `axisBottom`. Data is loaded from a CSV file and parsed manually. On mouseover, a yellow highlight class is applied to the circles in each cell, emphasizing the points.

D3 Scale

This example demonstrates how D3 scales map input data to visual output, using a linear scale to position circles along the x-axis and a multi-domain color scale to assign fill colors. The circles represent values from -10 to 10, with colors transitioning from red through gray to blue. It renders as an SVG using d3.scaleLinear for both positioning and color interpolation, with data bound through d3.select and .join(). The code references D3 v7 scale types in utils.js, including scaleTime, scaleBand, and scaleOrdinal, though only linear scales are actively applied.

SSubhendu Karmakar