maferayala

@maferayala·4 public vizzes

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

This visualization displays a world map using a natural Earth projection, with countries filled in light green and oceans in blue. The map is rendered as SVG paths on a 960×500 canvas using D3.js version 5 and the TopoJSON library. The code loads country boundaries from a world-atlas JSON file and projects them with d3.geoNaturalEarth1 and d3.geoPath. Each country’s outline is drawn as a separate path with a subtle black stroke, while a sphere path fills the background before the country data arrives.

Jul 30, 2022

Loading thumbnail…

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

This example renders a choropleth-style map of continental Costa Rican cantons using a Mercator projection. It loads GeoJSON data via `d3.json` and draws the geographic features as SVG paths with `d3.geoPath` and `d3.geoMercator`. The code binds the fetched features to path elements, generating each shape’s outline directly from the GeoJSON geometry. The map uses a minimal styling approach with a full-window SVG and no additional data-encoding layers.

Jul 30, 2022

Loading thumbnail…

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

This example uses D3 v5 and TopoJSON to render a natural Earth projection world map. It draws a blue sphere outline via a `geoNaturalEarth1` projection and `geoPath`, then loads country boundaries from the world-atlas 110m TopoJSON dataset. Each country is appended as an SVG path with a light green fill and black stroke, while the sphere is colored dark blue. The map is static and demonstrates basic geographic data loading, projection, and SVG rendering.

Jul 30, 2022

Loading thumbnail…

Fork of Hello HTML

A minimal HTML page demonstrates an SVG circle with no visible attributes beyond a radius of 100 pixels, leaving it centered at the origin of the SVG viewport. The page contains no JavaScript or styling, only the raw `circle` element inside an `svg` tag. The example highlights a basic, unstyled SVG shape rendered directly in the browser, with no data loading or interaction. This fork of the "Hello HTML" template serves as a starting point for SVG visualizations.

Jun 29, 2022