Konstantin Krumin

@konstantinkrumin·3 public vizzes

Let's make a map with D3.js!

This example demonstrates how to create a choropleth map of U.S. counties using D3.js and TopoJSON. It renders a geographic projection with the `d3.geoAlbersUsa()` projection and `d3.geoPath()`, drawing landmasses as light green paths over a blue sphere. The map fetches county boundary data from the freeCodeCamp CDN, processes it with TopoJSON’s `feature()` function, and appends each country as an SVG path. The visualization uses an SVG canvas and is accompanied by a video tutorial, showcasing a straightforward workflow for building interactive maps.

Apr 9, 2020

Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create a choropleth map of U.S. counties using D3.js. It renders an SVG projection of the United States with a light background, then overlays county boundaries and merges them with education data loaded from freeCodeCamp’s testable projects API. The code uses `d3.geoAlbersUsa` for the projection, `d3.geoPath` to generate paths, and TopoJSON’s `feature` method to extract county geometries. Education statistics are fetched in parallel with county boundaries via `Promise.all`. The resulting visualization shows county outlines but does not yet color them by data values.

Apr 9, 2020

Loading thumbnail…

Customizing Axes

This bar chart shows the populations of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. It builds on a basic bar chart by customizing the D3 axes: removing the y-axis domain and tick lines, formatting x-axis tick labels with `d3.format` to abbreviate numbers (e.g., converting 'G' to 'B'), and adding an axis label and title. The code uses `d3.csv`, `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom` with SVG rendering.

Apr 1, 2020