Skip to main content
Log in
A

avinash021997

@avinash021997·25 public vizzes

Loading thumbnail…

Family Tree

This example shows an animated family tree built with D3.js, using a hierarchical layout to display generations from a root ancestor down to descendants. Each person appears as a labeled node connected by curved bézier links, with nodes expanding and collapsing on click. The visualization loads static JSON data and renders it as SVG, using the D3 tree layout, diagonal path generator, and transition animations to smoothly reveal branches as users interact.

Apr 5, 2022
Loading thumbnail…

Family Tree

This interactive family tree visualizes a multi-generational genealogy dataset using a collapsible tree layout. Users can click on nodes to expand or collapse branches, with smooth animated transitions between states. The visualization is built with React and D3.js, specifically using `d3.layout.tree` for hierarchical positioning and `d3.svg.diagonal` for curved links. SVG elements render nodes and text labels, while CSS styles define the red node circles and blue connecting lines. The tree data is embedded directly in the JavaScript, and the animation duration is set to 750 milliseconds.

Apr 5, 2022
Loading thumbnail…

US Country Map

This example displays a static choropleth map of the United States, with all states uniformly filled in red on a light yellow background. Using D3 v4 and TopoJSON, it loads state boundaries from the `us-atlas` dataset and renders them as SVG paths with `d3.geoPath` and the `d3.geoAlbersUsa` projection, which automatically positions Alaska and Hawaii. The code applies stroke styling to delineate state borders, offering a simple baseline for geographic data visualization.

Apr 5, 2022
Loading thumbnail…

Fork of World Map

A fork of a world map visualization renders global landmasses and country borders in yellow and green on a blue sphere, with graticule lines showing latitude and longitude. Using React and D3 v5, it combines `geoNaturalEarth1`, `geoPath`, and `geoGraticule` to project geographic features, while `topojson` extracts land and interior mesh data from the world-atlas dataset. The SVG output, styled via CSS, displays the full map with interactive-free static rendering, loading data asynchronously via `json`.

Apr 5, 2022
Loading thumbnail…

World Map

This example renders a world map using React and D3 v5, displaying landmasses in yellow with country borders outlined in dark green on a sky-blue sphere. It uses the `geoNaturalEarth1` projection with `geoPath` to draw the land, graticules, and interior country boundaries from the `world-atlas` TopoJSON dataset. The `useData` hook fetches and processes the TopoJSON features and mesh, while React components structure the final SVG output.

Apr 5, 2022
Loading thumbnail…

The Network Chart

This visualization shows a simple social network of seven people as a force-directed node-link diagram, where yellow links connect black circles labeled with red names. The chart uses `d3.layout.force()` to position nodes with gravity, charge, and distance parameters, and `d3.json` loads the network data from `data.json`. Nodes and links are rendered as SVG elements, with dragging enabled via `force.drag` and positional updates applied during each tick. The background is grey, and the layout runs on a 1000x600 pixel canvas.

Apr 5, 2022
Loading thumbnail…

Area Chart

This area chart displays car sales in India from 2009 to 2019, with years on the x-axis and sales figures on the y-axis. The visualization combines a smooth black line for the trend and an orange area beneath it to emphasize magnitude. Built with D3 v5, it uses `scaleTime` and `scaleLinear` for axes, along with `line` and `area` generators with `curveBasis` for smoothing. Data is loaded from a CSV file via `d3.csv`.

Mar 29, 2022
Loading thumbnail…

Line Chart

This line chart visualizes automobile sales in India from 1999 to 2013, plotting yearly electronic sales data loaded from a CSV file via the `d3.csv` function. The chart clearly shows sales trends over time with a blue path stroke, using a time-scale for the x-axis and a linear scale for the y-axis. The React-based code employs D3 v5 APIs such as `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` to generate the SVG rendering with labeled axes and a title.

Mar 29, 2022
Loading thumbnail…

ICE -7 Pie Chart

This pie chart displays the top 10 countries by deaths from pollution, using a detailed legend to map each country to its slice and value. The visualization is built with D3 v5, fetching its data from a CSV file and rendering the chart as SVG. The code explicitly uses `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to compute the pie segments and colors, while the legend is constructed with appended SVG groups and rectangles. Text labels on each slice show the death count in thousands, formatted with `d3.format('.4~g')`.

Mar 29, 2022
Loading thumbnail…

Fork of Pie Chart

This example visualizes 2022 US auto sales by brand as a pie chart, with each slice representing a brand's year-to-date sales and a legend detailing each brand's name, percentage of total sales, and sales volume in thousands. The chart is rendered using D3.js v5, with the `pie` function computing arc data and the `arc` function drawing SVG paths. Data is loaded asynchronously from a CSV file via `d3.csv`. Colors are assigned using `scaleOrdinal`, and legends display computed percentages and formatted sales values.

Mar 28, 2022
Loading thumbnail…

Fork of ICE - 7 Pie Chart Maanas Katta

This visualization presents a pie chart of the top 10 countries by deaths from air pollution in 2020, with each slice labeled with its value in thousands and a corresponding legend listing country names and death counts. The chart uses D3 v5’s `pie` and `arc` generators to create SVG paths, with a `scaleOrdinal` mapping slice colors. Data is loaded asynchronously via `d3.csv` from a GitHub gist, and text labels are positioned using `arc.centroid`.

Mar 28, 2022
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example visualizes the classic Iris dataset, showing the relationship between petal width and sepal length for three flower species, each colored distinctly (green, purple, and pink). The plot dynamically cycles through different variable pairings every two seconds, animating the axes and points to reveal patterns across all four measurements. Built with D3 v6, it uses `csv` loading, `scaleLinear` for axes, and the reusable `scatterPlot` module to handle rendering as SVG circles with animated transitions.

Mar 28, 2022
Loading thumbnail…

3-D Scatter Plot

This example visualizes the classic Iris dataset as an interactive 3-D scatter plot, mapping sepal length, sepal width, and petal length onto the x, y, and z axes. Points are colored by species—setosa, versicolor, and virginica—using a custom Plotly colorscale. The visualization is built with Plotly’s `scatter3d` trace type, which renders via WebGL, and uses D3 to load and parse the CSV data. Each axis is labeled and given a distinct background color for clarity.

Mar 12, 2022
Loading thumbnail…

Untitled

This interactive 3D scatter plot visualizes the classic Iris dataset, showing the relationship between sepal length, sepal width, and petal length. Each of the 150 data points is colored according to its species (setosa, versicolor, or virginica) using a custom Plotly colorscale. The visualization uses Plotly’s `scatter3d` type via `Plotly.newPlot`, with data loaded asynchronously through D3’s `d3.csv`. Axis titles are provided for all three dimensions, and the scene is rendered with colored background planes and white gridlines, creating a clear, rotatable view of the multi-dimensional flower measurements.

Mar 12, 2022
Loading thumbnail…

Untitled

This 3D scatter plot visualizes the classic Iris dataset, showing sepal length, sepal width, and petal length as points in three-dimensional space. Each point uses a marker size of 12 with partial opacity, and the axes include distinct background colors and gridlines. The visualization is built using Plotly’s `scatter3d` trace type, with data loaded via D3’s CSV parser and rendered through WebGL. The code defines a custom color scale but does not color-code points by species, instead presenting all measurements in a single trace.

Mar 12, 2022
Loading thumbnail…

Untitled

This example shows an interactive 3D scatter plot of the Iris dataset, mapping sepal length, sepal width, and petal length onto the x, y, and z axes. Each point is rendered as a semi-transparent marker in a three-dimensional scene. The visualization is built with Plotly’s `scatter3d` trace type, using `Plotly.newPlot` to render the chart into a DOM element. Data is loaded asynchronously from a CSV file via `d3.csv`, and the axes include colored backgrounds and gridlines to enhance depth perception.

Mar 12, 2022
Loading thumbnail…

3D Bar Chart using D3.js

This example visualizes car manufacturer sales data for the first six months of the year as a 3D bar chart, with each manufacturer represented by a row of color-coded bars for January through June. The visualization uses the d3-x3d library to render the scene in X3DOM, combining D3.js v5 for data loading and scaling with the d3-3d module for three-dimensional positioning. Data is parsed from a CSV file fetched via D3’s `csv` function, and the chart is created using `d3.x3d.chart.barChartMultiSeries()` attached to a DOM element. The bars are drawn in a perspective view, highlighting monthly sales comparisons across multiple manufacturers.

Mar 11, 2022
Loading thumbnail…

Untitled

This example shows an interactive 3D scatterplot and grid rendered with SVG, where users can drag to rotate the scene. Randomly distributed points float above a shaded grid surface, with projected axes and labels. The visualization uses the d3-3d library to compute 3D-to-2D projections, with d3.drag() handling rotation updates. D3 v4 transitions animate the initial point appearance, while React manages the component structure.

Mar 10, 2022
Loading thumbnail…

Untitled

A grid of 3D cubes with negative heights forms a field of inverted pillars, each labeled with a numeric value reflecting its length. A button triggers a re-render of the data, while the whole scene can be dragged to rotate in three dimensions. The visualization uses the `d3-3d` library to project cube vertices and faces, with D3 v4 handling transitions and sorting. The code constructs cube data procedurally using random uniform heights and animates the cube faces, text labels, and sorting order via `.transition().duration()`.

Mar 10, 2022
Loading thumbnail…

Iris Dataset Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length and width to the x and y axes while coloring each point by species (setosa, versicolor, virginica) using green, red, and blue. Built with D3 v6 and SVG, it loads CSV data via `d3.csv`, scales domains with `scaleLinear` and `extent`, and renders circles with `selectAll().data().join()`. Axes are generated through `axisLeft` and `axisBottom`, with custom tick styling and static text labels for both dimensions. The plot fills the browser window with margins and a consistent point radius.

Mar 8, 2022
Loading thumbnail…

Rendering Marks and Channels with React & D3 by Avinash

This interactive bar chart displays the top 10 car manufacturers and their January sales figures. The chart uses a horizontal bar layout with axes and tick labels, rendered as an SVG graphic. The visualization is built using React and D3 v5, leveraging D3's `scaleBand`, `scaleLinear`, and `csv` utilities for data loading and scaling. Data is fetched from a remote CSV file, and the chart is updated reactively.

Mar 8, 2022
Loading thumbnail…

ICE-5: Loading and Parcing the CSV data with D3.js

This example demonstrates how to load and parse a CSV file using D3.js v7, displaying a summary of the resulting dataset in a styled HTML page. The code fetches car data from a GitHub gist via `d3.csv`, then computes and presents the file size in kilobytes, row count, and column count within a green `<pre>` element. The page includes a yellow heading and a background image of a sports car, with formatting controlled through embedded CSS. No additional visualization or chart is rendered beyond the textual data summary.

Feb 26, 2022
Loading thumbnail…

Sad Face

A sad face rendered as an SVG using React and D3's arc generator. The code draws a red circle head with a black stroke, two small circular eyes, and a downward-curving mouth created by an arc path rotated 180 degrees. The face is centered on a 960 by 400 pixel canvas, with all shapes positioned using D3's arc and React's JSX syntax.

Feb 18, 2022
Loading thumbnail…

Fork of Smiley face

This example renders a smiley face using React and D3.js, drawing the face as an SVG composed of three circles and an arc. A yellow head with a black outline is built with `<circle>` elements, while the eyes are positioned using offset coordinates, and the mouth is created with D3’s `arc()` generator to produce a curved path with specific inner and outer radii. The visualization is fixed at 960 by 500 pixels, centered around the middle of the canvas, and relies on React’s `ReactDOM.render()` to place the component into the DOM. The code explicitly sets stroke widths, radii, and angular spans to construct the facial features without any external data source.

Feb 18, 2022
Loading thumbnail…

Fork of Smiley Face Part 2

This example renders a yellow smiley face in an SVG canvas using React and D3 v5. It shows a circle with a thick black stroke, two small eye circles, and a mouth path generated by D3’s `arc()` generator with defined inner and outer radii and angular range. The face is centered via a translated `<g>` element, and its dimensions are computed from fixed width and height constants. React’s `ReactDOM.render` inserts the SVG into the DOM, while D3’s `arc` defines the mouth’s shape.

Feb 18, 2022