jnpatel

@jnpatel·3 public vizzes

Let's make a map with D3.js!

This example shows a world map rendered as an SVG, with countries filled in light green against a blue spherical backdrop. It uses D3.js version 5 and the TopoJSON library to load and convert world-atlas data (110m resolution) into GeoJSON features. The map is drawn with `d3.geoPath` and a natural Earth projection (`d3.geoNaturalEarth1`), while a separate path renders the globe’s sphere outline. Country boundaries appear with a subtle black stroke, and the map updates once the external JSON data loads.

Jul 31, 2020

Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries in 2018, using data from the United Nations World Population Prospects. It demonstrates customized D3 axes: the y-axis removes its domain and tick lines, while the x-axis uses a custom tick format that converts values like "1.42G" to "1.42B" and includes a label. The chart is rendered as SVG with D3 v5, using `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft`.

Jul 31, 2020

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn with D3.js as an SVG, featuring circular eyes, rectangular eyebrows, and a mouth created using the D3 arc generator. The eyebrows animate upward and back down over four seconds via chained `transition().duration()` calls on the group containing them. The code imports `select` and `arc` from d3, uses an SVG canvas, and positions facial features relative to the viewport center.

Jul 31, 2020