Skip to main content
SimilarExport ZIP
100%

Fork of VAST Challenge 2019

✓ Published0🌍 Public
BBolarinwa Omoware
Last edited Apr 5, 2022
Created on Apr 5, 2022

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.

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…

VAST Challenge 2019

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.

KKathi7-dot
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
78% match
Loading thumbnail…

Fork of Fork of Stylized Line Chart

This example displays the Salem district map as a stylized line chart, rendering geographic boundaries as bold, teal strokes on a plain background. The visualization uses a React-based architecture with SVG, and the map geometry is processed from TopoJSON data using the `feature` function. The GeoJSON features are projected and drawn through `d3.geoMercator` and `d3.geoPath`, which are called within a React component structure. The underlying data comes from the Data Canvas Sense Your City Dataset, loaded asynchronously via `d3.json` and a custom `useData` hook.

Vvigneswaran009
77% 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
76% match
Loading thumbnail…

Fork of HTML Starter

This visualization presents an interactive dashboard for exploring environmental sensor data. It renders a world map alongside line charts and a contour map, allowing users to select different sensor attributes from a dropdown menu. The code uses React with hooks, D3 scales and time parsing, and SVG rendering. Data is fetched from a local API endpoint, with brushed time ranges filtering the displayed temporal and spatial patterns.

CCheng Tang
75% match
Loading thumbnail…

Fork of Working with

This example displays a world map visualization of the Data Canvas Sense Your City dataset, rendered as SVG paths. Using React hooks for state management, the code fetches TopoJSON country boundaries and converts them to GeoJSON with `topojson.feature`. The `d3.geoEqualEarth` projection and `d3.geoPath` generate the map shapes, which are styled with cyan fill and gray strokes. The visualization loads geographic data from the unpkg-hosted world-atlas package.

AAmnaRizvi-S
75% match
Loading thumbnail…

Fork of Stylized Line Chart

This example displays a world map rendered with a natural Earth projection, using SVG paths to show land masses, country borders, graticules, and a sphere outline. The visualization is built with React and D3 v5, where the `geoNaturalEarth1` and `geoPath` functions generate geographic paths from the World Atlas TopoJSON dataset. Country interiors are separated via `mesh` from the topojson library, while the styling applies a teal land fill and gray graticules for a clean, minimalist aesthetic. The map appears static, with data loaded asynchronously through a custom `useData` hook.

Wwhiteswallow87
75% match
Loading thumbnail…

Fork of Making a world map with city points React and D3

This example visualizes a world map with city points using React and D3. The map displays missing migrant incidents, with circle sizes representing the “Total Dead and Missing” metric via a d3.scaleSqrt. The geoNaturalEarth1 projection renders country boundaries, graticules, and interiors using d3.geoPath, while topojson provides the world-atlas data. City coordinates are projected and plotted as circles, with data loaded from a CSV using d3.csv. The SVG-based rendering uses React components for the atlas and marks.

Bblackbottt
74% match