Runxin Shao

@RunxinShao·5 public vizzes

Fork of Let's make a map with D3.js!

This example renders a world map using the Natural Earth projection, displaying countries as light green shapes with subtle black outlines against a blue sphere. It loads geographic data from the world-atlas TopoJSON dataset and converts it to GeoJSON using TopoJSON’s `feature` function. The map is drawn with D3’s `geoPath` and `geoNaturalEarth1` projections, appending SVG paths for each country and the surrounding sphere. The visualization demonstrates a straightforward D3 v5 workflow for projecting and displaying map data in an SVG container.

May 23, 2023

Loading thumbnail…

Fork of Color and Size Legends

This example demonstrates two common legend types: a color legend mapping ordinal fruit categories to distinct hues, and a size legend using a square-root scale to map numeric values to circle radii. The SVG renderings use d3’s selection API (`selection.selectAll`, `selection.enter`) and custom legend modules (`colorLegend`, `sizeLegend`) that generate tick groups with shapes and labels. The color legend uses `scaleOrdinal` with explicit color ranges, while the size legend calls `scaleSqrt.ticks()` to compute interval breaks, with circles stylized via CSS.

May 22, 2023

Loading thumbnail…

Fork of Color and Size Legends

This example demonstrates two reusable legend components for D3 visualizations: a color legend showing ordinal categories (apple, lemon, lime, orange) with distinct hues, and a size legend using `scaleSqrt` to map numeric values to circle radii. The code exports `colorLegend` and `sizeLegend` as JavaScript modules, using `selection.selectAll` and `groups.enter()` to bind data, append SVG circles and text, and handle updates. The legends are rendered with d3.v5, with text styling defined in an external stylesheet.

May 22, 2023

Loading thumbnail…

Fork of Let's make a face with D3.js!

A yellow smiley face is drawn with SVG circles and an arc path, and its eyebrows animate by moving up and down. The example demonstrates basic D3.js DOM manipulation and transitions, using `d3.select`, `d3.arc`, and chained `transition().duration()` calls to shift the eyebrow group's transform attribute. The face is centered with a translated `g` element, and all shapes are positioned using hardcoded pixel offsets. Rendering uses SVG within an HTML page, with animation running continuously in two-second cycles.

May 21, 2023

Loading thumbnail…

Fork of Temperature in San Francisco Line Chart

This line chart visualizes one week of temperature data in San Francisco, sourced from the Data Canvas - Sense Your City project. The visualization plots timestamp on the x-axis against temperature on the y-axis, with a smooth curve connecting the data points. Built with D3 v5, the code uses functions like `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` to create the chart, rendered as SVG. The design includes labeled axes, a title, and a maroon line path with a basis curve, all styled via an external CSS file.

May 20, 2023