R

rajamrit-singh

@rajamrit-singh·26 public vizzes

Loading thumbnail…

Fork of Stylized Scatter Plot

This fork of a stylized scatter plot visualizes San Francisco temperature data over time as an SVG line chart rendered with React and D3 v5. The visualization uses a time-scaled x-axis for timestamps and a linear y-axis for temperature values, with styled axes and tick marks. The line path is drawn using D3's `line()` generator from the `Marks` component, while `scaleTime` and `scaleLinear` handle the data mappings. Data is loaded via D3's `csv` utility and the Poppins font gives the chart its distinctive aesthetic.

Loading thumbnail…

Fork of D3.js Line Chart

This line chart visualizes the customer count per year from a small CSV dataset, using a steelblue stroke to emphasize the trend over time. Built with D3.js v7, the SVG rendering applies a band scale for the x-axis and a linear scale for the y-axis, with axis labels and styled paths. The code loads data via `d3.csv`, constructs the chart with `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.line`, and includes custom CSS for the chart’s appearance.

Loading thumbnail…

Choropleth Map

This choropleth map visualizes the global prevalence of HIV/AIDS among adults aged 15-49 in 2017, using a yellow-orange sequential color scale where darker shades represent higher infection rates. Countries with missing data appear in grey. Built with React and D3 v5, the visualization loads world country boundaries from a TopoJSON dataset and HIV prevalence data from a CSV file. The code projects geographic coordinates using `geoNaturalEarth1`, renders country shapes with `geoPath`, and overlays graticules via `geoGraticule`.

Loading thumbnail…

Brushing example

This example shows a brushing interaction between a bubble map and a time-series histogram. Users can brush over the histogram to filter which cities appear on the map, with circle sizes encoding the total number of dead and missing migrants. The visualization uses React to manage state and D3 v5 APIs including `geoNaturalEarth1`, `geoPath`, `brushX`, and `scaleSqrt`. Data comes from the Missing Migrants Project, with map boundaries from World Atlas TopoJSON and rendering via SVG.

Loading thumbnail…

Multiple views

This interactive visualization combines a bubble map and a date histogram to display global migrant deaths and disappearances. The map uses a D3 natural Earth projection with graticules and country borders, where circle size scales with the square root of the reported total. The histogram bins incidents by reported date using D3's time-based binning. Both views are rendered as SVG elements. The code leverages D3 utilities for data loading, scaling, and projection, with React components managing the view composition.

Loading thumbnail…

Migrants

This visualization displays the total number of dead and missing migrants over time, aggregated into monthly bins using d3.histogram and d3.timeMonths. The bar chart shows the data from the Data Canvas Sense Your City Dataset, with time on the x-axis and casualty counts on the y-axis. React renders SVG elements including custom AxisBottom, AxisLeft, and Marks components, while d3.scaleTime, d3.scaleLinear, and d3.sum handle the data processing and scaling.

Loading thumbnail…

Missing migrants on a map

This example visualizes the locations of missing migrants on a world map, with circle size encoding the total number of dead and missing per incident. Built with React and D3.v5, it renders a natural Earth projection using `geoNaturalEarth1` and `geoPath`, while `geoGraticule` draws graticule lines. Migration data is loaded from a CSV using `d3.csv` and the world atlas topology from `world-atlas` via `d3.json`, with `topojson` features generating land and interior boundaries. Circle radii are scaled using `d3.scaleSqrt` based on the maximum casualty count.

Loading thumbnail…

Points on a map

This example visualizes global population distribution by plotting circles for cities on a natural Earth projection map. Circle radius encodes population using a square-root scale, with semi-transparent styling to show overlapping urban areas. The visualization uses React for component rendering, D3 v5 for geographic projections (`geoNaturalEarth1`), path generation (`geoPath`), and graticule creation, alongside TopoJSON to process world-atlas land and interior boundary data. City coordinates and populations come from a CSV dataset loaded via D3’s `csv` utility.

Loading thumbnail…

World map

This example visualizes the countries of the world as colored polygons on a map. The visualization uses React to render SVG elements, with D3.js utilities for geographic projections and path generation. The code loads GeoJSON topology data from the `world-atlas` package, converts it into features using `topojson`, and projects them onto a map using `d3.geoEqualEarth` or `d3.geoNaturalEarth1`. The `geoPath` function creates the SVG paths for each country, which are filled with a teal color.

Loading thumbnail…

Interactive color legend

This interactive scatter plot displays the Iris dataset, allowing users to explore relationships between different flower measurements. The visualization shows how sepal and petal dimensions correlate, with points colored by species through a categorical color scale. Users can change the X and Y axes using dropdown menus, with the color legend positioned to the right of the plot. The implementation combines React for UI state management with D3.js scales (`scaleLinear`, `scaleOrdinal`) for coordinate mapping and SVG rendering for marks and axes.

Loading thumbnail…

Scatter Plot with Menus with color scale and legend

This interactive scatter plot visualizes the Iris Dataset, allowing users to dynamically select which flower measurements appear on the x and y axes via two dropdown menus. Each point is colored by species, with an accompanying color legend. The visualization is built with React and D3 v5, using `scaleLinear` for axes, `scaleOrdinal` for categorical colors, and React state to update the chart based on menu selections. Data is loaded asynchronously with `csv` from a GitHub URL and rendered as SVG circles.

Loading thumbnail…

Scatter Plot with Menus with color scale

This interactive scatter plot displays the Iris dataset, with dropdown menus allowing users to select which flower measurements appear on the X and Y axes. Points are colored by species using a D3 ordinal color scale. Built with React and D3 v5, the visualization renders SVG circles and creates linear scales for each axis, with axis ticks generated by explicit React components for bottom and left axes.

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, with dropdown menus controlling the attributes mapped to the x and y axes. The visualization is rendered using React and D3 v5, leveraging `d3.scaleLinear`, `d3.extent`, and `d3.format` to compute scales and tick formatting. Each data point is drawn as a circle with a tooltip showing its x-value. Selecting different attribute combinations updates the axes and marks dynamically, allowing exploration of relationships among sepal and petal measurements.

Loading thumbnail…

usa map

This choropleth map shows the percentage of adults aged 25 and older with a bachelor's degree or higher across U.S. counties, using a sequential purple color scale. The visualization is built with React and D3 v5, projecting county boundaries via `d3.geoPath` from a TopoJSON file. County data is loaded from the U.S. Education Data JSON, with counties missing data rendered in gray. Hovering over a county triggers a tooltip displaying the county name and its percentage. A legend uses `d3.scaleThreshold` with a linear scale to map the color ranges.

Loading thumbnail…

For Scatter Plot

This scatter plot visualizes the Iris flower dataset, displaying sepal width on the x-axis and sepal length on the y-axis. The React-based visualization uses `d3.scaleLinear` for both axes, with SVG circles representing individual data points, each featuring a tooltip on hover. The code employs `d3.csv` for data loading and custom React components for rendering axes and marks, with styling applied through CSS classes for gridlines, axis labels, and point fills.

Loading thumbnail…

Refactored Bar Chart

This example shows a horizontal bar chart of population estimates for ten countries using UN Population 2019 data, with a custom tooltip displaying the population value on hover. The visualization is built with React components and D3 v7, leveraging `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. The chart renders as SVG, with reusable axis components (`AxisBottom`, `AxisLeft`) and a `Marks` component drawing the bars, while the data is asynchronously loaded and processed via a custom `useData` hook using `d3.csv`.

Loading thumbnail…

Axis with React d3

This example displays a horizontal bar chart of the top 10 countries by 2020 population, using React for rendering and D3 for scales and data loading. It uses `d3.csv` to fetch UN population data, `scaleBand` for the categorical y-axis, and `scaleLinear` for the numeric x-axis. Tick marks and labels are manually generated with SVG elements, while bars are drawn as `rect` components. The visualization explicitly demonstrates creating axes without D3’s axis generator, relying instead on explicit tick mapping and SVG positioning within a transformed `<g>` element.

Loading thumbnail…

Margin Convention

This example demonstrates the D3 margin convention, a common pattern for reserving space around a chart’s plotting area. It loads UN population data from a CSV file and renders horizontal bars for the top 10 countries, with bar widths proportional to their 2020 population. The React app uses `useState` and `useEffect` to fetch and parse the data with `d3.csv`, then constructs SVG rectangles using `scaleBand` for the y-axis and `scaleLinear` for the x-axis. A margin object defines offsets, and a `<g>` transform aligns the chart within the SVG.

Loading thumbnail…

Bar chart

This bar chart displays the top 10 countries by population in 2020, using horizontal bars ranked along the y-axis. The visualization loads data from a CSV file, parses the population column, and renders the chart with React and D3 v7. The code uses `scaleBand` for the categorical country axis and `scaleLinear` for the population value axis, mapping data to SVG `rect` elements. A loading message appears until the data is fetched and processed, with the final chart showing varying bar lengths proportional to each country's population.

Loading thumbnail…

Creating Pie chart

A pie chart displays CSS named colors by dividing a circle into equal slices, each filled with the corresponding hex value from the loaded CSV dataset. Using React with D3 v7, the code fetches data via `d3.csv` and renders SVG paths with the `d3.pie` and `d3.arc` generators. Each slice represents one color row, with the fill set directly from the `RGB hex value` field.

Loading thumbnail…

Fork of Smiley Face Part III

This example shows a yellow smiley face rendered as an SVG composed of a circle for the head, two circles for the eyes, and a curved mouth path. The visualization uses React (16.9.0) to define the component structure and D3 v5’s `arc()` generator to compute the mouth’s path geometry from an inner radius, outer radius, and start/end angles. All shapes are placed inside an SVG group centered on a 960×500 canvas, with D3 and React loaded via UMD bundles.

Loading thumbnail…

Load data using react and d3

This example demonstrates loading a CSS named-color dataset from a remote CSV URL and rendering each row as a colored horizontal strip. The React component uses `useState` and `useEffect` with `d3.csv` to asynchronously fetch the data, displaying a loading message until it arrives. Once loaded, the D3-formatted data is summarized via the custom `message` utility, which calculates file size, row count, and column count. The visualization maps RGB hex values directly to horizontal div backgrounds, creating a full-width color spectrum while also logging summary statistics to the console.

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays a scatter plot of auto MPG data, mapping miles per gallon on the x-axis, horsepower on the y-axis, and using color and point size to encode vehicle origin and weight. The code uses the vega-lite-api to construct the chart declaratively, with vega-lite and vega handling rendering, and d3 fetching the CSV data from a Gist. It includes a tooltip showing vehicle names, configured through vega-tooltip.

Loading thumbnail…

Loading and Parsing CSV data

This example demonstrates loading a CSV file of CSS named colors from a GitHub gist, then parsing and summarizing the dataset. It uses d3.csv to fetch and parse the data, d3.csvFormat to measure the file size in kilobytes, and d3.csvParse as an alternative commented-out approach. The resulting statistics—file size, row count, and column count—are displayed as large text in the browser, using React for the page structure and D3 v7 for data handling.

Loading thumbnail…

Mouse Follower

A single gray circle follows the mouse cursor across an SVG canvas. The circle’s position updates in real time based on the mouse’s client coordinates, mapped directly to SVG `cx` and `cy` attributes. Built with React hooks (`useState`, `useCallback`) and rendered via `ReactDOM`, the app listens to the SVG’s `onMouseMove` event, updating the circle’s location on every movement. No data source is used; the visualization simply demonstrates interactive pointer tracking with React and SVG.

Loading thumbnail…

My Smiley Face Part V

A grid of randomly generated smiley faces renders in React, each face varying in eye offset, eye radius, stroke width, and mouth dimensions. The composition uses SVG circles for the face and eyes, while the mouth is drawn with a D3 arc path. React fragments group the eyes, and the face is composed from separate components. The D3 range function generates the grid, and the D3 arc API creates the curved mouth shapes.