Sun-XH

@Sun-XH·6 public vizzes

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

This example displays a world map using D3.js, with each country rendered as a light green SVG path with subtle black strokes. The visualization fetches geographic data from the world-atlas TopoJSON file and converts it into GeoJSON features using the `feature` function from TopoJSON. The map uses the `geoNaturalEarth1` projection and draws paths with `geoPath`. The code loads a video tutorial in the README, and the map itself appears on a plain white background with no additional interaction.

Nov 18, 2021

Loading thumbnail…

Let's make a face with D3.js!

This example builds a smiley face in SVG using D3.js v5, constructing the head, eyes, eyebrows, and mouth from geometric primitives like `circle`, `rect`, and `d3.arc`. The face is centered via SVG transforms, with the eyebrows animated upward and back down using chained `transition().duration(2000)` calls on a group element. No external data is loaded; the visualization focuses on programmatic DOM manipulation and declarative animation within an SVG canvas.

Nov 14, 2021

Loading thumbnail…

Let's make a face

A yellow circle with black outlines forms a simple face, complete with eyes, eyebrows, and a mouth. The eyebrows animate by moving up and down repeatedly over two-second transitions. Built with D3 v5, the example uses `d3.select`, `d3.arc` for the mouth path, and SVG elements like circles and rectangles. The rendering is SVG-based with animation handled through chained `transition().duration()` calls.

Oct 25, 2021

Loading thumbnail…

Shapes with SVG and CSS

This example shows how basic geometric shapes—circles, rectangles, lines, and a path—are assembled into a structured composition. An SVG canvas scales the entire group, while CSS classes and inline attributes control fill colors, stroke properties, and line joins. The code uses the native SVG elements `circle`, `rect`, `line`, and `path`, along with the `transform` attribute to translate and scale groups. Inline presentation attributes such as `fill` and `stroke` work together with the external stylesheet to define the visual appearance, demonstrating the interplay between SVG markup and CSS styling.

Oct 22, 2021

Loading thumbnail…

HTML Cars Report

A static HTML page presents a car report listing three used vehicles with year, model, and price. It displays the data directly, with the first entry—the 2012 Nissan Leaf—highlighted in red via a CSS class. The example uses plain HTML markup with a linked external stylesheet to control font size, family, and the highlighting style. No JavaScript libraries or data-processing APIs are involved.

Oct 22, 2021

Loading thumbnail…

Cars report

This example displays a text-based report of used cars priced under $2,000, listing each vehicle’s year, make, model, and price. After a simulated two-second delay, the data loads and the report replaces an initial “Loading data” message in the page’s `<pre>` element. The code uses JavaScript promises and `setTimeout` in `getCars.js` to fetch the data, and the `generateReport` function filters and formats the car objects via `Array.filter` and `Array.map`.

Oct 21, 2021