ramdev2021

@ramdev2021·4 public vizzes

Fork of Multiple Views with Brushing

This visualization combines a bubble map and a date histogram to explore global migration incidents. A d3.geoNaturalEarth1 projection displays the world map with circles sized by the total dead and missing, while a brushing interaction on the time-series chart filters the map’s data. The histogram bins incidents by month using d3.bin, with a brushX selection updating the map’s displayed circles. Built with React and d3.v5, it renders SVG elements and uses data from the Missing Migrants Project and World Atlas TopoJSON.

Feb 10, 2022

Loading thumbnail…

Fork of Points

This interactive world map visualizes cities with populations exceeding 50,000, plotted as semi-transparent teal dots over a light gray landmass. The map employs the Natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to render country boundaries, graticules, and interior borders using SVG paths. City coordinates are projected with the same projection and drawn as circles, with data sourced from the Simplemaps World Cities Database. The visualization is built with React and D3 v5, loading both GeoJSON topology and CSV data asynchronously before rendering.

Feb 10, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render a scatter plot of Auto MPG data from the UCI Machine Learning Repository, loaded via `d3.csv`. The visualization encodes miles per gallon (mpg) on the x-axis and horsepower on the y-axis as quantitative fields, with color mapped to the categorical origin of each vehicle. Point size represents weight, and tooltips display model names using `vl.tooltip()`. The chart is built programmatically in `viz.js` and rendered with an SVG view, customized through a shared `config.js` for improved label and title readability.

Feb 10, 2022

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.

Feb 10, 2022