Arun Kumar M

@arun664·10 public vizzes

Network

A force-directed network graph visualizes WiFi-connected devices in a home, with nodes representing devices like a router, laptop, phone, and smart TV, colored by device type via `d3.scaleOrdinal` and `d3.schemeCategory10`. The layout is computed using `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` forces, rendered as SVG circles and lines. Data is loaded from `wifi_network.json`, and nodes are draggable, with labels positioned beside each circle as the simulation ticks.

Nov 1, 2025

Loading thumbnail…

Tree

A vertical tree diagram displays three levels of food categories, from the root "Food" down to fruits, vegetables, dairy, and their individual items. The SVG visualization uses D3 v7's `d3.stratify` and `d3.tree` layouts, reading hierarchical data from a local `food_tree.json` file. Node circles are colored by depth using a `d3.scaleOrdinal` with blue, orange, and green, while `d3.linkVertical` draws the connecting paths between parent and child nodes.

Nov 1, 2025

Loading thumbnail…

Map

A world choropleth map visualizes population by country using a blue threshold color scale. The SVG rendering combines world-atlas TopoJSON geographic features with population data from a local JSON file, linked by country ID. D3's `geoNaturalEarth1` projection, `geoPath`, and `geoGraticule` draw the map and grid lines, while hover tooltips reveal country names and formatted population values.

Nov 1, 2025

Loading thumbnail…

World Map

This interactive geographic visualization presents a world map and a separate map of Australia, allowing users to switch between the two views. The map supports multiple projections—including Natural Earth, Orthographic, Mercator, and Albers—and lets users toggle graticule grid lines. Clicking a country or Australian state displays a details panel with population, GDP, and continent information for world countries. The visualization is built with React and D3 v7, using `d3.geoPath` for rendering, TopoJSON data from the world-atlas package for the world map, and an external Australia states TopoJSON file, all drawn as SVG elements.

Oct 30, 2025

Loading thumbnail…

World Map and Australian States

This interactive map visualization lets users explore world countries and Australian states through a React-based interface. The main view renders world map data from the world-atlas TopoJSON dataset using D3 projections, with controls to switch between Natural Earth, Orthographic, Mercator, and Albers projections, plus a toggle for graticule grid lines. Clicking a country displays a detail panel with population, GDP, and regional information from the GeoJSON properties. The code leverages D3's geoPath, geoGraticule, and projection functions, while an additional choropleth view colors Australian states by population using d3.scaleSequential with an interpolateBlues color scheme.

Oct 30, 2025

Loading thumbnail…

World Map and Australian States

This interactive web application presents two geographic visualizations: a world map and a map of Australian states. Using D3.js version 7 and the TopoJSON library, the application loads GeoJSON data from remote URLs, projects it via `d3.geoConicEqualArea` and `d3.geoNaturalEarth1`, and renders the maps as SVG paths. The Australian map colors each state and displays its name as a tooltip on hover, while the world map uses uniform gray fills with darker strokes for country boundaries.

Oct 30, 2025

Loading thumbnail…

Reusable D3 Scatter Plot

This interactive visualization gallery explores cricket player statistics through four distinct chart types. The main scatter plot demonstrates a reusable D3 component with an animated sequence that cycles through different x-axis attributes every two seconds, using `d3.scaleLinear` for axes and `d3.interpolateBlues` for color encoding runs scored. Additional views include an area chart showing strike rate magnitude, a line chart tracking performance trends, and a pie chart displaying milestone distributions. All charts pull from a remote cricket dataset and render as SVG with D3 v6, allowing users to switch between visualizations via a navigation menu.

Oct 25, 2025

Loading thumbnail…

Reusable D3 Scatter Plot

This reusable D3 scatter plot visualizes T20I cricket batting leaders, plotting total runs against batting average for individual players. The component groups players into low, medium, and high run-scoring tertiles, which are distinguished using an ordinal color scale based on `d3.schemePuBu`. The code loads remote CSV data via `d3.csv`, applies custom row parsing to extract player countries, and implements a configurable chart component with settable accessors for dimensions, margins, and data values. The plot renders as SVG with axes generated through `d3.axisLeft` and `d3.axisBottom`.

Oct 25, 2025

Loading thumbnail…

Reusable D3 Scatter Plot

This interactive visualization displays T20I cricket batting statistics as a scatter plot, with points colored by tertile groups of total runs scored using a sequential PuBu color scale. A cycling animation updates both axes every three seconds, showing different statistical pairings like Runs versus Batting Average, Strike Rate, Centuries, Fifties, and Sixes. The code imports data from a CSV file, uses the reusable scatterPlot module with D3’s scaleLinear, axisLeft, and axisBottom APIs, and applies ordinal color scaling with d3.scaleOrdinal and d3.schemePuBu.

Oct 25, 2025

Loading thumbnail…

ICE 5 - Cricket t20 Data with D3

This example loads a cricket T20 dataset from a CSV file using d3.csv and displays a summary of its size, row and column counts, followed by a styled preview table of the first ten rows. The table is rendered dynamically with D3 selections, joining header and cell elements. The visualization emphasizes data overview and readability through CSS styling, including sticky headers, zebra striping, hover effects, and right-aligned numeric columns.

Oct 4, 2025