NICHAPA

@Mind-mnp·11 public vizzes

Untitled

This example displays a map of Canada using GeoJSON data, with each province rendered as an SVG path. On mouse movement over a province, a tooltip div appears and tracks the cursor, displaying the province name from the data properties. The tooltip is shown by removing its hidden class and repositioned via inline CSS, while the province’s fill color changes on hover using CSS rules. The code uses `d3.geoPath` with an Albers projection and loads data from a remote GitHub repository.

Jul 27, 2023

Loading thumbnail…

Fork of Fork of India Map

This example displays a choropleth map of Indian states, coloring each region with a distinct category color and labeling it with the state name. It loads India’s state boundaries from a TopoJSON file via `d3.json`, then converts and projects the data using `topojson.feature` and a `d3.geoMercator` projection. The map is rendered as SVG paths with `d3.geoPath`, and a D3 ordinal scale with `schemeCategory10` assigns fills. State labels are placed at path centroids.

Jul 26, 2023

Loading thumbnail…

Fork of 2015 Internet Users World Map

This interactive world map visualizes Internet users per 100 people for 2015, using a choropleth of green shades where darker colors indicate higher usage rates. Hovering over a country reveals a tooltip with its name and percentage. The map supports zooming and panning through d3.zoom, with country boundaries rendered via d3.geoPath from TopoJSON data. Color encoding and the legend are built with d3-scaleOrdinal and the d3.schemeGreens palette, using data from the Kaggle Internet Users Dataset.

Jul 24, 2023

Loading thumbnail…

Fork of Choropleth Map with Interactive Filtering

This choropleth map displays world countries colored by economy type, with an interactive color legend that filters the map when clicked. Hovering over legend items dims non-matching countries, while selected countries are highlighted and the sphere fades to emphasize the filter. Built with d3.v5, it uses d3.geoNaturalEarth1, d3.geoPath, d3.scaleOrdinal, and d3.zoom for panning and zooming, rendering as SVG from TopoJSON world-atlas data.

Jul 22, 2023

Loading thumbnail…

Fork of Marks and Channels

This example visualizes the fundamental concept of marks and channels in data visualization, using six small multiples to demonstrate how the same dataset can be encoded through position, size, length, shape, and color. Each SVG panel uses a distinct D3 encoding, such as circles scaled by radius or symbols generated via `d3.symbol()`. The code relies on D3's selection API with `.join()` and `.each()` to create and update the graphics, along with color schemes like `schemeCategory10` and JavaScript modules to organize the distinct channel implementations.

Jul 22, 2023

Loading thumbnail…

Fork of Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates the general update pattern in D3 v5, showing how to handle adding, removing, and modifying data elements in a visualization. A bowl of fruit is rendered as circles with labels, using `scaleOrdinal` for color and radius mappings. The code uses `selection.selectAll`, `enter()`, `merge()`, and `exit()` to update the SVG scene over time, with timeout-driven changes removing an apple, replacing one with a lemon, and filtering the array. The rendering uses SVG primitives like `circle` and `text`.

Jul 22, 2023

Loading thumbnail…

Fork of Cheap Tricks for Interaction

This interactive world map displays country boundaries on a globe, with countries colored light green and the sphere blue. Hovering over a country turns it red, and users can zoom and pan the map. The visualization uses d3.geoPath with geoNaturalEarth1 projection, d3.zoom for interaction, and topojson.feature to convert TopoJSON data from the world-atlas package. Country names are loaded from a TSV file and attached as tooltips via SVG titles.

Jul 20, 2023

Loading thumbnail…

Fork of Choropleth Map

This choropleth map visualizes GDP per capita (PPP, current international $) by country, using data from the World Bank’s 2020 dataset. It renders countries as geographic paths via `d3.geoPath`, fills them with a sequential color scale (`d3.scaleQuantile` and `schemeYlGnBu`), and marks missing values in gray. The code fetches TopoJSON world atlas boundaries and a CSV dataset, then combines them using `topojson-client` and `d3.csvParse`. Natural Earth projection and graticule lines provide geographic context.

Jul 19, 2023

Loading thumbnail…

Fork of Polished World Map

This example displays a natural Earth projection world map, with graticules, landmasses filled in teal, and country borders rendered as distinct interior lines. It uses React to manage the component structure, along with d3-geo APIs such as `geoNaturalEarth1`, `geoPath`, and `geoGraticule` to project and draw the geometry. Geographic data comes from the World Atlas TopoJSON, processed with topojson’s `feature` and `mesh` functions to extract land polygons and country boundaries.

Jul 17, 2023

Loading thumbnail…

Fork of Polished World Map

This map visualizes healthy life expectancy by country using a dark-to-light blue sequential color scale. Built with React and D3 v5, it renders geospatial data as an SVG using `d3.geoEqualEarth` projection and `d3.geoPath`. Country boundaries come from World Atlas TopoJSON, with a white mesh overlay and graticules for visual polish. A color legend, generated via a `Legend` function, displays the value range. The map loads data through a custom `useData` hook that fetches and parses the TopoJSON topology.

Jul 16, 2023

Loading thumbnail…

Fork of Stylized Line Chart

This fork of a stylized line chart displays time-series temperature data from the Data Canvas Sense Your City dataset. It renders a smooth, natural curve through the data points using d3.line with curveNatural, React, and SVG. The visualization includes formatted time axis ticks, axis labels, and a clean, minimal design with custom Poppins typography. The useData hook loads the dataset via d3.json from the unpkg-hosted World Atlas TopoJSON file, though only the charting logic is exercised.

Jul 14, 2023