Kathi7-dot

@Kathi7-dot·5 public vizzes

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.

Mar 3, 2022

Loading thumbnail…

Bar Chart

This bar chart visualizes texting frequency by location, sourced from a CSV file accessed via a URL. The React app uses D3 v5 utilities like `scaleBand`, `scaleLinear`, `max`, and `csv` to process the data, which is sorted to show the top ten locations. Rendered as an SVG, the chart displays horizontal bars with a blue x-axis gridline, where each bar’s length corresponds to the numeric count from the '2019' column. The D3 `axis` functions are not directly used, but the scales and data mapping drive the visual encoding.

Mar 3, 2022

Loading thumbnail…

Missing Migrants on a World Map over Time with Brushing (Performance)

This visualization shows missing migrant incidents worldwide, with each death or disappearance represented as a bubble on a world map whose size reflects the reported death toll. Users can brush over a time-series below the map to filter incidents by date, revealing temporal patterns in migration routes. The example uses D3 v7’s `geoNaturalEarth1` projection, `geoPath`, and `geoGraticule` for map rendering, while React manages state and updates. Data comes from the Missing Migrants Project CSV, and the implementation demonstrates performance optimizations for rendering large numbers of points as SVG circles.

Feb 24, 2022

Loading thumbnail…

Untitled

A React application displays the static text “Hello React!” inside a styled div. The example uses React’s `ReactDOM.render` method to mount the component tree to the DOM element with the ID `root`. It defines a single functional component, `App`, which returns the message. The code imports the React library and the ReactDOM module, demonstrating a minimal setup for a React-based data visualization or interface, with no external data sources or complex rendering logic.

Feb 24, 2022

Loading thumbnail…

V1

This example displays the text “Hello D3 version 7” centered on a large white page, demonstrating a minimal setup for the latest major release of the D3 library. The code imports the `select` function from D3 and uses it to set the text content of the `<body>` element, while the HTML loads D3 v7 from a CDN. The page styling is applied through a CSS rule in the document head.

Feb 24, 2022