Skip to main content
Log in
C

Charith Kapuluru

@CharithKapuluru·23 public vizzes

Loading thumbnail…

collaboration_network

This example visualizes a research collaboration network, showing eight researchers as nodes and their joint publications as links. Node color represents research group (AI, DataViz, Security), node size reflects publication count, and link thickness indicates collaboration strength. The visualization uses d3.forceSimulation for layout with charge, center, and collision forces, rendered as SVG in a React component. Interactive features include hover highlighting, draggable nodes, and a tooltip displaying researcher details.

Nov 10, 2025
Loading thumbnail…

collaboration_network

This example displays a React component that renders a large, centered message. The code builds a simple text visualization using a `div` element, and its content is set programmatically via a `useRef` hook and the D3.js `select` method within a `useEffect` call. The project leverages React 19 and D3 v7, imported as ES modules for a modern web setup. The visualization itself is minimal, showing the string "Hello D3 & React" in a 13em font size, demonstrating the basic integration between React’s state management and D3’s DOM selection utilities.

Nov 10, 2025
Loading thumbnail…

Programming_tree

This example shows a hierarchical tree visualization of programming language evolution, organizing languages into paradigm families and tracking their development across four generations. The tree layout uses D3 v7’s tree layout to position nodes and SVG paths to draw links between parent and child nodes. Each node is rendered as a circle with a text label, with node colors mapped to generation metadata through a custom color scale defined in the code. The visualization includes a legend and uses D3’s select, enter, and append methods to construct the SVG elements dynamically.

Nov 10, 2025
Loading thumbnail…

usapopulation_map

This choropleth map of the United States visualizes estimated 2020 state populations in millions, using a blue sequential color scale to encode values. Built with D3 v7 and the TopoJSON library, it projects state boundaries with an Albers USA projection through `d3.geoPath`. The map reads population data from a hardcoded JavaScript object and renders an interactive SVG where hovering over a state displays its name and population in a tooltip.

Nov 10, 2025
Loading thumbnail…

Worldmap

This example displays a static world map of countries from the world-atlas TopoJSON dataset, rendered as SVG paths using D3.js. It uses the Natural Earth projection via `d3.geoNaturalEarth1()` and `d3.geoPath()` to draw country boundaries. Hovering over a country highlights it in red and shows a tooltip with the country’s ID and property count, implemented through D3 event handlers on the SVG paths. The map is fetched from a CDN and converted from TopoJSON to GeoJSON using the topojson library.

Nov 10, 2025
Loading thumbnail…

ICE-8

ICE-8 is a multi-view visualization suite exploring four distinct chart types: a research collaboration force-directed network, a programming languages tree, a choropleth map of US state populations, and an interactive world map. The network uses `d3.forceSimulation` with draggable nodes; the tree uses `d3.stratify` and `d3.tree` with colored generation levels; the US map leverages `d3.geoAlbersUsa` and `topojson-client` with a sequential color scale; and the world map uses `d3.geoNaturalEarth1` with hover highlighting. Each view loads data from CDN-hosted TopoJSON files.

Nov 10, 2025
Loading thumbnail…

ICE_8

This example presents a data visualization titled ICE_8, which appears to be a custom rendering built with React and D3. It uses a force-directed simulation (`d3.forceSimulation`) to position nodes, and draws them using SVG paths generated via `d3.geoPath`. The visualization is rendered within a React component, likely incorporating interactivity or animation to explore the network structure. The underlying data source is not explicitly defined in the provided files, but the code demonstrates a hybrid approach combining D3’s layout algorithms with React’s component model for a dynamic, web-based display.

Nov 10, 2025
Loading thumbnail…

ICE-8

This example shows a world map highlighting individual countries in blue that turn red on hover, built with D3 v7 and TopoJSON. It uses `d3.geoNaturalEarth1` for the projection and `d3.geoPath` to render country boundaries from the world-atlas dataset, with data loaded from a CDN via `d3.json`. The SVG rendering applies simple CSS classes for the hover interaction.

Nov 10, 2025
Loading thumbnail…

ice7

This example demonstrates quarterly sales and profit trends from an 11-row Superstore CSV using four reusable D3.js v7 charts. A scatter plot of Sales versus Profit uses a Tableau10 color scale for categories, while a pie chart shows total sales share with arc labels and legends. The line and area charts aggregate data by UTC month using `d3.utcMonth` and `d3.rollups`, rendering paths with `d3.line` and `d3.area`. All charts use chainable accessor setters, `d3.select` joins, and SVG viewBox scaling, with hover tooltips on the scatter plot.

Oct 28, 2025
Loading thumbnail…

ICE7-Q2a-Pie

This pie chart displays the proportional population share of each continent, using a fallback dataset by default or aggregated data from a CSV file when it loads successfully. The visualization is rendered as an SVG using D3 v7, with the `d3.pie` and `d3.arc` functions generating the slices and labels. A `d3.scaleOrdinal` with `schemeTableau10` assigns colors, and a legend is appended to the SVG. The code dynamically switches between embedded sample data and CSV-derived aggregates for the year 2023.

Oct 28, 2025
Loading thumbnail…

ICE7-Q1-Reusable-Scatter

A reusable scatter plot displays the relationship between population and GDP for cities in 2023, with population on the x-axis and GDP on the y-axis. The chart is rendered as an SVG using D3 v7, leveraging the `d3.scaleLinear` scales and `d3.axisBottom` and `d3.axisLeft` for axes. Data from the `global_cities_extended.csv` file is loaded with `d3.csv` and filtered to the target year, with points drawn as circles with a fixed radius and opacity.

Oct 25, 2025
Loading thumbnail…

ICE 6 -3

This example visualizes the relationship between alcohol content, average residual sugar, and average wine quality in red wine samples. It displays grouped averages of residual sugar as light-steel-blue bars and average quality as a dark-orange line across rounded alcohol levels, with a legend distinguishing the two metrics. The visualization uses d3.csv to load the winequality-red dataset, then applies d3.rollups to compute grouped means. Bar and line geometries are generated with SVG rect elements and the d3.line generator, while d3.scaleBand and d3.scaleLinear map the data to axes.

Oct 20, 2025
Loading thumbnail…

ICE 6 -3

This visualization shows how the average pH, citric acid, and residual sugar levels of red wine change across different alcohol percentages. The data is grouped by rounded alcohol content, with each metric averaged per group and plotted as a multi-line chart. Built with D3 v7, the code uses `d3.rollups` for aggregation, `d3.scaleLinear` and `d3.scaleOrdinal` for scaling, and `d3.line` to generate the paths, with axes rendered via `d3.axisBottom` and `d3.axisLeft`. The source CSV is loaded directly from a GitHub gist.

Oct 20, 2025
Loading thumbnail…

ICE 6-2

This scatterplot shows the relationship between wine quality ratings and alcohol percentage, with each circle representing a red wine sample. The visualization uses D3 v7 to load the CSV data, then maps quality scores to the x-axis and alcohol levels to the y-axis using linear scales with `d3.scaleLinear`. Points are rendered as semi-transparent steelblue circles via SVG `circle` elements, while `d3.axisBottom` and `d3.axisLeft` generate the axes, and text elements label the chart, axes, and title.

Oct 20, 2025
Loading thumbnail…

ICE 6 -1

This bar chart shows the average wine quality rating for each rounded alcohol level in a red wine dataset, revealing a general upward trend in quality as alcohol content increases. The code loads the data with `d3.csv` and `d3.autoType`, groups the records using `d3.rollups` to compute mean quality per alcohol level, and sorts the categories. A `d3.scaleBand` positions the bars while a `d3.scaleLinear` maps quality values, with SVG rectangles rendered for each bar and axes added via `d3.axisBottom` and `d3.axisLeft`.

Oct 20, 2025
Loading thumbnail…

ICE 6 -1

This bar chart ranks countries by their 2024 GDP in billions of U.S. dollars, using a horizontal layout with rotated country labels and tick marks for readability. The visualization loads a CSV from a GitHub gist via `d3.csv`, filters it to the year 2024, and sorts values in descending order. It renders an SVG using `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and includes axes via `d3.axisBottom` and `d3.axisLeft`. Tooltips with exact values appear on each bar using SVG `<title>` elements.

Oct 20, 2025
Loading thumbnail…

ICE 6 -1

This bar chart ranks countries by their GDP in billion USD, with bars sorted from largest to smallest and a tooltip on each bar showing the exact value. The visualization is built with D3 v7, using `d3.csv` to load the data from a remote gist, and `d3.scaleBand` for the categorical x-axis plus `d3.scaleLinear` for the numeric y-axis. Rotated country labels on the bottom axis and horizontal grid lines from `d3.axisLeft` aid readability.

Oct 20, 2025
Loading thumbnail…

ICE 6

This example shows a bar chart of GDP in billion USD for various countries in 2024. The bars are sorted in descending order and colored a uniform blue, with a tooltip revealing each country's exact value. The visualization is rendered as an SVG using D3 v7. The code loads data from a CSV file, processes it with `d3.csv`, and uses `d3.scaleBand` and `d3.scaleLinear` to map country names and GDP values to positions. Axes are drawn with `d3.axisBottom` and `d3.axisLeft`, with rotated country labels for readability.

Oct 20, 2025
Loading thumbnail…

ICE 6 BarChart

This bar chart ranks countries by GDP in billion USD, with bars ordered from highest to lowest. The visualization uses D3's `scaleBand` and `scaleLinear` for positioning, and the data is loaded via `d3.csv` from a Gist URL. The x-axis labels are rotated sixty degrees for readability, and the chart displays grid lines from the y-axis. The country names and GDP values are plotted using SVG rectangles filled with a uniform blue color.

Oct 20, 2025
Loading thumbnail…

ICE 6

This visualization combines bar charts and line charts to compare GDP and population across continents for 2024. The chart uses aggregated data from a CSV file, displaying GDP as blue bars and normalized population as a red line with points. Built with d3.csv, d3.rollups, and d3.scaleBand, the visualization maps population values to the GDP scale using d3.scaleLinear for comparison. The SVG rendering includes axes, legends, and tooltips, with d3.axisBottom and d3.axisLeft for the coordinate system.

Oct 20, 2025
Loading thumbnail…

ICE-6 Bar Chart

This gallery features multiple D3 v7 visualizations of global economic data, including a bar chart of GDP by country, a combined bar-and-line chart of GDP and normalized population by continent, a multi-series line chart comparing normalized GDP, population, and GDP per capita for top countries, and a scatter plot of population versus GDP. The examples use d3.csv, scaleBand, scaleLinear, scalePoint, and axis generators (axisBottom, axisLeft), with SVG rendering for all graphics.

Oct 20, 2025
Loading thumbnail…

Fork of Vanilla D3 Vibecoding Template

This interactive scatter plot visualizes Fisher's Iris dataset, comparing sepal length and width across three iris species, with data points colored by species. The visualization includes a legend that filters and highlights points on hover, dimming non-selected species through opacity changes. Built with vanilla D3.js (v7), the code uses `scaleLinear`, `scaleOrdinal`, `axisBottom`, and `axisLeft` for scales and axes, while leveraging a ResizeObserver for responsive layout. The BBC-style color scheme and typography are applied via CSS classes, with data loaded from a remote CSV file.

Oct 19, 2025
Loading thumbnail…

ICE 5

This example displays a dataset summary alongside a static SVG composition of colored circles. It loads a hosted CSV file of global economy data and computes basic statistics for numeric columns, including row count, min, max, and mean. The visualization renders a 3-by-10 grid of circles using D3 v7’s selection and data-joining methods, applying a Tableau color scheme and decorative opacity. The code uses `d3.csv` for parsing and `d3.min`, `d3.max`, and `d3.mean` for summary calculations, with all output drawn as SVG elements.

Oct 6, 2025