Skip to main content
Log in
S

Shantanu

@Shantanu177·12 public vizzes

Loading thumbnail…

Optimized Brushing

This visualization displays migrant deaths and missing persons worldwide on a natural Earth projection map, with bubble sizes scaled by the square root of the total dead and missing count. A linked histogram below shows the same data binned by month, and users can brush across the histogram to filter the map’s bubbles in real time. Built with React and D3 v5, it uses `geoNaturalEarth1` and `geoPath` for the map, `scaleSqrt` for bubble sizing, `brushX` for the brushing interaction, and `useMemo` to optimize rendering. Data comes from the Missing Migrants Project CSV, with country boundaries from World Atlas TopoJSON.

May 25, 2021
Loading thumbnail…

Points on a ma

This example displays a world map with country boundaries and graticules, overlaid with circular points representing cities. The map is rendered using SVG paths generated with d3.geoPath and the geoNaturalEarth1 projection, while the city locations are projected onto the map and drawn as circles. The visualization uses React to manage the data loading and rendering, with d3.csv fetching city data from a remote source and topojson processing the world atlas topology. The map is styled with a subtle color palette for land, interiors, and graticules.

May 25, 2021
Loading thumbnail…

Only Bar Chart no axisLabels

This visualization displays the ten most populous countries as horizontal bars, but omits all axis labels, tick marks, and value annotations, making the chart’s quantitative information difficult to interpret. The code loads United Nations World Population Prospects 2019 data via `d3.csv`, filters to the top ten rows, and maps country names to y-coordinates using `d3.scaleBand` while population values set bar widths through `d3.scaleLinear`. React renders each bar as an SVG `rect`, with the chart sized at 960 by 500 pixels.

May 25, 2021
Loading thumbnail…

Load d3 data and use react

This example demonstrates how to load external CSV data and manage it within a React component. It fetches a dataset of CSS named colors using d3.csv and displays summary statistics—file size, row count, and column count—in a large text element. The React useState and useEffect hooks handle the asynchronous data loading, while the message function from a separate module uses d3.csvFormat to calculate the character length. The visualization updates from a loading state to the formatted data summary once the promise resolves.

May 25, 2021
Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates the parsing of CSS Named Colors CSV data, presenting the file size, number of rows, and columns in a large text display. It uses the `d3.csv` method to fetch and parse the remote CSV file from a GitHub gist, then computes and displays statistics using `d3.csvFormat` and the parsed data array’s `length` and `columns` properties. The page also includes commented-out alternative approaches using `fetch`, `async/await`, and `d3.csvParse`, highlighting different ways to handle CSV loading in D3 v5.

May 25, 2021
Loading thumbnail…

Fast Brushing

This visualization combines a world map and a time-series histogram to explore migrant deaths and disappearances. Users can brush over the histogram to filter the map’s bubbles, which represent the total dead and missing per location, illustrating the geographic distribution of events within a selected time window. The map uses d3.geoNaturalEarth1, d3.geoPath, and graticules, while the histogram uses d3.bin and d3.brushX. React’s useMemo optimizes rendering performance, with city data from Simplemaps and country boundaries from World Atlas TopoJSON.

May 21, 2021
Loading thumbnail…

Hist + Map - with Brushing

This interactive visualization combines a proportional-symbol world map with a brushed time-series histogram. The map displays circles scaled by the total number of dead and missing migrants, projected using `d3.geoNaturalEarth1` and `d3.geoPath` with graticules and country boundaries from TopoJSON. The histogram, built with `d3.bin` and `d3.scaleTime`, aggregates monthly totals, and its `d3.brushX` selection filters the map’s data points based on the reported date range. Built with React and D3 v5, it renders entirely as SVG elements.

May 20, 2021
Loading thumbnail…

Sized Points on map

This example displays a world map with cities represented as sized points, where the radius of each circle corresponds to the city's population. The visualization uses a natural Earth projection, rendered via SVG in a React application, with the `d3.geoNaturalEarth1` projection and `d3.geoPath` for geographic boundaries. Graticules and land interiors are styled with subtle gray strokes, while city circles are drawn using `projection([d.lng, d.lat])` and scaled with `d3.scaleSqrt`. Data comes from a CSV of world cities and the World Atlas TopoJSON.

May 20, 2021
Loading thumbnail…

Fork of Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris Dataset, mapping petal length against sepal width with points colored by species. Hovering over a species name in the color legend dims all other points while highlighting the selected group, implemented through React state management and conditional opacity. The visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for categorical colors, and renders SVG circles via React components. Axis ticks and color legend items are generated from d3 scale domains, with native SVG `<title>` elements providing tooltips on data points.

May 19, 2021
Loading thumbnail…

D3 colors disp (pie)

This example displays a simple text summary of the CSS named colors dataset, showing the file size in kilobytes, number of rows, and number of columns. The application loads the CSV data from a GitHub gist using `d3.csv` and manages the asynchronous data fetching with React’s `useState` and `useEffect` hooks. Once loaded, the `message` function calculates the statistics using `d3.csvFormat` and renders the result inside a `<pre>` element, with a loading state shown until the data arrives.

May 17, 2021
Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes automobile performance data from the UCI Auto MPG dataset. Each circle represents a vehicle, positioned by miles per gallon and horsepower, colored by country of origin, and scaled by weight. The visualization is built using the Vega-Lite API, which constructs the chart specification, with Vega rendering the SVG output. D3 handles CSV data loading, while Vega-Tooltip provides interactive hover details. The interface automatically fits the chart to the browser window, with customized axis styling and enlarged typography for improved readability.

May 17, 2021
Loading thumbnail…

Fork of Mouse Follower

A circle follows the mouse pointer inside an SVG canvas. The React application tracks the cursor’s client coordinates and updates the circle’s center position accordingly. It uses the `useState` hook for the mouse position and `useCallback` to handle mouse movement events, rendering the circle with the SVG `<circle>` element. The code relies on React 16.9 and ReactDOM to manage the interactive state and render the visualization.

May 14, 2021