Sreedevi Itta

@sreedevi-i·14 public vizzes

Temporal Analysis

This visualization presents a temporal and categorical analysis of financial transactions, filtering by AccountID, Channel, and TransactionType. It shows median amounts by type and channel, transaction counts by hour and day, and a volume heatmap. The D3.js v7 code reads CSV data from a gist, renders SVG charts, and updates them based on user inputs, with an option to highlight anomalies at or above the 95th percentile.

Nov 30, 2025

Loading thumbnail…

Distribution

Four small multiples display transaction and login distributions from a scored features CSV. D3 v7 renders SVG histograms showing log-transformed transaction amounts, credit versus debit volume, channel breakdowns, and login attempt counts. The interface includes exact-match and multi-select filters plus a checkbox to flag anomalies above the 95th percentile. Interactive controls update all charts simultaneously.

Nov 30, 2025

Loading thumbnail…

8-2B-Network

This network graph visualizes conceptual flight routes connecting major hub cities (New York, London, Dubai) with smaller cities using a force-directed layout in D3 v7. The SVG rendering uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position nodes dynamically. Major routes are distinguished by thicker, blue strokes, while hubs appear as larger, teal circles. City labels accompany each node, with drag interaction enabled via a custom drag function.

Nov 9, 2025

Loading thumbnail…

Tree

This example shows a horizontal tree diagram of technology domains, with three levels of depth branching from a root "Technology" node into categories like Programming Languages, Web Technologies, and Data & AI, and further into specific tools and languages. The visualization uses D3.js v7 with the `d3.hierarchy` and `d3.tree` layout APIs to compute node positions, and `d3.linkHorizontal` to draw smooth curved links between parent and child nodes. The SVG rendering distinguishes node hierarchy levels through color-coded fills: orange for the root, blue for first-level children, and green for second-level nodes, with each leaf labeled in small text.

Nov 9, 2025

Loading thumbnail…

world map

This example presents a reference world map and a choropleth map showing internet users per 100 people in 2015, both rendered as SVG using D3 v7 and TopoJSON. The code employs `d3.geoNaturalEarth1` for the projection, `d3.geoPath` for generating map paths, and `d3.geoGraticule` to draw latitude and longitude lines. Country boundaries come from the world-atlas TopoJSON file, with each country colored by its rate in the second map, accompanied by a legend.

Nov 9, 2025

Loading thumbnail…

Correlations

This example presents two linked views of the same financial transaction dataset: a Pearson correlation heatmap for numeric fields (e.g., TransactionAmount, AccountBalance) and a categorical association matrix using Cramér’s V for fields like Channel and TransactionType. Interactive filters let the user narrow rows by AccountID, Channel, or TransactionType. The SVG panels are rendered with D3 v7, with margins, axes, and cell labels styled via CSS. Data loads from a remote CSV, and pivoting uses d3.rollups and custom correlation functions.

Nov 4, 2025

Loading thumbnail…

Area chart ice 7

This area chart displays the average MPG for vehicles by model year, spanning 1970 to 1982, based on the Auto MPG dataset loaded via `d3.csv`. The chart uses `d3.rollup` and `d3.mean` to aggregate the data, then renders a filled SVG path with `d3.area`, where the baseline sits at the bottom of the plot and the upper edge follows the calculated yearly averages. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, while `d3.scaleLinear` maps the year and MPG values to the chart’s coordinates. A subtle blue fill with a matching stroke highlights the trend in fuel efficiency over time.

Oct 27, 2025

Loading thumbnail…

Line chart ice 7

This chart displays the average fuel efficiency, measured in miles per gallon, for vehicles across different model years, spanning from 1970 to 1982. The data is aggregated by year, with each point representing the mean MPG for that year, and the line connects these points to show the overall trend. Built using D3 v7, the visualization uses `csv` for data loading, `rollup` and `mean` for aggregation, and `scaleLinear`, `axisBottom`, and `axisLeft` for axes and gridlines. The `line` generator draws the path, while `join` appends circles for each data point. The data comes from a gist CSV file.

Oct 27, 2025

Loading thumbnail…

Pie chart ice 7

A pie chart shows the distribution of cars by cylinder count, sourced from the Auto MPG dataset. Each slice is labeled directly with its category and percentage, while a legend on the right lists raw counts. The chart uses D3 v7 modules `csv`, `rollup`, `pie`, `arc`, and `scaleOrdinal` with `schemeTableau10`, rendering slices and labels as SVG elements within an 880 by 520 pixel viewport.

Oct 26, 2025

Loading thumbnail…

Reusable Scatter plot

A reusable scatter plot displays the relationship between horsepower and miles per gallon for the Auto MPG dataset, filtering out records with missing values. The D3 v7 component uses a configurable factory pattern with getter-setter methods for width, height, margins, radius, and fill color, applied via selection.call(). Linear scales map the data extent to the SVG canvas, with circles rendered through a data join and axes drawn using axisLeft and axisBottom. The chart includes textual labels for both axes and a title.

Oct 24, 2025

Loading thumbnail…

Multi line chart

This multi-panel dashboard visualizes loan data trends using D3.js (v7) with SVG rendering. The first panel displays a multi-series line chart comparing normalized applicant income, coapplicant income, and loan amounts across records. The second panel combines bars showing average loan amounts by property area with a line depicting the percentage of credit history equal to 1. The code fetches CSV data via a GitHub Gist URL, parses it with `d3.csvParse`, and dynamically generates both charts using D3's SVG API, including axes, grid lines, and legends.

Oct 19, 2025

Loading thumbnail…

Scatter plot

This example renders a scatter plot from CSV data fetched from a GitHub Gist via `fetch` and parsed with `d3.csvParse`. It automatically selects numeric columns for the x and y axes, with an optional categorical column mapped to colored dots. The visualization is drawn as an SVG using D3 v7, featuring labeled axes, a legend for categories when present, and a warm, minimalist styling theme. The code is designed to be adaptable, falling back to the first two numeric columns if no recognizable column names are found.

Oct 19, 2025

Loading thumbnail…

sales_dataset_bar_chart

A horizontal bar chart displays total profit by region, ranked from highest to lowest. It aggregates values from a remote sales_dataset.csv file using d3.csvParse and d3.rollup. The visualization uses D3 v7 with SVG rendering, employing d3.scaleBand for the y-axis, a linear scale for the x-axis, and a linear color scale transitioning from orange to yellow. Profit values are labeled at the end of each bar.

Oct 19, 2025

Loading thumbnail…

sales dataset

This visualization summarizes a sales dataset loaded from a CSV file via `fetch` and parsed with `d3.csvParse`. It displays total profit by region and total revenue by item type as SVG bar charts, alongside summary statistics and top countries by revenue in chip cards. The code uses D3 v7 for data binding, scales, and axis generation, with a warm color palette and hover effects on bars.

Oct 5, 2025