Skip to main content
SimilarExport ZIP
100%

VAST Challenge 2019

✓ Published1🌍 Public
KKathi7-dot
Last edited Mar 3, 2022
Created on Feb 24, 2022
Forked from React Starter

This example maps sensor locations from the VAST Challenge 2019 dataset onto a static SVG map of St. Himark. It renders geographic regions as filled paths and places circles at sensor coordinates using D3’s `geoNaturalEarth1` projection and `geoPath`. Built with React and D3.v7, the visualization uses `useSensors` to load CSV data asynchronously, while the SVG output supports hover transitions for highlighting hospitals.

AI-generated description

V1 VAST Challenge 2019 starting with a [map of St. Himark] (https://gist.github.com/Kathi7-dot/5aa9a67baaf444f1f516ab8a061ed095)

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of VAST Challenge 2019

This interactive visualization of the VAST Challenge 2019 dataset uses React and D3 v7 to render a stylized SVG map of St. Himark. It displays city districts as filled polygons alongside sensor locations marked by circles. The code implements a custom map projection using `d3.geoNaturalEarth1` and `d3.geoPath` to draw geographic boundaries, while sensor data is loaded from a remote CSV file using `d3.csv`. The interface is built with React components, with styles managed through CSS.

BBolarinwa Omoware
89% match
Loading thumbnail…

Fork of Fork of Fork of Stylized Line Chart

This example visualizes a geographic map of the Salem region using React and D3. The code renders SVG paths from TopoJSON data sourced from a GitHub gist, with the `geoMercator` projection applied at a high scale and specific center coordinates. The `geoPath` function generates the path data for each feature, while the styling uses a teal stroke color with rounded line joins. The map is displayed as a static visualization without interactive elements or additional chart layers.

Vvigneswaran009
72% match
Loading thumbnail…

Fork of Stylized Line Chart

This visualization displays a geographical map of a region, rendered as an SVG using a web Mercator projection with D3's `geoMercator` and `geoPath` functions. The map’s paths are drawn in a teal stroke with rounded line joins and caps. The underlying data comes from a JSON file fetched via `json` from a Gist, processed into GeoJSON features using the TopoJSON `feature` function. The React framework manages the application state, and the chart is styled with the Poppins font.

Vvigneswaran009
71% match
Loading thumbnail…

Map!

This visualization displays a world map rendered as SVG paths using the Mercator projection. The code fetches GeoJSON data from a remote World Atlas source via `d3.json`, then relies on `d3.geoPath` and `d3.geoMercator` to project coordinates into screen space. The application uses D3 v5 within a React framework, though the current script only loads the data without binding it to visible shapes.

DDavid Kiarie
71% match
Loading thumbnail…

Untitled

This example presents a static SVG visualization inspired by Minard’s map of Napoleon’s Russian campaign, plotting the army’s path through cities like Minsk and Moscou with associated temperature annotations. The code uses D3 v7 to render custom path data for the route and temperature lines, while manually positioning city labels and survivor count text. It displays daily temperature readings and dates along the retreat, with a textured background. The visualization relies on hardcoded arrays for city coordinates, temperature points, and survivor counts, rendered entirely through SVG elements rather than interactive scales or axes.

IIshan Goyal
69% match
Loading thumbnail…

World maping

This example displays a world map rendered as an SVG using React and D3. It shows country boundaries via a spherical equal-earth projection, with land areas filled in teal and the surrounding sphere in light gray. The visualization loads GeoJSON data from the World Atlas TopoJSON file, converts it using topojson’s `feature` method, and draws the paths with `d3.geoPath`. The map is static, with no interaction or animation.

Ppatasky
69% match
Loading thumbnail…

Visualization-tutorial

This example displays a world map with country boundaries, graticules, and interior borders, rendered as SVG paths. The visualization uses d3.geoPath with d3.geoNaturalEarth1 to project land features and generates sphere and graticule outlines. It loads TopoJSON data from the World Atlas repository to draw landmasses, while an interior mesh defines shared borders. The React-based interface, styled with CSS, also fetches city data from a CSV file, though the map itself focuses on geographic boundaries rather than plotting those points.

Rramdev2021
69% match
Loading thumbnail…

My map

This map displays global cities as labeled points overlaid on a Mercator-projected world map. It uses d3.geoPath to render country boundaries from a GeoJSON file and d3.geoMercator to project coordinates. City data from a CSV file is plotted with SVG circles and text labels. The visualization is built with React, uses SVG rendering, and loads both datasets via Promise.all.

VVineel Gannu
69% match