91geethikaalwis

@91geethikaalwis·5 public vizzes

Fork of Cheap Tricks for Interaction

This fork demonstrates interactive zooming and panning on a world map, with country names shown on hover. The visualization renders countries using D3’s geo projection and path generation (`d3.geoProjection`, `d3.geoPath`), with geographic data from the world-atlas package. D3’s zoom behavior (`d3.zoom`) is called to handle transforms on the SVG group. Country boundaries are styled in CSS and change color on hover, with tooltips populated from the accompanying TSV file.

Feb 11, 2023

Loading thumbnail…

Fork of Choropleth Map

This choropleth map colors world countries by their economy classification, with a color legend displaying each category as colored circles with text labels. The visualization uses D3 v5 with a natural Earth projection, rendering geographic features as SVG paths from TopoJSON world-atlas data. Users can zoom and pan interactively via d3.zoom, and hovering over a country highlights it in red while a tooltip shows its name and economy type. The color scale uses d3.scaleOrdinal with a spectral scheme, and the legend is drawn using a custom reusable component.

Feb 11, 2023

Loading thumbnail…

Mapspointsjs!

This example displays a world map using SVG paths, with each country filled in white and outlined in black. Hovering over a country highlights it in red and reveals its name in a tooltip. The map is built with D3’s `geoPath` and `geoNaturalEarth1` projections to render geographic features, while the `topojson` library processes the country boundaries from a remote TopoJSON source. All rendering occurs client-side in SVG, with interaction handled through CSS hover states and D3’s `select` and `json` functions.

Feb 11, 2023

Loading thumbnail…

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

This is a D3.js map of the world created with a Natural Earth projection, using `d3.geoPath` and `d3.geoNaturalEarth1` to render country outlines. Each country is joined with a CSV dataset by its numerical ID, and hovering over a country triggers a custom tooltip via `d3.select` and DOM `mouseover` events, displaying the country's ID and its associated value from the CSV. The visualization demonstrates basic interaction and data-binding on an SVG canvas, with countries colored light blue and highlighting red on hover.

Feb 10, 2023

Loading thumbnail…

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

This visualization displays a world map with color-coded countries, rendering geographic boundaries as SVG paths. It uses D3’s `geoNaturalEarth1` projection and `geoPath` to draw the map, with country data loaded from a CSV containing IDs and values. A tooltip appears on mouseover, showing the country code and its associated value. The example uses the `topojson` library’s `feature` function to convert TopoJSON to GeoJSON, and D3’s `select`, `geoPath`, and `csv` APIs for DOM selection, path generation, and data parsing.

Feb 10, 2023