S

Sainathreddypotu@gmail.com

@Sainathreddypotu45·20 public vizzes

Loading thumbnail…

ICE-8 Network

This network visualization shows a bipartite graph of three authors connected to three papers through authorship relations, with authors as circles and papers as squares. The layout is generated using D3's `d3.forceSimulation` with link, many-body charge, center, and collision forces, allowing nodes to be repositioned via mouse drag. The rendering uses D3's `symbol` API for distinct node shapes, SVG paths for nodes, and `d3.select` joins for interactive elements like hover tooltips and a legend. The example demonstrates D3 v7's force-directed graph capabilities in a simple, self-contained dataset.

Loading thumbnail…

Fork of ICE-8-2-2

This example shows a hierarchical tree of programming languages, organized by paradigms and domains, with leaf nodes for individual languages. Node shapes encode type—diamonds for the root, squares for internal nodes, and circles for leaves—while color represents the depth, or generation, of each node. The visualization uses the D3 version 7 library, specifically the `d3.hierarchy`, `d3.tree`, and `d3.linkHorizontal` APIs to compute and draw the layout. Hovering over a node reveals a tooltip showing the node’s name and depth, and a legend clarifies the shape and color encoding.

Loading thumbnail…

ICE-8-2

This interactive tree visualization displays the hierarchy of programming languages, organized by paradigms and domains, with depth and node type encoded through color and shape. Built with D3 v7, it uses `d3.hierarchy` and `d3.tree` to compute the layout, while `d3.linkHorizontal` draws the connecting paths. Node symbols are rendered via `d3.symbol` with diamond, square, and circle shapes for root, internal, and leaf nodes, and a custom tooltip appears on mouse movement.

Loading thumbnail…

ICE-8

ICE-8 presents a pair of interactive SVG choropleth maps showing world GDP and US state values. The world map projects Natural Earth TopoJSON countries with a Natural Earth projection and uses a green sequential color scale, while the US map uses an Albers USA projection. Both maps use `d3.geoPath`, TopoJSON features, and tooltip interactions. Data is joined from remote CSV sources, with JavaScript fetch and D3’s data loaders handling URL fallbacks.

Loading thumbnail…

ICE-8

This example displays the text "Hello D3" centered on a blank page, rendered at an enormous font size of 14em. The visualization serves as a minimal starter template, demonstrating the basic setup for a D3 project using an import map to load d3.v7. The code uses the `select` function from the 'd3' module to target the body element and applies the `text` method to inject the greeting. No data source is used, and the rendering approach is purely DOM-based text output.

Loading thumbnail…

ICE7-2b

This visualization shows the relationship between horsepower and fuel efficiency (MPG) for a subset of 50 cars from a CSV dataset. A tomato-colored line, generated with `d3.line()` and smoothed using `curveMonotoneX`, connects data points sorted by horsepower to reveal the overall trend. The chart renders as SVG using D3 v7, with linear scales for both axes and blue circles representing individual car data points. Interactive tooltips appear on mouseover, displaying each car's name, horsepower, and MPG values.

Loading thumbnail…

ICE7-2

This pie chart visualizes the average miles per gallon (MPG) for cars, aggregated by their country of origin. It displays the resulting proportions as colored arcs with labels and a legend, using a tooltip to reveal exact average MPG values on hover. The visualization is built with D3.js v7, loading data from a CSV file and using the `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` APIs to compute and render the chart. The code also employs `d3.rollups` to group and calculate the mean MPG per origin. The chart is rendered as an SVG, with interaction handled via mouse events.

Loading thumbnail…

ICE7-3

This area chart visualizes the relationship between horsepower and fuel efficiency (MPG) for a sample of 50 cars from a CSV dataset. It uses D3.js v7 to render an SVG graphic, with a monotone cubic curve (`d3.curveMonotoneX`) forming the filled area and overlaid blue circles for individual data points. Tooltips on hover display the car name, horsepower, and MPG. Axes are labeled for 'Horsepower' and 'Miles per Gallon (MPG)', with the chart title indicating the dataset's scope.

Loading thumbnail…

ICE7

This interactive scatter plot visualizes relationships between numeric attributes of cars from a CSV dataset. Users can select different x- and y-axis columns from dropdown menus to explore correlations. The visualization is built with D3 v7 using SVG rendering, featuring smooth 400ms transitions when data points move between positions. Tooltips display car names and axis values on hover, while the reusable `scatterPlot()` function demonstrates configurable chart design with adjustable scales, margins, labels, and point symbols.

Loading thumbnail…

sainath potu ice7

This interactive scatter plot visualizes a sample of 50 cars, plotting horsepower against miles per gallon (MPG). Built with D3 v7, the chart uses a reusable scatter plot factory pattern and renders points as SVG symbols with smooth transitions. Users can hover over any point to see a tooltip displaying the car’s name, origin, and exact x/y values. The visualization loads data from a remote CSV file, with axes, labels, and point styling all configured through chainable JavaScript functions.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot visualizes 50 rows of real car data, mapping horsepower on the x-axis and miles per gallon on the y-axis, with points colored and shaped by the car’s origin using `d3.scaleOrdinal` with `d3.schemeTableau10` and `d3.symbol` types. Built with D3 v7, it renders an SVG with axes, labels, and a legend, loading data via `d3.csv` from a GitHub gist. The reusable chart pattern exposes setter methods for configurable dimensions and accessor functions.

Loading thumbnail…

ICE-6 Scatter Plot

This scatter plot uses D3 v7 to visualize the relationship between bill length and bill depth for Palmer Penguins, with data loaded from the palmerpenguins GitHub repository via `d3.csv` and `d3.autoType`. Points are rendered as SVG circles, colored by species using `d3.scaleOrdinal` with the `d3.schemeSet2` palette, and include interactive tooltips that appear on hover. The chart includes gridlines from `d3.axisLeft`, labeled axes, a title, and a legend, all configured within an SVG canvas.

Loading thumbnail…

ICE-6 Barchart

A bar chart displays cricket tournament wins by country from 1975 to 2025, aggregated from CSV data using D3 v7. Each bar uses a blue-to-teal linear gradient with a drop shadow filter, and animates upward on load. Hovering reveals a tooltip showing the exact win count. The chart includes rotated x-axis labels, gridlines, and animated count-up value labels.

Loading thumbnail…

ICE-Part3

This example visualizes cricket dominance from 1975 to 2025 using two SVG charts. The upper multi-series line chart shows annual win trends for India, Australia, and Pakistan, with colored lines, circles, gridlines, and a peak annotation. The lower combined chart pairs bars representing total tournaments per year with a line tracking India’s wins. Built with D3 v7, it uses `d3.csv`, `d3.scaleLinear`, `d3.line` with `curveMonotoneX`, and `d3.axisBottom`/`d3.axisLeft`. Data is loaded from a GitHub gist.

Loading thumbnail…

ICE-6

This example displays a bar chart of cricket tournament wins by country from 1975 to 2025, aggregating tournament victories using `d3.rollups` and sorting them in descending order. The visualization uses D3 v7 to render SVG bars with a horizontal grid from `d3.axisLeft`, rotated country labels on the x-axis, and interactive hover tooltips showing exact win counts. Data loads from an external CSV file via `d3.csv`, and the chart encodes win frequency through bar height against a linear y-scale.

Loading thumbnail…

ICE5

This dashboard summarizes a CSV dataset loaded from a public GitHub Gist, displaying high-level metrics such as total character count, column count, and row count. It then renders a preview table of the first ten rows using D3 v7’s `d3.csv` and `d3.select` APIs, building an SVG banner and styled HTML table. The interface dynamically fetches data with the Fetch API and presents it with custom CSS for metrics, panels, and a green-themed header. All rendering occurs in SVG and HTML, with no interactive filtering or charts beyond the static overview.

Loading thumbnail…

ICE5

This D3.js visualization provides an overview of a teams dataset loaded from a GitHub Gist, displaying dataset metrics (characters, columns, rows), a tabular preview of the first ten rows, and SVG circle swatches colored by each team’s hex code. The visualization uses `d3.csv` to parse the CSV and `d3.select` and `.append` to build both an HTML table and the circular color cards. The interface is styled with custom CSS, and the banner uses an SVG linear gradient fill.

Loading thumbnail…

ICE-5

ICE-5 is a starter HTML page that displays a static message. It uses HTML and CSS to render a simple greeting, with the text styled at a large font size and centered on the screen. The page loads an external JavaScript file that only logs a message to the browser console, demonstrating the basic structure for a web project without any interactive or data-driven visualization.

Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This interactive bar chart displays letter frequency data from a CSV file, with clickable bars that highlight and dim based on user selection. Built as a React and D3.js integration, it uses `ResizeObserver` for responsive dimensions, `scaleBand` and `scaleLinear` for scales, and `axisBottom`/`axisLeft` for axes with gridlines. The bars feature smooth color and opacity transitions, with a static title and axis labels rendered via D3 selections.

Loading thumbnail…

Fork of Vanilla D3 Vibecoding Template

This scatter plot visualizes the Iris dataset, comparing sepal length against sepal width across three species. The visualization uses D3.js methods like `scaleLinear`, `scaleOrdinal`, `extent`, `axisBottom`, and `axisLeft` to render the plot. An interactive legend highlights points of a selected species while dimming others, and hovering triggers opacity changes. The code loads the Iris data from a Gist URL via D3's `csv` parser and applies a BBC-inspired color theme for species differentiation.