Jordan Chiu

CPSC 436V Week 7 - Map with Selectable Countries

This example shows a choropleth map of world countries colored by income group, with interactive selection. Clicking a country highlights it and dims all others, while a legend allows filtering by income category; clicking again deselects. The visualization uses d3.geoNaturalEarth1 and d3.geoPath for projection and rendering, d3.zoom for panning, and d3.scaleOrdinal with schemeSpectral for color mapping. Data comes from TopoJSON world-atlas and TSV metadata, rendered as SVG paths.

Feb 18, 2020

CPSC 436V Week 7 - Melting Data for Multiple Lines

This visualization shows global population trends over time for major world regions, with each region drawn as a distinct colored line using a basis curve. The chart orders the color legend by each line’s final population value, and employs D3’s `nest` and `scaleOrdinal` with `schemeCategory10` to group and color the data. It loads UN population estimates from 1950 to 2014, merging them with medium-variant projections through 2100, and renders via SVG with custom axes and a standalone `colorLegend` component.

Feb 18, 2020

CPSC 436V Week 6 - Circles on a Map

This map visualization displays global population estimates for 2018 using circles overlaid on a geographic projection. Semi-transparent cyan circles, sized by population magnitude, are placed at country centroids using `d3.geoCentroid` and rendered with `d3.geoNaturalEarth1` and `d3.geoPath`. A size legend with `d3.scaleSqrt` and a color legend explain the mapping. Data comes from a UN population CSV merged with TopoJSON world boundaries; zooming is enabled via `d3.zoom`, and hover reveals population details.

Feb 16, 2020

CPSC 436V Week 6 - Multiline Chart

This example visualizes one week of temperature readings from cities around the world, plotting each city as a distinct colored line over time. The chart uses d3.scaleTime, d3.scaleLinear, and d3.line with curveBasis to create smooth paths, while d3.nest groups data by city. A color legend, built with a custom colorLegend function, orders entries by each line’s final temperature value. The rendered SVG includes styled axes with gridlines, a title, and axis labels, drawing from a CSV dataset loaded via d3.csv.

Choropleth Map

This choropleth map colors countries according to their income group, using a spectral color scale with a clickable legend that displays the categorical values. The map is rendered with SVG paths generated by `d3.geoPath` and a `geoNaturalEarth1` projection, with zooming enabled via `d3.zoom`. Geographic data comes from the World Atlas TopoJSON, joined with country names from a TSV file. The color legend is built with `scaleOrdinal` and custom `colorLegend` functions.

CPSC 436V Week 6 - Scatterplot with Menus

This interactive scatterplot lets users explore the relationship between numeric car attributes (like horsepower and weight) from the auto-mpg dataset by using two dropdown menus to select which columns appear on the x- and y-axes. The visualization updates with animated transitions of the circles and axes using D3 v5’s `scaleLinear`, `axisBottom`, `axisLeft`, and `transition` APIs. The SVG rendering applies a 1000-millisecond staggered delay per point, with the plot drawn from the CPSC 436V course example.

Colour and Size Legends

This example demonstrates two reusable legend components for D3 v5 visualizations: an ordinal color legend and a quantitative size legend. The color legend maps fruit categories to distinct colors using `scaleOrdinal`, while the size legend uses `scaleSqrt` to transform numeric values into circle radii. Both components render as SVG groups with tick marks and labels, using data joins and enter/merge/exit patterns for dynamic updates. The size legend generates ticks via the scale’s `ticks` method, filtering out zero, and positions circle centers according to the scaled radius.

Interactive Filtering on a Choropleth Map

This interactive choropleth map displays world countries colored by income group from World Atlas TopoJSON data. Users click legend ticks to filter countries, highlighting selected income categories while dimming others. The map uses d3.geoNaturalEarth1 projection with d3.geoPath for rendering and d3.zoom for pan/zoom controls. A color legend built with d3.scaleOrdinal and schemeSpectral responds to clicks, toggling opacity and stroke width on matching countries.

Feb 2, 2020

Choropleth Map

Feb 1, 2020

Let's make an interactive map with D3.js!

This interactive map displays world countries using a natural Earth projection rendered as SVG paths. Users can pan and zoom the map via D3’s `zoom` behavior, which applies transforms to a group element. Country boundaries come from TopoJSON data, with names joined from a TSV table using `reduce`. Hovering highlights a country in red, while the background sphere is colored blue. The code leverages `d3.geoPath`, `d3.geoNaturalEarth1`, and topojson’s `feature` method to generate the geographic shapes.

Feb 1, 2020

Let's make a map with D3.js!

This example visualizes the countries of the world as an SVG map using D3.js. It first renders a blue sphere as the ocean background, then projects country boundaries onto it using the Natural Earth dataset and a geoNaturalEarth1 projection. The map is constructed with the `geoPath` and `geoProjection` APIs, with `topojson.feature` processing the loaded GeoJSON data. Country shapes are filled in light green with a subtle black stroke, and the map is interactive only in the sense that it renders static geographic data.

Feb 1, 2020

Quiz 4

This example shows a simple interactive SVG visualization of three numbers that update on click. It demonstrates D3.js DOM manipulation by rendering text labels for an array, where each click doubles the values and updates the display. Using D3 v5’s `select`, `selectAll`, `append`, and `merge` APIs, the code manages entering, updating, and exiting elements dynamically from the SVG canvas. The initial view displays the numbers 1, 2, and 3, which transform to 2, 4, and 6 upon interaction, with no additional data source beyond the hardcoded array.

Bowl of Fruit - Hover to Select

Five apples hover to select, showing a black stroke on the chosen fruit. After one second, an apple is removed; at two seconds, the third apple turns into a lemon; and at three seconds, the second apple disappears. The visualization uses D3 v5’s `scaleOrdinal` for color and radius, and SVG transitions animate entering, updating, and exiting circles with a one-second duration.

Bowl of Fruit - Click to Select

Five pieces of fruit sit in an animated bowl, rendered as circles whose radius and fill come from d3.scaleOrdinal based on fruit type. Clicking an apple or lemon triggers an onClick handler that sets the selected fruit, which receives a thick black stroke via a data join and transition. The example also demonstrates enter, update, and exit selections by removing apples and changing one apple to a lemon at timed intervals, all using d3.transition for smooth radius and position animations.

Bowl of Fruit - General Update Pattern with Animation

This example demonstrates the general update pattern for animating a data set over time. A row of five apples is shown as red circles that shrink to zero radius when removed and change into a yellow lemon when a type updates. The code uses D3 v5 with a custom `fruitBowl` function that separates enter, merge, and exit selections, applying `transition().duration(1000)` to animate the radius and x-position of the circles.

Bowl of Fruit - Nested Elements

This example demonstrates a nested SVG visualization where circular fruits inside a rounded bowl update dynamically over time. Using D3 v5 and the `fruitBowl` module, elements are bound to a `fruits` array, with apples (red, radius 50) and lemons (yellow, radius 30) encoded through ordinal color and size scales. The code shows incremental changes: removing an apple, altering one apple to a lemon, and filtering out another, showcasing how D3’s selection merging, `.merge()`, and `.exit()` handle transitions. The rendering uses raw SVG `rect`, `circle`, and `text` elements, driven by timer-based state mutations.

CPSC 436V Week 3 - Area Chart

This area chart visualizes world population growth from 1950 onward, using a smooth curve to emphasize the accelerating trend over time. The visualization is built with D3 v5, leveraging the `area` generator with `curveBasis` to create the filled path, while `scaleTime` and `scaleLinear` map the temporal and quantitative axes. The SVG rendering includes labeled axes and a title, with data parsed from a CSV file containing yearly population figures.

CPSC 436V Week 3 - Line Chart

This line chart visualizes temperature readings in San Francisco over time, with time on the x-axis and temperature on the y-axis. The chart uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `line` with `curveBasis`, and `axisBottom`/`axisLeft` to render the axes and smooth curve. Data is loaded via `csv` from a VizHub-hosted dataset, and the rendering uses SVG elements. The maroon line is drawn with a `path` element, with gridlines and axis labels styled in CSS.

CPSC 436V Week 3 - Cars Scatterplot

This scatterplot visualizes the relationship between fuel efficiency (MPG) and vehicle weight for a dataset of cars, with each circle representing an individual car. The x-axis shows MPG values and the y-axis displays weight, using opacity to suggest overlapping points. The visualization is built with D3 v5, employing `scaleLinear`, `extent`, `axisBottom`, and `axisLeft` to construct the axes and scales. Data is loaded asynchronously from a CSV file via `d3.csv`, with numeric values parsed before rendering the SVG circles.

CPSC 436V Week 3 - Scatterplot

This scatterplot shows the ratings of ten games played in 2019, plotted along a horizontal rating axis against game names on the vertical axis. Each circle’s position encodes the game’s score, with all points using a uniform radius. The visualization uses D3 v5 APIs including `select`, `csv`, `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom`. Data is loaded from a local CSV file (`data.csv`) and rendered as an SVG, with gridlines, tick labels, and axis labels styled via CSS.

CPSC 436V Week 3 - Axis Customization

A horizontal bar chart displays ratings for ten games from 2019, sorted by name. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear` for the rating axis and `scaleBand` for game names. Customized axes remove domain lines, use a `.2n` tick format, and add a label. Data loads from a CSV via `d3.csv`, and a title annotates the chart.

CPSC 436V Week 2 - Bar Charts

This bar chart visualizes the ratings of ten games played in 2019, with each game’s name on the y-axis and its numeric rating on a linear scale from 0 to 10 on the x-axis. The data is loaded from a local CSV file and rendered as SVG rectangles using d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom. The chart encodes ratings via bar width and makes no additional modifications beyond the listed values.

Stylized Bar Chart

This example shows a horizontal bar chart of country populations, with a stylized teal color scheme and custom Poppins typography. The chart uses React to render an SVG, with D3 v5 scales (`scaleBand` and `scaleLinear`) and axes (`AxisBottom`, `AxisLeft`) to position bars and ticks. Population values are formatted with D3’s `format` function to abbreviate large numbers (e.g., "B" for billions). Data loads asynchronously via a `useData` hook, which uses `d3.csv` to fetch the dataset, and the visualization updates once the data arrives.

Jan 15, 2020

Let's make a face with D3.js!

A yellow smiley face, rendered with SVG shapes, demonstrates fundamental DOM manipulation and animated transitions in D3.js. The example builds the face using appended `circle`, `rect`, and `path` elements, with the mouth generated via the `d3.arc` generator. Both eyebrows, created as rectangles, move up and down through chained `transition()` calls on their containing group, each lasting two seconds and alternating between two vertical offsets. The code uses D3 v5 selection methods and `attr` to position elements, with no external data source, purely illustrating programmatic shape creation and animation.

Jan 8, 2020