Mina Rezaei

@minar68·4 public vizzes

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

This map visualization displays countries on a natural Earth projection, with oceans filled in blue and landmasses in light green with subtle black strokes. It draws a basemap from the World Atlas TopoJSON dataset using the `feature` method from Topojson, then renders the sphere and country boundaries with `d3.geoPath` and the `geoNaturalEarth1` projection. The code loads data asynchronously via `d3.json`, appends SVG paths, and styles the elements through CSS classes.

Feb 12, 2022

Loading thumbnail…

Untitled

This example displays a choropleth-style map of the United States using SVG paths. It renders state boundaries and fills each state as a separate path, with a hover effect that turns states red via CSS. The visualization loads TopoJSON data from a remote URL and converts it to GeoJSON using the `topojson.feature` and `topojson.mesh` APIs. It relies on `d3.geoPath` to project and draw the geographic shapes, while `d3.json` fetches the data asynchronously. State borders are drawn as a white stroke overlay for visual separation.

Feb 7, 2022

Loading thumbnail…

Maptimedavis Choropleth Map

A choropleth map colors countries by their economy category using a spectral color scale. The map is rendered with d3.geoPath and the d3.geoNaturalEarth1 projection, with a zoom interaction via d3.zoom. A color legend built with d3.scaleOrdinal and d3.schemeSpectral appears at the bottom left. Data comes from the World Atlas TopoJSON and TSV datasets, and hovering highlights a country in red.

Feb 6, 2022

Loading thumbnail…

New d3 map

This example demonstrates a minimal VizHub setup that loads D3 via a CDN and uses ES6 modules to display a greeting. It imports the `select` function from D3 to target the `#message` div and sets its text content to a string exported from a local `myMessage.js` module. The page renders the text "Hello VizHub!" centered with large font styling from an external stylesheet, illustrating basic module imports and DOM manipulation with `d3.select`.

Feb 5, 2022