Kevinw97

Melting Data for Multiple Lines

This visualization shows population over time by region, with multiple lines representing different areas across a time series from 1950 to 2100. The chart displays data from UN population estimates and medium variant projections, processed through a melting technique that converts wide-format data into long format using `d3.csv`, `d3.timeParse`, and `d3.range`. The visualization uses `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.nest` to group data by region, and `d3.line` with `curveBasis` for smooth paths. A color legend is implemented via a custom `colorLegend` component using `d3.scaleOrdinal` with `schemeCategory10`.

Feb 24, 2020

Line Chart with Multiple Lines

This line chart displays one week of temperature readings from cities worldwide, using data from Data Canvas - Sense Your City. Each city appears as a distinct colored line, with the legend sorted by final temperature values. The visualization uses d3.scaleTime, d3.scaleLinear, d3.line with curveBasis for smoothing, and d3.nest for grouping data by city. SVG rendering includes custom axis labels, a title, and a color legend built from d3.scaleOrdinal with schemeCategory10.

Circles on a Map

This visualization displays global population data for 2018 using proportional circles centered on each country, with area encoding population size. The map supports pan and zoom, and hovering reveals a tooltip with the country name and exact population. It uses a natural Earth projection via d3.geoNaturalEarth1, with d3.geoPath for country boundaries and d3.scaleSqrt for circle sizing. A custom size legend and color legend (d3.scaleOrdinal with schemeSpectral) provide context. Data comes from a CSV file merged with world topology from TopoJSON, rendered as SVG. The implementation uses d3.zoom for interaction and d3.geoCentroid to position circles.

Scatter Plot with Menus

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, displaying relationships between car attributes. Users can dynamically select which columns map to the X and Y axes through dropdown menus created with d3. The visualization uses d3.scaleLinear, d3.extent, axisLeft, and axisBottom to render the axes, while circles animate into position using transition().delay() and transition().duration() as data is re-plotted with different variables.

Color and Size Legends

This example demonstrates how to create custom legends for both ordinal color scales and quantitative size scales in D3 v5. The color legend displays four fruit categories with distinct colored circles, while the size legend uses a sqrt scale to show proportional circle radii for numeric tick values. The code exports reusable legend functions that use D3’s selection joins, `scaleOrdinal`, `scaleSqrt`, and generated SVG groups with circles and text labels.

Let's make a map with D3.js!

This example shows a simple world map rendered as an SVG, with countries filled in light green and oceans in blue using a Natural Earth projection. The code loads GeoJSON country boundaries from the World Atlas TopoJSON file and converts them into SVG paths using `d3.geoPath` and `d3.geoNaturalEarth1`. It relies on the `topojson.feature` API to extract country geometries, and appends each as a separate path element with a stroke to delineate borders.

Feb 5, 2020

Bowl of Fruit - General Update Pattern Special Cases

Bowl of Fruit demonstrates the D3 general update pattern with special cases for enter, update, and exit selections. The visualization shows a row of fruit shapes that change over time—apples are bought, eaten, and replaced with lemons—using SVG circles and text labels. The code employs `scaleOrdinal` for both color and radius mappings, `selection.merge()`, and `selection.exit().remove()` to handle dynamic data transitions. Timed `setTimeout` calls trigger sequential data mutations, rendering each state through the reusable `fruitBowl` function.

Feb 5, 2020

Bowl of Fruit - General Update Pattern Special Cases

Feb 4, 2020

Customizing Axes

This example displays a horizontal bar chart of the top 10 most populous countries, based on 2018 United Nations population estimates read from a CSV file. It demonstrates custom axis styling with d3-scale and d3-axis, using `scaleLinear` for population and `scaleBand` for country names. The axes remove their domain paths and tick lines, format large numbers with d3.format, and add custom labels and a title, all rendered in SVG.

Jan 22, 2020

Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects. The visualization uses D3 v5 with an SVG rendering, featuring a linear scale for population values and a band scale for country names. Customized axes include formatted tick labels that convert units to billions and a horizontal grid. The chart applies a steelblue fill to bars and includes a title and axis label.

Making a Bar Chart

This example shows a horizontal bar chart ranking the top 10 most populous countries based on 2018 estimates from the United Nations World Population Prospects. It uses D3 v5 (d3.scaleLinear, d3.scaleBand, d3.axisLeft, d3.axisBottom) to map population values to bar lengths and country names to y-axis positions. The chart customizes axes by removing domain lines and tick marks, and formats tick labels with a custom function replacing 'G' (giga) with 'B' (billion). Population data is read from a CSV file and multiplied by 1000 before rendering as SVG rectangles.

Making a Bar Chart

This example shows a bar chart ranking countries by population, with the data read from a CSV file and rendered as SVG rectangles. It uses D3 v5’s `csv` loader, `scaleLinear` and `scaleBand` for axes, and `axisLeft`/`axisBottom` to display the country names and population values. The chart applies margins and a steelblue fill to each bar.

Let's make a face with D3.js!

This visualization uses D3.js to construct a simple smiley face from SVG shapes, including a yellow circle for the head, paired eyes, and an arc-based mouth. It demonstrates fundamental DOM manipulation by appending elements to a centered group. The code defines geometric constants for spacing and sizing, then uses chained `transition` calls with a two-second duration to animate the rectangular eyebrows moving up and down. Rendering is done entirely through SVG attributes set via D3 selections, with no external data source, highlighting basic shape creation and animation techniques in d3 v5.

Let's make a face with D3.js!

A D3.js example demonstrates fundamental DOM manipulation by constructing a yellow smiley face with black eyes and a curved mouth within an SVG canvas. The eyebrows are not present; instead, the code uses `d3.select` to append and position circles and a `path` element with an arc generator for the mouth. It relies on D3 v5's `arc()` API and inline attributes to render the face geometry at the viewport center.

Shapes with SVG and CSS

A collection of primitive SVG shapes demonstrates how presentation attributes and CSS interact in a static graphic. Circles and rectangles showcase fill colors, strokes, and transforms, while grouped elements apply inherited styling. A line and a hand-coded path with rounded joins illustrate stroke styling within a dedicated `.lines` class. The rendering relies solely on SVG markup and a linked stylesheet, with no JavaScript libraries or data involved.

Jan 9, 2020