yycgrace

@yycgrace·5 public vizzes

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

This example displays a natural Earth projection of the world, with countries filled in light green against a blue ocean sphere. It loads GeoJSON country boundaries from the World Atlas TopoJSON file and renders them as SVG paths using `d3.geoPath` with the `geoNaturalEarth1` projection. The code uses `d3.json` to fetch the data and `feature` from TopoJSON to convert it to GeoJSON. A single SVG element holds both the sphere backdrop and the country outlines, which have a subtle black stroke.

Jan 5, 2021

Loading thumbnail…

Customizing Axes

This bar chart visualizes the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The chart uses D3’s `scaleLinear`, `scaleBand`, and axis functions to customize both axes, removing default domains and tick lines while adding grid lines, custom tick formatting, and axis labels. Data is loaded from a CSV file and rendered as SVG rectangles with styled text.

Dec 6, 2020

Loading thumbnail…

Making a Bar Chart

This example visualizes the population of the top 10 most populous countries using a horizontal bar chart, based on 2018 estimates from the United Nations World Population Prospects. The chart uses D3 v6 with SVG rendering, employing `scaleLinear` and `scaleBand` for the x and y scales, respectively, and customizing the axes with `axisLeft` and `axisBottom`. Data is loaded from a CSV file via `d3.csv`, with population values converted from thousands to absolute numbers before rendering.

Dec 6, 2020

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG with D3.js, featuring two eyes, brown eyebrows, and a mouth created using the `d3.arc` path generator. The eyebrows, grouped with the eyes, animate downward over two seconds and then return to their original position, using chained `transition` calls on the group's `transform` attribute. The face is centered within an SVG canvas by translating a root group, with all shapes positioned relative to this group. The code demonstrates fundamental DOM manipulation, selection, and attribute handling in D3 version 6.

Dec 6, 2020

Loading thumbnail…

HTML Starter

This example demonstrates the simplest possible web page with a single centered text element. The page uses CSS to style the body with large, centered text and imports D3 v6. The JavaScript code calls `select('body')` from D3 and sets the text content to "hello", showing the minimal setup required to combine HTML, CSS, and D3 for data visualization. It follows the React Starter pattern but with a plain HTML approach.

Dec 5, 2020