Roger Yu-Hsiang Lo

Line Chart with Multiple Lines

This visualization shows population trends over time for multiple world regions, with each region represented as a distinct colored line and a legend identifying the regions. A vertical black line marks the currently selected year, and users can move their mouse across the chart to dynamically change that year. The code uses d3.line, d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal to render SVG paths, along with d3.nest to group the data by region. Population data comes from UN estimates and medium-variant projections, covering 1950 to 2100.

Feb 28, 2020

Choropleth Map with Interactive Filtering

This choropleth map visualizes world countries colored by economic group, with interactive filtering that lets users click a country to dim all others and highlight the selected one. The map supports pan and zoom through d3’s zoom event, while the color legend on the left also allows filtering by clicking a specific income category. The visualization uses d3.geoPath with the geoNaturalEarth1 projection to render countries from TopoJSON data, and d3.scaleOrdinal with the schemeSpectral color scale to encode the economic classifications.

Feb 25, 2020

Line Chart with Multiple Lines

This line chart visualizes global population trends over time, grouped by world regions, using a multi-line layout with a categorical color legend. It combines historical estimates (1950–2014) with medium-variant projections (2015–2100) from UN population data. The visualization uses D3 v5 with `scaleTime`, `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, `line`, `curveBasis`, and `nest` to structure and render the paths, while a custom `colorLegend` function displays the region labels as SVG circles and text.

Feb 25, 2020

Circles on a Map

This visualization displays global population data on a natural Earth projection map. Countries with missing data appear in red, while the rest are gray, and semi-transparent circles sized by population are placed at country centroids. A custom legend shows the population scale. The code uses D3 v5 functions like `geoPath`, `geoCentroid`, `geoNaturalEarth1`, and `scaleSqrt`, along with a custom `sizeLegend` for the bubble chart. Data is loaded from a CSV file and a TopoJSON world atlas.

Choropleth Map with Interactive Filtering

This choropleth map displays world economies using a spectral color scale, with each country colored according to its economic classification. Users can click legend items to filter the map, highlighting countries matching the selected economy while dimming others. The visualization uses D3 v5 APIs including `d3.geoPath`, `d3.geoNaturalEarth1`, `d3.scaleOrdinal`, and `d3.schemeSpectral` to render SVG paths. Data comes from a World Atlas TopoJSON file joined with TSV metadata, and interactive zooming is enabled through D3's `zoom` event system.

Let's make a map!

This example creates a world map by rendering GeoJSON country boundaries onto an SVG. It first draws a blue sphere background and then overlays light green country paths with subtle black strokes, using the Natural Earth projection. The code loads world topology data from the world-atlas package and converts it to GeoJSON using topojson’s `feature` method, then applies `d3.geoPath` with `geoNaturalEarth1` for projection. Both D3 and TopoJSON libraries are included via CDN.

Scatter Plot with menus

This interactive scatter plot displays relationships between numeric attributes of the auto-mpg dataset, with dropdown menus above the chart letting users select which columns to plot on the x and y axes. As selections change, the axes and data points update with a smooth 2-second animated transition, where circles grow from the center and slide to their new positions. The visualization uses D3 v5 with reusable functions for the dropdown menu and scatter plot, employing d3.scaleLinear, d3.extent, d3.axisBottom and d3.axisLeft for scales and axes, plus SVG rendering with a transition delay based on data index for the staggered animation effect.

Multiple lines

This example visualizes a week of temperature readings from multiple cities using multiple colored lines, with a legend identifying each city. The chart uses D3 v5 with SVG rendering, employing `scaleTime` and `scaleLinear` for axes, `nest()` to group data by city, and `line()` with `curveBasis` for smooth paths. A categorical color scale assigns distinct strokes, and a custom `colorLegend` function renders the legend. Data is loaded from a CSV file via `d3.csv`, with axes from `axisBottom` and `axisLeft`.

Let's make a face with D3.js!

A sequence of animated circles demonstrates the D3.js transition API as five apples shrink, disappear, and transform into a lemon over four seconds. The example uses `d3.select`, `d3.range`, and a custom `fruitBowl` module with `selection.transition().duration(1000)` to smoothly interpolate circle radii, x-positions, and fill colors. Data modifications—removing array elements and changing a fruit type—trigger re-renders, while `d3.scaleOrdinal` maps fruit types to colors and radii. The SVG output is updated incrementally at one-second intervals.

Feb 8, 2020

Let's make a face with D3.js!

The visualization demonstrates a fruit bowl that animates over time as apples are eaten and one apple transforms into a lemon, using D3.js v5 with an SVG rendering approach. The code leverages D3's scaleOrdinal for both color and radius mappings, and uses a declarative merge-based selection pattern to update SVG elements efficiently. A bowl shape is drawn with a `rect` element, while fruit are represented as circles with text labels, and timed `setTimeout` calls trigger state changes to the data array.

Feb 8, 2020

Cheap tricks for interaction

This example shows an interactive world map built with D3 v5 and TopoJSON, using a Natural Earth projection. Users can pan and zoom the map via the `d3.zoom` API, with the viewport transform applied to a group element. Country boundaries are rendered as SVG paths via `d3.geoPath`, with hover highlighting controlled by CSS. The map loads world-atlas data from unpkg, joining TopoJSON features to TSV country names for tooltips.

Feb 7, 2020

Cheap tricks for interaction

This example shows a natural Earth projection of world countries that users can pan and zoom. The map renders country boundaries as SVG paths with hover states that highlight each nation in red. The visualization uses d3.geoNaturalEarth1 and d3.geoPath to project TopoJSON data from the world-atlas package, while d3.zoom enables interactive transformations. Country names are loaded from a TSV file and attached as SVG title elements for tooltips.

Feb 7, 2020

Cheap tricks for interaction

This example displays a world map using a natural Earth projection with countries filled in light green on a blue sphere. It demonstrates a simple interaction technique where hovering over any country changes its fill to red, implemented entirely through CSS `:hover` rules. The visualization loads geographic data from the World Atlas TopoJSON collection and renders it using D3 v5’s `geoPath` and `geoNaturalEarth1` projection.

Feb 7, 2020

Hover to select

A row of apples appears in an SVG canvas, with hover highlighting a fruit by adding a black stroke. As time passes, apples are removed and one becomes a lemon, with D3 transitions animating the circle radii and positions. The example uses `d3.scaleOrdinal` for color and radius mapping, and binds data with key functions to update and exit elements smoothly.

Feb 6, 2020

Click to select

Five fruit circles animate into a row, with apples rendered large and red while lemons appear smaller and yellow. Clicking a circle selects it, highlighting it with a black stroke. The visualization uses d3.js v5 with the data-join pattern in `fruitBowl.js`, employing ordinal scales for color and radius, and transitions to animate entering, updating, and exiting circles over time.

Feb 6, 2020

Making a bar chart!

This example shows a minimal interactive bar chart where three numeric values are displayed as SVG text elements, doubling each time the user clicks the chart. The visualization uses D3 v5’s data join pattern with `selectAll`, `data`, `enter`, and `merge` to update labels incrementally. It reads the SVG’s width and height attributes via `+svg.attr()`, while the underlying data originates from a CSV file listing country populations, though the chart initially renders hardcoded values `[1,2,3]` instead. Clicking the SVG triggers a map over the data array, demonstrating dynamic updates without axes or scales.

Jan 31, 2020

World Population Area Chart

This area chart visualizes world population growth from 1950 to 2015, using a smooth, filled curve to show the total population over time. The chart employs D3’s `area` generator with a `curveBasis` for the smooth line, and uses `scaleTime` and `scaleLinear` for the axes. Data is loaded from a CSV file via `csv()`, with a y-axis tick formatter that converts large numbers to billions.

Line chart

This line chart visualizes temperature readings over a week in San Francisco, with time on the x-axis and temperature on the y-axis. The chart uses an area path, filled in orange, to emphasize the temperature curve. Built with D3 v5, it employs `scaleTime` and `scaleLinear` for axes, `area` with `curveBasis` for the smooth filled path, and `axisBottom` and `axisLeft` for tick marks. Data is loaded asynchronously from a CSV file using `d3.csv`, then parsed into date objects and numeric temperatures.

Line chart

This line chart visualizes temperature readings over a week in San Francisco, with time on the x-axis and temperature on the y-axis. The SVG rendering uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to build axes, while `line()` with `curveBasis` draws the smooth path. Data is loaded from a CSV file via `d3.csv` and parsed into dates and numbers. The chart includes axis labels and a title, with grid lines created by tick marks extending across the plot area.

Cars Scatter Plot

A scatter plot displays the relationship between horsepower and weight for cars from the auto-mpg dataset. Each red circle represents an individual car, positioned along the x-axis by horsepower and the y-axis by weight, with both axes using linear scales. The visualization is rendered as an SVG using D3 v5, leveraging the `scaleLinear`, `axisBottom`, and `axisLeft` APIs to construct the plot. Data is loaded asynchronously from a CSV file via `csv`, and numeric fields are parsed before rendering.

Making a Bar Chart

This example displays a bar chart of the top 10 most populous countries, with population values on the x-axis and country names on the y-axis. The SVG render uses d3.csv to load the data, then d3.scaleLinear and d3.scaleBand to map values, with d3.axisLeft and d3.axisBottom for tick marks.

Jan 23, 2020

Customizing Axes

This bar chart displays the population of the top 10 most populous countries based on 2018 estimates from the United Nations World Population Prospects. It shows how to customize D3 axes by styling tick labels and removing default lines. The visualization uses d3.scaleLinear and d3.scaleBand to map data, while d3.axisLeft and d3.axisBottom are customized with tick formatting that abbreviates large numbers as billions. Data is loaded from a CSV file and rendered as SVG rectangles.

Jan 23, 2020

Let's make a face with D3.js!

A yellow circle face with eyes, brows, and a mouth is drawn using D3.js v5 SVG primitives. The face is centered via a transformed group, and the eyebrows animate upward and back down using chained `transition().duration()`. The mouth is created with the `d3.arc` shape generator, while circles and rectangles define the eyes and brows. The code imports `select` and `arc` from D3 and uses SVG attributes for positioning.

Jan 17, 2020