Skip to main content
Log in
P

PriyaEnuganti

@PriyaEnuganti·25 public vizzes

Loading thumbnail…

India map using Topojson

This visualization depicts India’s states using a Mercator projection and TopoJSON data from a GitHub gist. The code loads the data via `d3.json`, converts it with `topojson.feature`, and renders the paths using `d3.geoPath`. Each state is filled with a distinct color from a custom ordinal scale, and hover interactions are styled through CSS. The map is built with D3 v5 and the `d3-geo-projection` library.

Jul 9, 2022
Loading thumbnail…

Electronics Tree

A tree diagram displays a hierarchical classification of electronics, branching from "Electronics" into "Display," "Audio," and "Non-display," which further splits into "Fan," "AC," and "Fridge." This example uses D3 v2's `d3.layout.tree` and `d3.svg.diagonal` to compute node positions and draw connecting links on an SVG canvas. Nodes are color-coded by category (yellow for root, pink for main branches, purple for leaves) and interactive tooltips appear on mouseover. The visualization is rendered as static SVG, not animated, despite the metadata listing "animation."

Jul 9, 2022
Loading thumbnail…

Network graph of Friends

This interactive network graph uses D3.js to display seven friends and the weighted connections between them. The visualization loads data from a JSON file and renders nodes as pink circles with name labels, using link thickness to represent relationship weight. Users can drag nodes to explore the network layout, while hovering over a node triggers a tooltip showing the name. The example combines D3's force layout for positioning with SVG rendering and includes smooth animation transitions during the simulation.

Jul 9, 2022
Loading thumbnail…

repl.it

This example demonstrates an interactive graph editor library built with React and Canvas, supporting node creation, edge connections, and graph search algorithms. Users can interactively build and edit graphs through mouse interactions, while the interface includes examples of Dijkstra, depth-first, breadth-first, and A* search executions. The demo shows two canvases—one for free-form graph editing and another for running search algorithms—with a documented API. The code uses Canvas 2D rendering with animation, loading graphs from JSON, and features dynamic interaction via mouse input.

Jul 9, 2022
Loading thumbnail…

world map

This world map visualization displays global countries using a natural Earth projection with graticule lines and sphere outline. The SVG rendering uses D3’s geoNaturalEarth1 projection and geoPath to draw land features from the world-atlas TopoJSON dataset, while country borders are highlighted via a mesh of interiors. The React app loads the data asynchronously through `useData`, which fetches TopoJSON and converts it using `feature` and `mesh` from topojson, with styling applied via CSS classes.

Jul 7, 2022
Loading thumbnail…

3D Bar Chart using D3.js

This example visualizes retail sales for the first six months of the year as an interactive 3D bar chart, with each retailer’s monthly figures grouped along separate axes. It uses the `d3.x3d` library to render X3D scenes, automatically creating a multi-series bar chart where the data is parsed from a CSV file via `d3.csv` and `parseRow`. The chart is embedded in an HTML page using D3 v5, with `d3.select` and `.datum().call()` to attach the data to the DOM element, and it leverages the `d3-3d` and `x3dom` libraries for the 3D output.

Jul 7, 2022
Loading thumbnail…

3D Scatter Plot with Diabeties Dataset

This 3D scatter plot visualizes the Diabetes dataset, showing the relationship between Glucose, BMI, and BloodPressure as marker positions along three axes. The example uses two overlapping scatter3d traces to create a two-layer point effect with a semi-transparent outer layer and a solid inner core. The data is loaded from a CSV file using d3.csv, and the interactive plot is rendered in a styled HTML container via Plotly's newPlot function. Axes are explicitly labeled with their corresponding variable names, and the chart uses a high opacity with a subtle border line for each marker.

Jul 7, 2022
Loading thumbnail…

Untitled

A 3D bar chart built with D3 v4 and the d3-3d plugin renders a grid of colored cubes whose heights represent negative random values. An update button triggers a 1-second transition that re-randomizes the cube heights, while text labels animate to show the changing magnitude. Users can drag the SVG to rotate the entire scene, adjusting the rotation angles via d3.drag and redrawing all cube faces and labels through the plugin’s projection and sorting methods.

Jul 6, 2022
Loading thumbnail…

Untitled

A smiling alien face rendered with SVG primitives, built as a React component. The code constructs circles, ellipses, lines, and arcs from D3's `arc()` generator for the mouth, eyes, and ears, then animates eyebrow and facial lines using SVG line elements. Colors fill each feature—pink face, yellow and green eyes, silver and orange ears—with a grey stroke outline. The example demonstrates composing D3 shapes for static cartoon figures within a React rendering pipeline.

Jul 6, 2022
Loading thumbnail…

Bar chart with D3.js

This bar chart visualizes annual milk production across eight countries, with India leading at 137.5 million gallons. Built with D3.js v5, the SVG visualization features interactive bars that respond to mouse hover. Upon hovering, the selected bar enlarges and fades, while a dashed horizontal line appears at its value and divergence percentages are displayed relative to all other countries. The chart includes horizontal grid lines and axes, with data hardcoded in the JavaScript source.

Jul 6, 2022
Loading thumbnail…

Interactive Pie Chart for world milk production

This interactive donut chart visualizes the top eight countries by milk production in millions of tonnes, using a color-coded categorical scale. Hovering over a slice reveals a tooltip showing the percentage of total production for that country. Built with React and rendered as SVG, it uses d3.pie and d3.arc to compute slice geometry, d3.scaleOrdinal for colors, and d3.sum to calculate percentages. The legend-free design labels each country directly on its slice.

Jul 3, 2022
Loading thumbnail…

Untitled

This visualization shows a network of connected nodes and links arranged into a rough smiley face shape, with the layout still partially in progress. It uses a force-directed graph rendered on a canvas, where the nodes and edges are positioned using D3’s `d3.forceSimulation` with custom forces to guide the nodes toward the facial features. The code also likely employs `d3.forceLink` for the connections and `d3.forceManyBody` for repulsion, with the final arrangement captured as the simulation runs. The example is built from an array of node and link data defined in the HTML, and the chart is set up within a 500-pixel-high container using the amCharts v3 library.

Jul 3, 2022
Loading thumbnail…

Reusable D3 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping glucose and blood pressure measurements. Built as a reusable D3 chart, it uses `scaleLinear`, `axisLeft`, `axisBottom`, and SVG circles to render points. The chart cycles through various columns—such as Insulin, BMI, and BloodPressure—every two seconds, updating the x-axis and point positions via `setInterval`. Data loads from a CSV URL, and the visualization includes animated transitions between different variable comparisons.

Jul 3, 2022
Loading thumbnail…

Interactive pie chart for population

This interactive pie chart visualizes the population distribution of major Indian languages, showing each language’s share as a colored arc with a tooltip revealing its exact count and percentage. Users can toggle legend items to enable or disable language segments, which dynamically recalculate the displayed percentages. Built with React and D3 v7, the visualization uses `d3.pie`, `d3.arc`, and SVG paths, with `d3.scaleOrdinal` providing the color scheme. The dataset, embedded directly in the code, lists 22 languages with their speaker counts in millions.

Jul 3, 2022
Loading thumbnail…

Pie Chart For Milk production

This pie chart visualizes annual milk production across the world, with each slice representing a country and its production value labeled in millions. The chart is built using D3 v5 APIs including `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` for color encoding. Section labels are positioned using the arc centroid, and a legend lists each country with its corresponding value. Data is loaded asynchronously from a raw CSV file hosted on GitHub.

Jul 3, 2022
Loading thumbnail…

Making an Interactive Pie Chart

This interactive pie chart visualizes university funding amounts, with each slice labeled and color-coded by institution. Built with D3.js v5, the chart uses `d3.pie` and `d3.arc` to generate the donut geometry and `d3.scaleOrdinal` with `d3-scale-chromatic` for slice colors. Hovering over a slice triggers a tooltip showing the percentage of total funding, calculated via `d3.sum` and `d3.event`. The data comes from a CSV file loaded asynchronously, and the visualization renders as SVG with hover opacity effects and rounded slice corners.

Jul 2, 2022
Loading thumbnail…

CO2 Emissions Over Time

This example displays a stacked area chart of global CO2 emissions over time, broken down by source categories such as gas, liquids, and cement production. It uses D3.js with React, rendering as SVG. The code applies a time scale for the x-axis and a linear scale for the y-axis, with d3.area to draw the stacked paths and d3.areaLabel to position labels. Data is loaded from a CSV file and filtered to exclude dates before 1790.

Jul 2, 2022
Loading thumbnail…

Multiline chart with interaction

This example shows how South American countries’ annual changes in forest area have evolved over time, with each country represented as a distinct colored line. The chart uses React with d3.v5, rendering an SVG multiline chart with a time-scaled x-axis and linear y-axis. The code uses d3.line and d3.nest to structure the CSV data by entity, d3.scaleOrdinal and d3.schemeCategory10 for colors, and adds reactive tooltips via mouseover, mousemove, and mouseleave events on each path. The visualization includes a legend and title, with data loaded from a GitHub gist.

Jul 1, 2022
Loading thumbnail…

Multiline chart with interaction

This multiline chart displays annual changes in forest area for South American countries from 1990 to 2015, with each country represented by a colored line. The visualization uses d3.nest to group data by country and d3.scaleOrdinal with d3.schemeCategory10 for color assignment. Hovering over any line triggers a yellow tooltip via d3.event listeners, showing the entity name. The chart is rendered as SVG using d3.line, d3.scaleTime, and d3.scaleLinear, with data loaded from a CSV via d3.csv.

Jul 1, 2022
Loading thumbnail…

Pie chart For Milk Production

The pie chart visualizes milk production across various countries, showing each country’s proportional contribution with labeled slices and a hover tooltip that displays the percentage of total production. The chart is rendered in SVG using D3.js, with data fetched from a GitHub-hosted CSV file via `d3.csv`. It employs `d3.pie()` for angle computation, `d3.arc()` for slice geometry, and `d3.scaleOrdinal()` with a custom color range. Tooltips appear on mouseover, and the visualization uses `d3.select` for DOM manipulation and event handling.

Jul 1, 2022
Loading thumbnail…

Fork of [Ex.10] Animated Reusable D3 Scatter Plot with labels

This example presents the Iris dataset as an animated scatter plot, cycling through different petal and sepal measurements on the x-axis. The reusable plot, created with D3 v6, uses `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `transition` APIs to animate point positions and axis updates. The code dynamically re-binds the x-axis and labels every three seconds, while SVG circles morph and exit with a staggered delay, creating a visually engaging comparison of the dataset's features.

Jun 29, 2022
Loading thumbnail…

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

This chart visualizes the top milk-producing countries using a bar chart, with bars colored by a sequential color scale from the ColorBrewer Reds palette. Data is loaded from a CSV file using D3 and rendered as SVG rectangles, with axes and a legend generated via D3’s `scaleBand`, `scaleLinear`, and `legendColor` APIs. The visualization also includes interactive tooltips triggered by mouse events, and is built with React for component rendering. The chart highlights the distribution of milk production values in billions of tons.

Jun 26, 2022
Loading thumbnail…

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

A horizontal bar chart displays the top ten milk-producing countries, with bars sorted by production volume. The visualization uses React to manage state and render the SVG, while D3 v5 provides data loading via `d3.csv`, scales including `d3.scaleBand` and `d3.scaleLinear`, and tick generation. Data comes from a remote CSV file fetched through a gist URL.

Jun 26, 2022
Loading thumbnail…

React & D3 Starter

This example displays the classic Iris dataset as a scatter plot, mapping sepal length to the x-axis and petal length to the y-axis, with points colored by species (red, blue, or green). It serves as a starter template for integrating D3.js with React by decoupling the visualization logic into separate modules. The React component manages the SVG container and data loading via hooks, while the D3 code handles scales, axes, and circle rendering using d3.csv, d3.scaleLinear, and d3.axisBottom/axisLeft. The visualization fills the browser window and includes axis labels.

Jun 26, 2022
Loading thumbnail…

Face by priya

This example renders a stylized cartoon face in SVG using React and D3. It shows a symmetrical composition of geometric shapes, including a pink circular head, two differently colored eyes with pupils, eyebrows, an elliptical nose, and a mouth created with a D3 arc generator. Additional D3 arcs form layered eyelids and ears, while colored lines and strokes add decorative details. The code uses React components with JSX, D3 v7’s `arc()` function for curved paths, and absolute positioning via SVG transform attributes to place elements around the center of the canvas.

Jun 17, 2022