Skip to main content
Log in
A

aakarsh satyam

@aakarshsatyam·16 public vizzes

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris flower dataset, allowing users to explore relationships between sepal and petal measurements by selecting which attribute appears on each axis via dropdown menus. The React-based interface updates the d3 scales and rendered SVG circles dynamically when the user changes selections. The code uses d3.csv for data loading, d3.scaleLinear for axis scaling, and custom React components for rendering axes and marks.

Oct 21, 2021
Loading thumbnail…

Sized Points on a Map

A world map displays cities as semi-transparent teal circles sized by population using a square-root scale. The map includes land areas, country borders, graticules, and a natural Earth projection. Built with React and D3 v5, it projects geographic coordinates using `geoNaturalEarth1` and `geoPath`, draws features from World Atlas TopoJSON, and loads city data from a CSV file. Circle radii are mapped from population values via `scaleSqrt`.

Oct 20, 2021
Loading thumbnail…

Points on a Map

This example displays a natural Earth projection map with country boundaries, graticules, and city points overlaid as semi-transparent teal circles. The visualization uses d3.geoNaturalEarth1 and d3.geoPath to render landmasses and interior borders from World Atlas TopoJSON data, while a CSV of world cities is mapped through the projection to position each dot. The React component structure manages asynchronous data loading via useWorldAtlas and useCities hooks, with SVG rendering styled through CSS to create a clean, polished aesthetic.

Oct 20, 2021
Loading thumbnail…

Interactive Color Legend

This interactive scatter plot displays Iris flower measurements, comparing petal length against sepal width. The visualization uses React with D3 v5 scales (scaleLinear, scaleOrdinal) to render SVG elements. A color legend allows hovering to highlight specific species: when a legend item is moused over, points of other species fade to 20% opacity while the selected species remains fully visible. Data comes from the classic Iris dataset loaded via d3.csv.

Oct 20, 2021
Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes the Iris flower dataset, mapping petal length on the x-axis, sepal width on the y-axis, and encoding species with color. Each point is rendered as an SVG circle using React components, with scales from `d3.scaleLinear` and `d3.scaleOrdinal`. The visualization includes axes built via `xScale.ticks()`, a color legend generated with `colorScale.domain()`, and tooltips using SVG `<title>` elements. Data is loaded asynchronously with `d3.csv` from a public gist.

Oct 20, 2021
Loading thumbnail…

Scatter Plot with Color

This scatter plot visualizes the Iris flower dataset, plotting petal length against sepal width. Each point is colored according to the species of the flower, using a categorical color scale from `d3.scaleOrdinal`. The visualization is built with React and rendered as SVG, using `d3.scaleLinear` for the axes and data mapping. Hovering over a point reveals the petal length via a tooltip using the SVG `<title>` element. The data is loaded asynchronously from a CSV file using `d3.csv`.

Oct 20, 2021
Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Fisher Iris dataset, allowing users to explore relationships between sepal and petal measurements by changing the X and Y axes through dropdown menus. The SVG rendering uses React components to structure the visualization, with D3.js v5 handling scales, axes, and data mapping. Each data point is drawn as a circle with a tooltip showing its value, while axis labels and tick marks are styled with a clean, polished theme. The data is loaded asynchronously from a CSV file using D3’s `csv` function.

Oct 20, 2021
Loading thumbnail…

Fork of Smiley Face Part III

This example demonstrates a simple interactive dropdown menu for selecting a pet, built with React’s `useState` hook and a `Dropdown` component. The selected value updates the menu’s displayed option, using an array of pet objects for data. The app is rendered with `ReactDOM.render` into the root element, styled with large and hidden overflow layout. It uses React 16.9 and does not rely on D3 for this particular fork, despite the smiley-face origin.

Oct 20, 2021
Loading thumbnail…

World Map

This visualization displays a world map using the Natural Earth projection, with land masses rendered in teal and graticules shown as subtle gray lines. The code uses `d3.geoNaturalEarth1` for the projection, `d3.geoPath` to render geographic features, and `d3.geoGraticule` for the grid. Country borders are drawn as interior lines using TopoJSON’s `mesh` function. The map loads geographic data from the world-atlas TopoJSON file and renders it as SVG within a React component, styled to focus on land versus ocean contrast.

Oct 20, 2021
Loading thumbnail…

Stylized Line Charts

A stylized line chart visualizes temperature fluctuations across days, using smooth natural curves to connect time-series data points. The chart plots temperature against time for San Francisco, with labeled axes, tick marks, and a clean, minimal design. Built with React, it leverages D3 v5's scaleTime, scaleLinear, and curveNatural to generate SVG paths, while custom components handle axis rendering and data loading from a CSV via d3.csv.

Oct 20, 2021
Loading thumbnail…

Working With Time

This interactive scatterplot visualizes San Francisco’s temperature readings over one week, with time on the x-axis and temperature on the y-axis. Using D3 v5 scales (`scaleTime` and `scaleLinear`) and React, the chart renders SVG circles for each data point via the `Marks` component, while `AxisBottom` and `AxisLeft` generate tick marks and labels. The data comes from a CSV file loaded asynchronously with `d3.csv`, and hovering over a circle shows its exact time via a native SVG `<title>` tooltip.

Oct 20, 2021
Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris dataset, plotting sepal length against sepal width for individual flowers. Each point is rendered as an SVG circle using React components, with axes generated through reusable AxisBottom and AxisLeft components. The code leverages d3-scale’s scaleLinear for coordinate mapping, d3-format for tick labels, and d3.csv for data loading. Tooltips display formatted sepal length values via the circle title element, while a custom Poppins font and teal mark color give the chart its distinctive styling.

Oct 20, 2021
Loading thumbnail…

Stylized Bar Chart

A stylized bar chart visualizes United Nations population data from 2019, rendering each country as a vertical rectangle within an SVG. The visualization maps the data using React components with D3 utilities, including `d3.csv` for data loading and `scaleBand` for positioning. The chart updates once the CSV data arrives, displaying a loading message beforehand. Each bar's height and position are computed directly from the dataset, creating a clean, minimal presentation of population figures across nations.

Oct 18, 2021
Loading thumbnail…

Fork of Mouse Follower

This example displays a brief statistical summary of a dataset containing CSS named colors, showing the file size in kilobytes, row count, and column count. Built with React and D3 v5, it loads the CSV data asynchronously using `d3.csv` and computes the formatted size with `d3.csvFormat`. The summary is rendered as plain text in a large `<pre>` element, updating from a "Loading..." state once the data arrives.

Oct 16, 2021
Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates the size and structure of a CSV dataset by displaying three statistics: the file size in kilobytes, the number of rows, and the number of columns. It loads the CSS Named Colors CSV file using `d3.csv`, then uses `d3.csvFormat` to measure the data length and accesses the `data.columns` property. The output is rendered as large text within an HTML `<pre>` element, styled via CSS. The code also includes commented-out alternatives using `fetch`, `async`/`await`, and `d3.csvParse`, highlighting different data-loading approaches.

Oct 14, 2021
Loading thumbnail…

Mouse Follower

A smiley face visualization renders a circle that follows the mouse cursor across an SVG canvas. Using React's `useState` and `useCallback` hooks, the application tracks `clientX` and `clientY` coordinates from the `onMouseMove` event, updating the circle's `cx` and `cy` attributes in real time. The visualization is built with ReactDOM, which renders the SVG element directly into the HTML document, providing immediate interactive feedback as the user moves the pointer.

Oct 14, 2021