S

SuperShreejit

@SuperShreejit·17 public vizzes

Loading thumbnail…

Missing Migrants Log scale scatterplot

This chart plots every reported migrant death or disappearance event in 2019 over time, using a log-scale y-axis to display both small and large casualty counts clearly. Each circle marks a single incident, with a native SVG `<title>` tooltip showing its exact date on hover. The visualization is built with React and D3 v5, using `scaleTime` and `scaleLog` for axes, and reads data from the Missing Migrants Project global subset CSV. The SVG rendering uses D3 tick generators and interactive hover via tooltips.

Loading thumbnail…

React world HIV/AIDS map

A React-based choropleth map visualizes global HIV/AIDS prevalence among adults aged 15-49 for the year 2017, using a yellow-to-red sequential color scale to represent the percentage of infected populations. The map renders geographic boundaries via topojson world atlas data and d3.geoPath with a geoNaturalEarth1 projection, while graticule lines and borders provide spatial context. Countries lacking data appear gray. The visualization loads HIV prevalence statistics from an IHME CSV dataset, merges them with ISO country codes, and displays tooltips revealing country names on hover.

Loading thumbnail…

React world map + migrant death/missing points + histogram with brush

This React visualization combines a natural Earth projection world map with migrant death and missing person data, plotted as scaled circles whose radius encodes the total count. A linked histogram below displays the monthly distribution of deaths, featuring a brush filter that dynamically updates the map’s displayed points based on the selected date range. The code uses d3.geoNaturalEarth1, d3.geoPath, d3.geoGraticule, d3.scaleSqrt, d3.bin, d3.brushX, and d3.timeMonths, rendering SVG elements with topojson world atlas data and CSV migrant records.

Loading thumbnail…

React world map + migrant death/missing points + histogram

This visualization combines a world map with a histogram of migrant deaths and missing persons. The map uses a D3 natural Earth projection with SVG paths for land, borders, and graticules, overlaid with circles scaled by the square root of the reported deaths. Below, a time-based histogram bins monthly totals using d3.bin and displays them as rectangular bars. Data is loaded from CSV and TopoJSON sources, rendered with React, with tooltips showing counts and dates.

Loading thumbnail…

React world map + migrant death/missing points

A React-based world map displays migrant deaths and missing persons as semi-transparent circles, sized using a square-root scale to encode the reported total per location. The natural Earth projection renders geographic landmasses and graticules via `d3.geoPath`, with topojson world-atlas data providing country boundaries. Circle positions derive from parsed CSV coordinates, while hover tooltips reveal the reported date and death count. The visualization uses `d3.scaleSqrt` for radius mapping and processes data through custom React hooks for asynchronous loading of both map and migrant datasets.

Loading thumbnail…

React Histogram chart

This interactive histogram visualizes monthly migrant deaths and missing persons from a 2019 global dataset. Built with React and rendered as SVG, the chart uses D3’s `scaleTime`, `scaleLinear`, `bin`, and `timeMonths` APIs to bin reported dates into monthly intervals and sum the corresponding death counts. Each bar’s height and position derive from the linear y-scale and time x-scale, with tooltips revealing exact values and dates. Data is loaded via D3’s `csv` from a GitHub gist.

Loading thumbnail…

React Line chart

This chart displays weekly San Francisco temperature data from a public GitHub CSV, combining a smooth, natural-curve line with circular markers that reveal exact values on hover. Built with React and rendered as SVG, it uses d3.scaleTime and d3.scaleLinear to map timestamps and temperatures, while d3.curveNatural generates the path. Custom React components for the axes and marks structure the visualization, with d3.csv loading the dataset and D3’s timeFormat abbreviating weekday labels. The chart fills the browser window, featuring styled axis ticks, a bold green line, and a dark dot overlay for each data point.

Loading thumbnail…

React world map + population points

This example visualizes global population distribution by overlaying cities as scaled points on a world map. The map is rendered using SVG paths from TopoJSON land and country border data, with a graticule for geographic context. City population values are mapped to point radii using a square-root scale from d3, with each city positioned via the geoNaturalEarth1 projection. The visualization is built with React, fetching data from world-atlas and a curated World Cities CSV, and populating the map once both datasets load.

Loading thumbnail…

React scatterplot chart + menus

This interactive scatterplot lets users explore the Iris flower dataset by selecting which measurements to plot on the x- and y-axes via dropdown menus. A color legend for species allows hovering to highlight points of that species, dimming others, while tooltips display exact values. The visualization uses React with the d3.js library for scales, axes, and the SVG rendering.

Loading thumbnail…

React world map

This example presents an interactive world map built with React and rendered as SVG. The map displays landmasses in dark green, with country borders and graticule lines overlaid. The visualization uses D3’s `geoNaturalEarth1` projection and `geoPath` to draw geographic features, while the `topojson` library’s `feature` and `mesh` functions process the source data from the world-atlas TopoJSON file. The React component structure separates data loading, map assembly, and SVG rendering.

Loading thumbnail…

react bar chart

This example shows a horizontal bar chart that displays the 2020 population estimates for the top 10 countries, sourced from a UN Population CSV file. The chart uses D3 scales (`scaleBand` and `scaleLinear`) to map country names to vertical positions and population values to bar widths. React components compose the visual elements, rendering an SVG with axes, bars, and tooltips. The X-axis formats tick labels using D3’s `format('.2s')`, converting values like billions, while the Y-axis labels are placed using the band scale’s midpoint.

Loading thumbnail…

react scatterplot chart

This React scatterplot visualizes the Iris dataset, plotting sepal length against sepal width with tooltips displaying exact values on hover. The SVG-based chart includes labeled axes and a title. Built with React 18 and D3.js, it uses `scaleLinear` from d3-scale for coordinate mapping, `extent` for domain calculation, and `csv` for data loading. The visualization is composed of reusable components for axes, marks, and the overall chart group, with the dataset fetched from a GitHub-hosted CSV file.

Loading thumbnail…

Reactv18 And D3v7 starter

This example demonstrates a minimal starter project that combines React v18 and D3 v7, displaying a static text message centered on the screen. The React component renders a simple div element, while the D3 library is loaded via CDN but not yet utilized for any data visualization. The code imports React, ReactDOM, and D3, and uses `ReactDOM.render` to mount the `App` component into the root HTML element. Styling is handled through an external CSS file that sets the message font size and page layout.

Loading thumbnail…

pie chart react

This example loads a CSV of CSS color names and their RGB hex values from a GitHub gist, then renders each row as a slice of a pie chart using React and D3’s `pie` and `arc` generators. The chart fills each path with the color’s hex value, producing a full circle of distinct hues. Data is fetched asynchronously with `csv` and stored in React state via `useState` and `useEffect`. The SVG output scales to the full window size, with the pie centered and a fixed outer radius of 250 pixels.

Loading thumbnail…

React smiley

A yellow smiley face fills the browser window, rendered as a single SVG graphic that scales with the viewport. The face is composed of a large circle for the head, two smaller circles for eyes, and an arc-shaped path for the mouth, all centered via a transform. Built with React and ReactDOM, the component uses D3's `arc` generator to define the mouth's curved path, with all styling applied via SVG presentation attributes and a JavaScript style object.

Loading thumbnail…

poker face

A minimalist SVG illustration of a yellow-faced character. The design uses basic geometric shapes: a large circle for the face, two smaller circles for the eyes, and a horizontal line for the mouth, all with thick dark strokes for a cartoon-like appearance. The page is styled with CSS classes for the face, eye, and mouth elements, and the graphic is rendered directly through inline SVG markup in an HTML document. The code demonstrates simple vector drawing with pure HTML and CSS, without any JavaScript or external libraries.

Loading thumbnail…

categorical/quantitative transitory dynamic resusable d3 scattermap with options

This interactive scatterplot displays Fisher’s Iris dataset, with dropdown menus to select categorical or quantitative attributes for the x- and y-axes. Built with React and D3.js, the visualization uses `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to render axes, while `transition()` animates the points and axes as the user changes selections. The SVG rendering includes colored species markers with tooltips, and a dynamic legend updates accordingly.