Luce Liu

@luceliu·7 public vizzes

Choropleth Map

A choropleth map colors countries by their economy classification using an ordinal color scale with a spectral scheme. The visualization loads geographic data from the World Atlas TopoJSON and TSV files, projecting it with d3.geoNaturalEarth1 and rendering paths via d3.geoPath. Hovering highlights a country in red, while a custom color legend component displays the categorical ranges. Zooming is enabled through d3.zoom, and the map includes a static sphere background.

Mar 3, 2020

Loading thumbnail…

Chloropleth Map

This choropleth map visualizes world countries with a natural Earth projection, coloring each nation light green and highlighting it red on hover. The visualization loads geographic data from the world-atlas TopoJSON and tab-separated country names, merging them by ID before rendering. Using D3 v5’s `geoNaturalEarth1` projection and `geoPath` generator, it draws SVG paths for each country, while TopoJSON’s `feature` API converts the topology into GeoJSON. A semi-transparent black stroke outlines national borders, and a blue sphere background represents the globe. Tooltips display country names via appended `title` elements.

Feb 23, 2020

Loading thumbnail…

Cheap Tricks for Interaction

This example shows a world map rendered with D3 v5 and TopoJSON, displaying country boundaries and names as tooltips. The map uses a natural Earth projection via `d3.geoPath` and `geoNaturalEarth1`, with countries filled in light green and a blue sphere background. Loading geographic data from the world-atlas package, the visualization adds a simple hover interaction: CSS changes the country fill to red on mouseover. Country names are joined to the geometry using ISO numeric codes from a TSV file and displayed via SVG `<title>` elements.

Feb 22, 2020

Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create a world map using D3.js, rendering countries as SVG paths filled with light green and a blue sphere as the globe backdrop. It employs the `d3.geoNaturalEarth1` projection and `d3.geoPath` to generate geographic shapes, while loading TopoJSON data from the world-atlas package and converting it to GeoJSON via `topojson.feature`. The map is drawn on a static 960×500 SVG canvas without interactivity.

Feb 22, 2020

Loading thumbnail…

Let's make a map with D3.js!

The example demonstrates how to create a world map visualization using D3.js, rendering geographic features as SVG elements. It shows country boundaries and a styled ocean sphere, with countries colored light green and outlined with subtle black strokes. The code loads GeoJSON data via `d3.json` from the world-atlas TopoJSON dataset, converts it using the TopoJSON client library, and projects the map with `d3.geoPath` and a geographic projection. The visualization includes a blue sphere background and depends on D3 v5 and the `topojson` library for data processing.

Feb 22, 2020

Loading thumbnail…

HTML Starter

This example demonstrates a simple smiley face drawn with SVG circles. The code selects the SVG element using d3.select, dynamically reads its width and height attributes, and positions a large yellow circle as the face with two smaller black circles for eyes. It uses D3 v5’s selection methods like append and attr to build the shapes, while the SVG canvas is set to 960×500 pixels in the HTML file.

Jan 10, 2020

Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face drawn with SVG shapes, whose eyebrows animate upward and then back down in a looping motion. It demonstrates fundamental D3.js DOM manipulation by selecting an `<svg>` element and appending groups for the eyes and eyebrows, using `d3.select` and `d3.arc` for the mouth path. The eyebrow movement relies on chained `transition().duration()` calls that adjust a `transform` attribute, while the face’s geometry is defined via static attributes for circles, rectangles, and the arc path.

Jan 10, 2020