Skip to main content
Log in
M

maddineni2112@gmail.com

@maddineni2112·15 public vizzes

Loading thumbnail…

Visualizing network

This visualization displays a music network with a central MUSIC node connecting to six genre nodes, which in turn link to affiliated artist nodes. Cross-genre influences connect artists to multiple genres. The layout uses `d3.forceSimulation` with force-directed positioning, rendered as SVG. Different node shapes distinguish central, genre, and artist types, while hover effects highlight connections and tooltips provide details. Data is embedded directly in the script.

Nov 10, 2025
Loading thumbnail…

Visualizing tree

This visualization shows a five-level hierarchical crop tree, from the root “Plants” down to specific crop leaves, using color-coded shapes to indicate depth. The D3.js v7 code builds an SVG with nodes and links, and includes interactive buttons to expand, collapse, and fit the tree to the view. Clicking on nodes toggles their children, while a legend and tooltip clarify the level colors. The layout and rendering rely on the SVG element, with no external simulation or layout algorithms visible in the provided code.

Nov 10, 2025
Loading thumbnail…

Map_sdv

This example displays a choropleth map of India showing unemployment rates by state and union territory for 2023–24. It uses a dark background with a plasma color scale to encode percentage values, and features interactive tooltips on hover. The visualization relies on the D3.js library, using `d3.json` and `d3.csv` to fetch geographic and statistical data, `d3.geoMercator` for the map projection, and `d3.geoPath` to render SVG paths. A linear gradient legend clarifies the color mapping.

Nov 10, 2025
Loading thumbnail…

Fork of Map_sdv

This example displays a simple world map using D3 v7 and TopoJSON. It renders an interactive SVG map with a Natural Earth projection, showing country boundaries with hover highlighting and native tooltips. The code uses `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.geoGraticule` to draw the sphere, graticule, and country paths from the world-atlas@2 countries-110m dataset. Pan and zoom are enabled via `d3.zoom`, and countries are loaded asynchronously from a CDN-hosted TopoJSON file.

Nov 10, 2025
Loading thumbnail…

Q4_Area Chart

This area chart displays India's GDP growth over time, using a dark red filled region beneath a monotone curve to emphasize the upward trend. The chart loads CSV data from a GitHub-hosted Kaggle dataset, which is filtered to the first 70 entries, and leverages D3 v7’s `d3.csv` and `d3.autoType` for parsing. It builds the visualization with `d3.scaleLinear`, `d3.area`, and `d3.axisBottom`/`d3.axisLeft`, including gridlines and axis labels, all rendered as SVG elements with a custom area path and styling.

Oct 27, 2025
Loading thumbnail…

Q3_Line chart

This line chart displays India's GDP over time, plotting the annual value against the year. The chart uses a smooth monotone curve to connect the data points, with gridlines and formatted axis labels for readability. The visualization is built with D3 v7, loading the data from a CSV file via `d3.csv` with `d3.autoType` for automatic type conversion. It uses `d3.scaleLinear` for both axes, `d3.extent` for domains, and `d3.format` for SI-prefix currency display. The code selects the year and GDP columns by name, limits the dataset to 80 rows, and sorts the data by year.

Oct 27, 2025
Loading thumbnail…

q2_piechart

This pie chart visualizes the share of cars by fuel type from the car_sales_kaggle dataset, displaying each category’s value and percentage directly on the slices and in a right-side legend. Built with D3 v7, it loads CSV data, aggregates counts per category, and uses `d3.pie`, `d3.arc`, and `d3.rollups` to compute and render arcs with leader lines and labels. A Tableau10 ordinal color scale distinguishes categories, while the SVG output includes hover tooltips via `title` elements and a clean, responsive layout.

Oct 27, 2025
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

A reusable D3 scatter plot cycles through four numeric car-sales variables—mileage, engine size, year of manufacture, and price—on the x-axis while price stays on the y-axis, updating every 2.5 seconds with an animated transition. Built using `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom`, it renders SVG circles from a Kaggle CSV and re-invokes the chart function to swap axes. The code demonstrates a modular `scatterPlot` factory pattern with setter methods for width, height, data, and accessors.

Oct 27, 2025
Loading thumbnail…

D3 reusable scatter plot

This interactive scatter plot visualizes car sales data loaded from a CSV file, letting users select which columns drive the x and y positions, point size, and color. The reusable chart component, built with D3 v7, exposes getter-setters for its scales, axes, and tooltip formatter. It applies d3.scaleLinear, d3.scaleSqrt, and either d3.scaleSequential or d3.scaleOrdinal for encoding, while cleaning numeric values to handle currency, percentages, and parentheses. Rendering is SVG-based, with interactive hover tooltips.

Oct 27, 2025
Loading thumbnail…

Q1. Reusable D3 Scatter Plot

This interactive scatter plot visualizes car sales data, showing the relationship between price and various numerical attributes. The visualization cycles through three different x-axis variables—Horsepower, Mileage, and Year—every two seconds, keeping price on the y-axis. Built with D3.js (v6.7.0), the reusable `scatterPlot` module creates an SVG chart with animated transitions, axes, and a grid. Data is loaded from a CSV file using `d3.csv` and displayed as circles with a consistent fill color, with detected numeric columns automatically selected for the axes.

Oct 27, 2025
Loading thumbnail…

Q1_Reusable D3 Scatter Plot

This reusable scatter plot visualizes car sales data, showing the relationship between horsepower and price, with color encoding car make and bubble size representing mileage. The chart includes interactive tooltips that display detailed values on hover. Built with D3 v7, it uses `d3.scaleLinear` for axes, `d3.scaleSqrt` for bubble size, and `d3.scaleOrdinal` with `schemeTableau10` for categorical colors. Data comes from a Kaggle CSV loaded via `d3.csv`, rendered as SVG elements within a reusable component function.

Oct 27, 2025
Loading thumbnail…

creditHistory_multi series line and combined(Line+ Bargraph)

This example features a credit history dataset in two linked D3.js charts. The first is a multi-series line chart exploring up to three quantitative variables against a numeric X-axis, with controls for axis selection and sample size limiting. The second is a combined chart where bars and a line present categorical or numeric data, and both use drop-down menus for interactive data filtering. The visualizations are built with SVG, animated scales, and rely on D3’s CSV parsing, `scaleLinear`, and axis generators.

Oct 20, 2025
Loading thumbnail…

Cars - ScatterPlot

This interactive scatter plot explores car sales data, letting viewers compare any two numeric variables on the X and Y axes while optionally coloring points by a categorical field. The visualization uses D3.js v7 with a CSV data source, and automatically detects whether columns are numeric or categorical to populate the dropdown controls. It renders data points as SVG circles with smooth transitions when changing axes, includes grid lines and axis labels, and displays a tooltip with details on hover.

Oct 19, 2025
Loading thumbnail…

Startup Funding Bar Chart

A startup funding bar chart displays funding amounts in USD millions for companies, colored by industry. Users can sort by funding value and filter to show a top-N subset of companies. The visualization uses D3 v7 to render a responsive SVG with animated transitions, gridlines, dual axes, and an HTML legend. Data loads from a remote CSV file, with tooltips providing company details.

Oct 19, 2025
Loading thumbnail…

NagaSampath_SDV

This example visualizes the top 10 startup industries by total funding, showing both a ranked table and a pie chart of their proportional shares. It uses d3.csv to load funding data from a GitHub Gist, then d3.rollup and d3.sum for aggregation, with d3.pie and d3.arc generating the SVG pie slices. Hovering reveals tooltips displaying exact funding amounts and percentages. A legend and color scale (d3.scaleOrdinal with d3.schemeCategory10) accompany the charts.

Oct 6, 2025