Skip to main content
Log in
A

Anurup Reddy

@anurupreddy127·13 public vizzes

Loading thumbnail…

Fork of Fork of React & D3 Starter

A force-directed network diagram visualizes relationships among eight tech companies, categorized as Software, Hardware, E-commerce, or Cloud/AI. Node color encodes category, while node size reflects connection count, and edge style encodes partnership, competition, or collaboration type. The visualization uses D3 v7's `forceSimulation` with `forceLink`, `forceManyBody`, `forceCenter`, and `forceCollide`, rendering nodes as SVG circles with labels and tooltips.

Nov 6, 2025
Loading thumbnail…

Network

This example shows a force-directed network of eight major tech companies, with nodes colored by industry sector—software, hardware, e-commerce, and cloud/AI—and links styled by relationship type: solid teal for partnerships, dashed yellow for competition, and pale green for collaboration. The visualization uses D3’s `d3.forceSimulation` to position nodes and render SVG links and circles, with hover highlighting and a fixed tooltip showing details. Data is hardcoded as arrays of node and link objects, and the layout is drawn entirely in scalable SVG within a fixed 1100×700 viewBox.

Nov 6, 2025
Loading thumbnail…

Tree

This visualization displays a hierarchical tree of programming languages, organized by paradigms and categories, with node shapes indicating the level in the hierarchy: a circle for the root, squares for paradigms, triangles for categories, and rounded rectangles for individual languages. The data is defined as a JavaScript object and rendered using D3.js v7, specifically relying on the `d3.hierarchy` and `d3.tree` layout functions to position nodes and links. The SVG output uses custom styling for links and labels, and a fixed-size SVG canvas at 1200x800 pixels.

Nov 6, 2025
Loading thumbnail…

TopoJSON

This world map choropleth visualizes population density per km² by country, using a threshold color scale with breakpoints at 1, 10, 30, 50, and 100 people per square kilometer. Countries without matching data appear gray. The visualization renders with d3.geoPath and a Mercator projection fitted to a 960×520 SVG,

Nov 6, 2025
Loading thumbnail…

Map

This visualization is a world population density map where each country is colored according to its inhabitants per square kilometer, using a sequential color scale from light blue (sparse) to red (dense). It displays a legend and tooltips on hover, allowing users to inspect individual countries. Built with D3 v7, the map uses `d3.geoNaturalEarth1` and `d3.geoPath` to render geographic boundaries from TopoJSON data, while population statistics are parsed from a TSV file and aggregated with `d3.rollup` and `d3.sum`.

Nov 6, 2025
Loading thumbnail…

Area Chart

This area chart visualizes population distribution across four regional parts for eight selected countries, using filled areas to show population magnitude. Built with D3 v7, the SVG chart loads data from a TSV file and uses d3.group, d3.scaleLinear, and d3.scaleOrdinal to process and map the values. Interactive features include hover effects on areas, dots, and legend items, plus a tooltip, with color-coded series and grid lines for readability.

Oct 27, 2025
Loading thumbnail…

Line Chart

This line chart compares population distribution across four regional parts for eight major countries, including China, India, and the United States. Data is loaded from a remote TSV file and parsed with `d3.tsv`. The visualization uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` for color mapping, and `d3.group` to organize data by country. Each country’s line is rendered as an SVG path with interactive hover dots that trigger a tooltip, while grid lines and axis labels improve readability.

Oct 27, 2025
Loading thumbnail…

pie Chart

This pie chart displays the distribution of world population across six continents, sorted from largest to smallest share. The visualization loads tabular data via `d3.tsv`, aggregates values by continent using `d3.rollup`, and generates SVG arcs with the `d3.pie` and `d3.arc` layouts. A color legend and hover tooltip provide additional context, while slice opacity changes on mouseover enhance interactivity.

Oct 27, 2025
Loading thumbnail…

Reusable Scatter Plot

This reusable scatter plot displays population versus area for geographic data, with points colored by continent. The visualization uses D3.js v7 to load data via `d3.tsv`, applying a custom chart module that defines scales, axes, and tooltips. It renders circles positioned with `scaleLinear` and colored via `scaleOrdinal`, while interactive mouseover events trigger tooltips showing the point's label and values.

Oct 27, 2025
Loading thumbnail…

Fork of Vanilla D3 Vibecoding Template

This page displays country-level trends in Population, GDP, and Internet Users over time for a selected country (China), shown in two charts. The first is a multi-series line chart, and the second combines bar and line mark types for comparison. Both are rendered as SVG. The example uses d3.tsv to load the data, and defines scales, axes, and marks via the d3.v7 API, including `scaleLinear`, `scaleBand`, `axisBottom`, and `line`. A legend is drawn manually with SVG elements.

Oct 20, 2025
Loading thumbnail…

Fork of D3 Starter

This visualization 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. Using d3.csv to load the data, it employs d3.scaleLinear for both axes and d3.scaleOrdinal with d3.schemeTableau10 for color encoding. The SVG output includes axes via d3.axisBottom and d3.axisLeft, interactive hover tooltips through appended circles and title elements, plus a legend and axis labels. The chart is rendered entirely with d3.v7 and SVG elements.

Oct 19, 2025
Loading thumbnail…

Fork of HTML Starter

This example shows the top 12 countries by total capital-city population, aggregated from four data parts and displayed as a sorted bar chart. It uses D3 v7 APIs including `d3.tsv` to load tabular data, `d3.rollups` to group rows by country and sum their population values, and `d3.scaleBand`/`d3.scaleLinear` for the axes. SVG rectangles render the bars, with value labels and a title/subtitle, all within an 900×520 viewport. The chart is built with a single blue color (`#3b82f6`) and includes tooltips via appended `title` elements.

Oct 19, 2025
Loading thumbnail…

Fork of D3 Starter

This example presents a bar chart of country counts by continent, loaded from a CSV file via `fetch` and parsed with `d3.csvParse`. Each continent’s bar width is scaled proportionally to its country total, with counts displayed inside the bars, alongside a summary panel showing file size, row count, and column names. The visualization uses D3 v7 to update SVG rectangles and text elements directly via `getElementById` and `setAttribute`, while the static layout and styling are defined in HTML and CSS.

Oct 4, 2025