Aparna Desi Reddy

@Aparna-desireddy·24 public vizzes

link with data

This map visualizes global GDP data by shading each country on a natural Earth projection, with a viridis color scale representing economic output in billion USD. It uses d3.geoPath with topojson to render country boundaries from the world-atlas dataset, and d3.scaleSequential with d3.interpolateViridis for color encoding. Hovering over a country reveals a tooltip displaying the country name and GDP value, while a gradient legend annotates the color-to-value mapping.

Apr 12, 2026

Loading thumbnail…

world map

This world map visualization displays countries using a purple color scheme, with each country highlighted in a darker shade on hover. The map is rendered as an SVG using D3’s `geoNaturalEarth1` projection, with country boundaries generated via `d3.geoPath`. TopoJSON data from the world-atlas package is converted to GeoJSON using the TopoJSON client library, and the map is centered with a title at the top.

Apr 12, 2026

Loading thumbnail…

world map

This example displays a world map using a Natural Earth projection, with each country rendered as a purple SVG path. The visualization loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON using topojson.feature. D3’s geoNaturalEarth1 projection and d3.geoPath handle the coordinate transformation and path generation, while hover effects change country colors and tooltips reveal each country’s ID.

Apr 12, 2026

Loading thumbnail…

world map

This world map visualizes population density across countries, with each nation colored on a sequential blue scale from light to dark based on its density value. The map renders in SVG using a Natural Earth projection via d3.geoNaturalEarth1 and d3.geoPath. It loads TopoJSON country boundaries from world-atlas and joins CSV population data by country ID, while a gradient legend shows the density range. Interactive hover tooltips display the country ID and its population density or “No data” when unavailable.

Apr 12, 2026

Loading thumbnail…

world map

This choropleth map visualizes global population density, with each country colored on a blue sequential scale, from light shades for lower values to darker blues for higher densities. Countries without data appear in gray. The visualization uses D3.js v7 to load TopoJSON world map data and a CSV file, converting them to GeoJSON features. The map is rendered as SVG paths using a Natural Earth projection, with an interactive tooltip on hover and a linear gradient legend showing the density range.

Apr 12, 2026

Loading thumbnail…

Network_visualization

This network visualization maps the relationships within a Data & AI ecosystem. It loads node and link data from remote CSV files and uses a force-directed layout via `d3.forceSimulation`, `forceLink`, and `forceManyBody` to position connected circles. Each node is colored by group using `d3.scaleOrdinal`, labeled with its ID, and rendered in SVG alongside connecting lines. The simulation runs continuously, and nodes are interactive through d3-drag, with hover tooltips showing node names.

Apr 12, 2026

Loading thumbnail…

Network_Visualization

This network visualization displays the connections within a Data & AI ecosystem, arranging nodes in a fixed circular layout. Node colors encode group membership using a d3.scaleOrdinal with ten categorical colors, while links depict relationships between entities. The example loads two external CSV files via Promise.all and d3.csv, then manually positions nodes using trigonometric calculations rather than d3.forceSimulation. Circles and labels are rendered as SVG elements, with each node circle including a tooltip title showing the node’s id.

Apr 12, 2026

Loading thumbnail…

Tree

This interactive D3.js visualization presents a hierarchical tree of AI and data careers, loaded from a CSV file via `d3.csv` and structured with `d3.stratify`. It uses the `d3.tree` layout to position nodes, with horizontal links drawn using `d3.linkHorizontal` and circle markers colored by depth, while leaf nodes are highlighted with purple rectangles. The SVG rendering includes labels aligned based on whether nodes have children, and a chart title is added to the 1100×700 canvas.

Apr 12, 2026

Loading thumbnail…

Reusable scatter plot

This reusable scatter plot shows the relationship between EV sales and charging station counts, with each point colored by year via a Tableau10 ordinal scale. The visualization is built with D3 v7, using `d3.csv` to load EV adoption data from a remote GitHub gist, then rendering SVG circles through a configurable `renderScatterPlot` function. The axes are generated with `d3.axisBottom` and `d3.axisLeft`, while the scales are defined using `d3.scaleLinear` with automatic domain extension and nicening. The reusable design accepts data accessor functions and label strings, making the chart adaptable to different datasets and variables.

Mar 28, 2026

Loading thumbnail…

Area chart

This area chart tracks electric vehicle sales in thousands over a sequence of years, using D3.js v7 with SVG rendering. The code loads a CSV dataset via `d3.csv`, sorts the data chronologically, and applies linear scales with `d3.scaleLinear` for both axes. It generates a filled area path using `d3.area` and overlays a stroked line with `d3.line`, plus data point circles. Axis labels and a bold title are included, with the chart drawn within a defined margin using the SVG coordinate system.

Mar 26, 2026

Loading thumbnail…

line chart

A line chart displays electric vehicle sales growth over time, plotting yearly sales in thousands as a steelblue line with circular markers on an SVG canvas. The visualization loads CSV data from a GitHub gist and scales the x-axis by year and y-axis by sales volume using d3.scaleLinear, with axes generated via d3.axisBottom and d3.axisLeft. A d3.line generator constructs the path, while d3.csv handles data parsing and d3.extent computes the domain.

Mar 25, 2026

Loading thumbnail…

pie chart

This pie chart visualizes the distribution of electric vehicle (EV) sales by year, with each slice labeled by year, sales volume in thousands, and its percentage of the total. The chart is rendered as an SVG using D3 v7, with slices generated via `d3.pie()` and `d3.arc()`. Color encoding uses `d3.scaleOrdinal` with the Tableau10 scheme. A legend and in-slice text labels are added manually. The data comes from a remote CSV file loaded via `d3.csv`.

Mar 25, 2026

Loading thumbnail…

Reusable scatter plot

This reusable scatter plot visualizes the relationship between charging stations and EV sales across multiple years, with each dot colored by year using the Tableau10 color scheme. The code loads CSV data via `d3.csv` and renders an SVG chart with `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.scaleOrdinal` for categorical coloring. The reusable `renderScatterPlot` function accepts configurable accessors and labels, demonstrating a flexible pattern for embedding charts in different contexts.

Mar 25, 2026

Loading thumbnail…

ice

This combined chart displays e-commerce metrics across 150 days, with steelblue bars representing daily order counts on the left axis and a smooth red line tracking revenue in USD on the right axis. The visualization uses D3 v7’s `scaleBand` for the x-axis, dual `scaleLinear` axes, `axisLeft`, `axisRight`, and a Catmull-Rom curve via `d3.curveCatmullRom` for the revenue line. Data is loaded from a CSV using `d3.text` and `d3.csvParse`, which processes the raw text into a structured dataset for rendering as an SVG.

Mar 6, 2026

Loading thumbnail…

combined chart

This combined chart displays the relationship between daily orders placed and revenue in US dollars for an e-commerce website, using the first 40 days of a CSV dataset. Steel-blue bars represent order counts on the left y-axis, while a red Catmull-Rom smoothed line shows revenue on the right y-axis. Built with D3 v7, the visualization uses `d3.scaleBand`, `d3.scaleLinear`, `d3.axisLeft`, `d3.axisRight`, and `d3.line` to render the SVG elements, complete with gridlines, labels, and a legend. Data is fetched and parsed via `d3.text` and `d3.csvParse`.

Mar 6, 2026

Loading thumbnail…

Multi-series chart

This multi-series line chart visualizes e-commerce performance trends over time, plotting three metrics—visitors, orders placed, and revenue in USD—across a 30-day period. Using d3.csvParse to load external CSV data, the visualization applies d3.curveCatmullRom for smooth line interpolation and d3.axisBottom/axisLeft for axes. Separate colored paths (steelblue, green, red) represent each metric, accompanied by a legend and gridlines generated via d3.axisLeft with tick sizing. The SVG rendering uses D3’s scaleLinear for x/y domains and appends title and axis labels dynamically.

Mar 6, 2026

Loading thumbnail…

ICE-6 Scatter plot

This scatter plot visualizes the relationship between units sold and profit in USD, with each point's color encoding customer rating on a rainbow scale. The visualization uses D3.js v7 to load a CSV file, parse numeric values, and render an SVG chart with axes, labels, and tooltips. It employs `d3.scaleLinear` for the x and y positions, `d3.scaleSequential` with a rainbow interpolator for coloring, and `d3.axisBottom` and `d3.axisLeft` to generate the coordinate system. The chart demonstrates a positive correlation between sales volume and profitability.

Mar 6, 2026

Loading thumbnail…

ICE-6

This visualization is a bar chart displaying the top 20 products by revenue (USD) from a product sales dataset. Built with D3.js v7 and SVG rendering, it sorts the data by revenue and encodes product names on the x-axis and revenue on the y-axis using `scaleBand` and `scaleLinear`. Bars are appended as SVG rects and axes are drawn with `d3.axisBottom` and `d3.axisLeft`. The chart includes rotated product labels and axis titles, with hover effects that change bar color.

Mar 6, 2026

Loading thumbnail…

E-Commerce_metrics

This example displays revenue by day for the first twenty days of an e-commerce dataset as a bar chart. It renders SVG rectangles scaled by d3.scaleBand and d3.scaleLinear, with axis generators for the x and y axes. The chart loads a CSV file via d3.csv, filters the data, and maps Day and RevenueUSD to their respective scales. The bars change from steelblue to orange on hover.

Mar 6, 2026

Loading thumbnail…

Programming_languages_demand

This bar chart displays average salaries for various programming languages, with bars sorted from highest to lowest salary. The visualization uses D3 v7 to fetch and parse CSV data from a GitHub gist, applying a text-cleaning regex before parsing. The chart renders as SVG with d3.scaleBand and d3.scaleLinear axes, while a summary box shows file size, row count, and column count from the parsed dataset.

Feb 28, 2026

Loading thumbnail…

Programming_languages_demand

This example demonstrates a simple D3.js data-loading and parsing workflow. It fetches a CSV file from a GitHub gist, cleans its formatting, and uses `d3.csvParse` to convert the text into a tabular data structure. The visualization then displays a summary of the dataset—its size in kilobytes, row count, and column count—in a styled HTML box, while also logging this information to the console. Finally, it appends a static SVG containing a circle and a rectangle to the page, using D3's selection and attribute methods.

Feb 28, 2026

Loading thumbnail…

programming_languages_demand.csv

This visualization presents a summary of a programming languages dataset, displaying file size, row and column counts, and column names. It then renders a static SVG icon with a rounded rectangle and text labels. The example uses React with `useEffect` and `useState` hooks, along with D3.js methods like `d3.text`, `d3.csvParse`, and `d3.select` to load and parse the external `data.csv` file and construct the SVG elements.

Feb 28, 2026

Loading thumbnail…

Fork of CV: Loading CSV Data

This example shows five circles positioned on a responsive full-screen SVG, with data loaded from a CSV file containing id and x/y coordinates. Clicking a circle toggles its fill from black to white, adding a black outline to indicate selection. The React app uses a custom hook with ResizeObserver to track container dimensions, then passes d3-selection and d3-scaleLinear to render circles with scaled positions. D3’s csv function parses the data, and the circle selection is managed through React state, triggering re-renders via useEffect.

Feb 28, 2026

Loading thumbnail…

Fork of CV: Loading CSV Data

This example demonstrates loading CSV data in a React application and rendering interactive circles in an SVG. It uses d3.csv to fetch data.csv, mapping string values to numbers for the id, x, and y fields. The d3.scaleLinear function scales the x and y coordinates to fit the container’s dimensions, which are tracked via a ResizeObserver. The circles are redrawn with d3’s join method, responding to click events by toggling a selected circle’s fill color between white and black, managed through React state.

Feb 28, 2026