Skip to main content
Log in
T

tarungunda

@tarungunda·12 public vizzes

Loading thumbnail…

Network Graph

A network graph displays six named nodes connected by six weighted links, with link thickness proportional to each connection’s weight. Using D3 v4’s force layout (`d3.layout.force`) and SVG rendering, the visualization positions nodes through simulated gravity, charge, and distance parameters. Node circles are blue with labels, and the layout updates continuously during the `tick` event to animate the graph. Data comes from a local `data.json` file containing node names, group assignments, and link weight values.

Apr 4, 2022
Loading thumbnail…

Ambani Family Tree

This visualization displays the Ambani family tree as a hierarchical dendrogram, with nodes representing family members and the links between them colored according to each node’s specified level. The size of each circle reflects the member’s assigned value. Built with D3.js v5, it uses the `d3.tree()` layout to position nodes and renders the structure as SVG paths and circles, styling elements with inline data-driven attributes for stroke and fill.

Apr 4, 2022
Loading thumbnail…

USA Map

This visualization shows a map of the United States with state boundaries, rendered as SVG using React components. The map displays land areas in tan, state borders in black, and a light blue sphere background. The code uses d3.geoAlbers for the projection, d3.geoPath to generate paths, and d3.geoGraticule for grid lines, though graticules are defined but not rendered. Data comes from the us-atlas TopoJSON file, processed with topojson.feature for the nation outline and topojson.mesh for state interiors.

Apr 4, 2022
Loading thumbnail…

World Atlas

This example displays a world map using a natural Earth projection, with countries rendered as individual SVG paths. The visualization loads geospatial data from a world-atlas TopoJSON file and converts it to GeoJSON features. It uses `d3.geoPath` with `geoNaturalEarth1` for projection, and `topojson.feature` to extract country boundaries, with a light blue sphere background and tan country shapes.

Apr 4, 2022
Loading thumbnail…

Area Chart

This area chart visualization tracks annual per-capita CO2 emissions in India over time, using a yellow filled area to highlight changes against a light gray grid. The chart employs D3 v5’s `scaleTime` and `scaleLinear` for axes, while the `area` generator with `curveBasis` creates the smooth filled path from CSV data. Axis labels and a title are appended as SVG text, with tick lines spanning the plot area for readability. The data is loaded via `d3.csv` from a GitHub gist, and the SVG rendering includes margins and rotated y-axis label.

Mar 28, 2022
Loading thumbnail…

Line Graph

This line graph displays annual auto sales in the USA from 2022, using a time-based x-axis for years and a linear y-axis for total sales. The visualization is rendered as an SVG using d3.v5, with scales created via `scaleTime` and `scaleLinear`, and axes generated through `axisBottom` and `axisLeft`. The data is loaded from a CSV file using `d3.csv`, and the line path is drawn with `d3.line`.

Mar 28, 2022
Loading thumbnail…

Pie Chart

This pie chart visualizes mortality rates across U.S. states, with each slice sized by the number of deaths and labeled with a value. The chart is rendered as an SVG using D3 v5, employing `d3.pie` and `d3.arc` to generate the segments and centroids for text placement. A legend on the right maps each color to its state and death count, with data fetched from a CSV via `d3.csv`. The visualization uses a custom color scale (`scaleOrdinal`) and formats death numbers with `d3.format`.

Mar 28, 2022
Loading thumbnail…

ICE - 7

This animated scatter plot cycles through different pairs of Iris flower measurements, revealing patterns in the dataset. It uses D3.js (v6) to render SVG circles, with a dynamic x-axis that rotates through petal width, sepal width, petal length, and sepal length. Species are color-coded via a custom marker function, and the visualization includes axis labels, a title, and a legend created with D3's `scaleLinear`, `axisLeft`, and `axisBottom` APIs.

Mar 28, 2022
Loading thumbnail…

Scatter Plot with Iris DataSet

This scatter plot visualizes the Iris dataset, mapping petal length and petal width for individual flowers while encoding species type through color. The SVG visualization uses D3 v6 APIs such as `d3.csv`, `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` to load data, scale axes, and render circles. It also applies elliptical shapes via `rx` and `ry` attributes, which derive from sepal measurements, and labels axes with rotated text.

Mar 7, 2022
Loading thumbnail…

ICE-6: Rendering Marks and Channels with React & D3

This visualization displays the size of OTT libraries across 20 countries using a horizontal bar chart. The code leverages React’s `useState` and `useEffect` hooks to fetch CSV data via `d3.csv`, then renders SVG marks with `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis. Blue tick lines and text labels are manually generated from `xScale.ticks()`, while bars are drawn as `rect` elements. The chart sources its data from a gist CSV file containing GDP and library-size metrics.

Mar 7, 2022
Loading thumbnail…

Untitled

This example loads a CSV file from a GitHub Gist using the `d3.csv` method and displays a summary of its contents, including file size, row count, and column count, in a styled message area on an HTML page. The page is built with React and renders a static SVG illustration featuring colored shapes. The visualization demonstrates simple data loading and text-based output without interactive charts or graphs.

Feb 28, 2022
Loading thumbnail…

Fork of Fork of HTML Starter

This example shows a simple yellow face rendered as SVG circles, with black outlined cheeks, two eyes, and a red nose, centered on a 960 by 500 canvas. Using React 17 and D3 v7 loaded via UMD builds from unpkg, the code defines an `App` component that returns SVG elements with coordinates computed from constants. ReactDOM renders the component into a `div` with the id `root`, while CSS removes the body margin and hides overflow. The visualization demonstrates basic React JSX syntax, including curly braces for JavaScript expressions, and showcases how D3 and React can coexist in a single page.

Feb 21, 2022