Annie Liao

@liaowow·15 public vizzes

World Countries Tree

This example shows the hierarchical structure of world countries, grouped by continent and subregion, as an indented tree of text labels. The visualization uses a D3.js tree layout with hierarchical data, rendered as SVG. It employs `d3.hierarchy` to process the JSON data, `d3.tree` for layout, and `d3.linkHorizontal` to draw the connecting paths. Text labels display country and region names, with font size decreasing by depth, and the view is interactive via `d3.zoom` for panning and scaling.

Jul 17, 2020

Loading thumbnail…

Map Interaction with D3!

This example shows an interactive world map rendered with SVG paths, where hovering over a country reveals its name as a tooltip and the map supports zooming and panning. It uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to draw countries from TopoJSON data provided by the world-atlas package, with country names loaded from a TSV file. The zoom behavior is implemented via D3’s `zoom` API, transforming a group element on the `zoom` event.

Jul 16, 2020

Loading thumbnail…

Making a Map with D3!

This visualization displays a world map in a natural Earth projection, with countries filled in pale green and the sphere rendered in cornflower blue. The code uses D3 v5’s `geoPath` and `geoNaturalEarth1` projections, along with the topojson `feature` function, to convert GeoJSON country boundaries into SVG paths. Country data comes from the world-atlas 110m dataset, while the map’s ocean and landmasses are drawn as separate SVG paths.

Jul 14, 2020

Loading thumbnail…

Nested Elements

A fruit bowl rendered in SVG shows a row of apples and a lemon, with each fruit as a circle inside a rounded rectangle. D3’s `scaleOrdinal` maps fruit types to circle radii and fill colors, while `merge` and `transition().duration(1000)` animate changes to the fruit data. Over three seconds, the visualization removes an apple, swaps an apple for a lemon, and deletes another apple, demonstrating how D3’s selection API handles nested elements and dynamic updates.

Jul 2, 2020

Loading thumbnail…

Hover to Select: Interaction with Unidirectional Data Flow

Five fruit circles render in an SVG using D3 v5 within a React framework, with apples and lemons distinguished by ordinal color and radius scales. Hovering over a circle triggers a navy stroke via mouseover and mouseout events, updating a selectedFruit state variable that flows unidirectionally into the fruitBowl render function. Transitions animate circle entry, exit, and size changes over one-second durations as the fruit array is modified through pop and type replacement operations.

Jun 22, 2020

Loading thumbnail…

Click to Select: Interaction with Unidirectional Data Flow

Five fruit circles animate in and out of a bowl, and clicking one selects it with a navy stroke. The example demonstrates unidirectional data flow where React-like state changes trigger a re-render that updates SVG circles via D3’s data join and `transition` for smooth radius and fill changes. It uses `scaleOrdinal` for color and size, `selectAll` with key functions, and `merge`/`exit` for enter-update-exit patterns. The code shows automatic updates as fruits are removed or replaced without direct DOM manipulation.

Jun 22, 2020

Loading thumbnail…

General Update Pattern

This example demonstrates D3’s general update pattern for smoothly transitioning a fruit bowl’s contents over time. The React-rendered SVG shows apples and lemons as colored circles, with entries scaling up from radius 0, updates shifting positions and recoloring, and exits shrinking away. Using `d3.scaleOrdinal` for color and radius, the code leverages `selection.enter()`, `merge()`, and `exit()` with `transition().duration(1000)` to animate state changes triggered by timed `setTimeout` calls that remove, replace, and filter fruit data.

Jun 17, 2020

Loading thumbnail…

NYC Air Quality Area Chart

This area chart tracks NYC PM2.5 air pollution levels from February to May 2020, showing a decline in particulate matter during the early COVID-19 period. The visualization uses D3 v5 with an SVG rendering, employing `scaleTime` and `scaleLinear` for axes, an `area()` generator with `curveBasis` for the smoothed fill, and `axisLeft`/`axisBottom` for ticks. Data is loaded from a local CSV file via `d3.csv` and mapped to the weekly measurements.

Jun 15, 2020

Loading thumbnail…

NYC Air Quality Line Chart

A line chart tracks NYC’s weekly PM2.5 air pollution levels from February to May 2020, revealing a declining trend during the early COVID-19 period. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, and `line` generator, rendered as an SVG on a blue background with a lavender stroke. Data comes from the NYC government website, loaded via `csv()`. The chart includes labeled axes for time and PM2.5 concentration, with gridlines, but no data points or smoothing curves.

Jun 11, 2020

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for a dataset of cars from the UCI Machine Learning Repository. The visualization uses D3 v5, rendering with the `scaleLinear` function to map data values to plot coordinates, while `axisLeft` and `axisBottom` create labeled axes with gridlines. Each car is represented as a lavender circle with 0.8 opacity, plotted against a crimson background. The code loads data from a CSV file using `csv()`, converts numeric fields, and applies nice rounding to the scales for a clean presentation.

Jun 9, 2020

Loading thumbnail…

Making a Scatter Plot

A scatter plot displays weekly PM2.5 air quality levels in midtown Manhattan from February to May 2020, sourced from the NYC government website. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear` for the x-axis and `scalePoint` for the y-axis dates. Circles are positioned with `cx` and `cy` attributes, while `axisLeft` and `axisBottom` generate gridlines. The chart highlights declining air pollution during the early COVID-19 outbreak period.

Jun 9, 2020

Loading thumbnail…

Making a Bar Chart

This bar chart displays weekly PM2.5 air quality levels in midtown Manhattan from February to May 2020, showing a general decline during the early COVID-19 outbreak, with data sourced from the NYC government website. Rendered as an SVG using D3 v5, the visualization employs `csv` to load data, `scaleLinear` for the x-axis, `scaleBand` for the y-axis dates, and `axisLeft`/`axisBottom` for axes. Bars are drawn with `rect` elements, while a light-blue background and lavender fills enhance readability.

Jun 8, 2020

Loading thumbnail…

Making a Face with D3!

A face composed of yellow circle, eyes, eyebrows, and a mouth is drawn with SVG using D3 v5. The brows animate vertically via chained `transition()` calls, moving down then back up. The code uses D3’s `select`, `arc`, and `attr` for shape creation and positioning, with a React-free setup rendering into a static SVG.

Jun 6, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how simple geometric shapes can be composed and styled using SVG elements and CSS. It shows two circles and two rectangles arranged on a canvas, with a lime stroke applied to one group and a hotpink line and path rendered as part of a separate group. The code uses raw SVG markup within an HTML page, along with a linked stylesheet that applies global typography and group-specific styling, such as stroke color and width, as well as a round line join for the path.

Jun 5, 2020

Loading thumbnail…

Cars Report

This example displays a plain-text report of cars priced under $2,000, loading the list asynchronously via a Promise in `getCars.js`. It formats each entry with `formatCar` into a “year make model $price” line and joins them with newlines in `generateReport`. The React-free interface uses vanilla DOM manipulation in `index.js` to update a `<pre>` element, while a simulated one-second delay demonstrates async data fetching before rendering the report.

Jun 5, 2020