vaishnavgck@gmail.com

@Vaishnavisabna·15 public vizzes

q2

This network graph visualizes 20 simulated diabetes patients, connecting those who share the same binary outcome (positive or negative) with gray links. Nodes are colored orange for outcome 1 and blue for outcome 0, with a legend clarifying the encoding. The layout is computed using D3 v7’s `d3.forceSimulation` with `d3.forceLink` and `d3.forceManyBody` forces, rendered as an SVG with labeled patient nodes. Static link and node positions update on each simulation tick, and the dataset is hardcoded in the script.

Apr 9, 2025

Loading thumbnail…

q1

This example shows a compact vertical tree layout that organizes diabetes patient data by outcome, age range, BMI, and glucose level. The tree uses `d3.tree()` with a layout size tailored to an SVG canvas, where links are drawn with `d3.linkVertical()`. Nodes are rendered as circles colored by parent/leaf status, with text labels offset to the right. The visualization relies on D3 v7 to parse a nested JavaScript object and position nodes horizontally across the 1200×400 viewport, providing a condensed overview of attribute combinations in the dataset.

Apr 9, 2025

Loading thumbnail…

q1

This reusable scatter plot displays the relationship between fixed acidity and residual sugar in wine samples, with each point representing a wine quality rating. The visualization uses Chart.js to render the scatter plot on an HTML canvas element, while PapaParse handles loading and parsing the local CSV file (useData.csv). The chart maps fixed acidity to the x-axis and residual sugar to the y-axis, with points colored in brown and labeled by quality score from the dataset.

Apr 9, 2025

Loading thumbnail…

Fork of Fork of PIE chart for ICE-7

This example presents a D3.js pie chart visualizing product category counts, rendered alongside a decorative SVG scene featuring a Buddha figure, recursive fractal trees, and drifting clouds over a gradient landscape. The pie chart uses `d3.pie()` and `d3.arc()` with categorical color scaling via `d3.scaleOrdinal` and `d3.schemeCategory10`, while the animated background relies on React state and `setInterval` to move cloud elements. The visualization combines static data-driven charting with layered SVG components in a single canvas.

Apr 1, 2025

Loading thumbnail…

Fork of PIE chart for ICE-7

This fork of a pie chart visualizes product categories with their respective counts, using a colorful categorical scale and a legend for identification. The chart is rendered with D3 v6 (d3.pie, d3.arc, and d3.scaleOrdinal) in an SVG, with each slice separated by white strokes and slight opacity. The React-based scene also includes an animated sky with drifting clouds, a recursive branching tree, and a Buddha illustration, combining static and moving SVG elements within the same viewBox.

Apr 1, 2025

Loading thumbnail…

Fork of Reusable pie chart

This example is a reusable pie chart that visualizes categorical data from a CSV file containing wine characteristics. It shows how each category's proportion is represented as a slice of the pie, with labels positioned at each slice's centroid and a color scale applied via `d3.scaleOrdinal` with the `d3.schemeCategory10` palette. The chart is rendered as an SVG using D3 v7, with pie geometry computed through the `d3.pie` and `d3.arc` APIs. Hovering over a slice triggers a brief animation that expands the arc outward using D3 transitions, providing interactive feedback. The data is loaded asynchronously via `d3.csv`, and numeric values are converted before the slices are appended.

Apr 1, 2025

Loading thumbnail…

Reusable Scatter Plot

A reusable scatter plot displays wine samples by fixed acidity on the x-axis and residual sugar on the y-axis, using data parsed from a local CSV file. The chart is rendered on an HTML canvas element via the Chart.js library, with PapaParse handling CSV ingestion and dynamic typing. A single dataset of points, styled with brown fill and red borders, supports responsive resizing and includes axis titles.

Apr 1, 2025

Loading thumbnail…

Area chart

This area chart displays Amazon’s daily closing stock prices from May to August 2019. The SVG visualization uses d3.csv to load the data, d3.timeParse for dates, and d3.scaleTime and d3.scaleLinear for axes. A d3.area generator fills the region beneath the price line, rendered as a black path with 30% opacity, with labeled time and price axes.

Apr 1, 2025

Loading thumbnail…

Area chart

This area chart displays Amazon’s daily closing stock prices from May to August 2019, with time on the x-axis and price on the y-axis. The visualization uses D3 v6 to load the CSV data, parse dates, and construct scales with `d3.scaleTime` and `d3.scaleLinear`. The line is drawn using `d3.line`, while axes are generated via `d3.axisBottom` and `d3.axisLeft`, all rendered as SVG elements within a single chart.

Apr 1, 2025

Loading thumbnail…

LINE GRAPH

This line graph shows the daily closing stock prices of Amazon from May to August 2019. The SVG chart uses d3.csv to load the data, d3.timeParse and d3.scaleTime for the time axis, and d3.scaleLinear for the price axis. D3’s d3.line generator draws a black line path through the points, with axis labels "Time" and "Closing Stock Prices" added via SVG text elements.

Apr 1, 2025

Loading thumbnail…

ICE-7 Q3

A line graph displays Amazon's daily closing stock price from late May through mid-August 2019, with dates on the x-axis and price on the y-axis. The line is drawn in steelblue with a 1.5-pixel stroke. The visualization uses D3 v6 APIs including `d3.timeParse`, `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.line` to process the CSV data and render the SVG path.

Apr 1, 2025

Loading thumbnail…

Fork of Scatter Plot for Vegetables in USA

This example displays stock price data for a vegetable-related dataset, plotting the Open, High, Low, and Close values over time from 2019. It uses a line chart with a brush-and-zoom interaction, allowing the user to select a time range and inspect price fluctuations across all four metrics. The visualization relies on D3.js APIs such as `d3.line`, `d3.brushX`, and `d3.zoom` to render the paths and manage the interactive focus and context panels. The data is loaded from a CSV file and rendered with SVG elements.

Apr 1, 2025

Loading thumbnail…

Fork of vamsi

This scatter plot displays the net worth of billionaires from the Forbes 2025 list against their ranking index. The D3.js visualization loads CSV data via `d3.csv` and renders circles on an SVG canvas, with axes configured using `d3.scaleLinear` and `d3.axisBottom`/`d3.axisLeft`. Hovering over a point triggers a tooltip revealing the individual's name and wealth. The chart includes labeled axes and a title, with data sourced from the Forbes Billionaires List.

Mar 25, 2025

Loading thumbnail…

ice 6

This bar chart displays the net worth of billionaires from the Forbes 2025 list, using horizontal bars on a rotated x-axis to show each individual's wealth in billions of US dollars. The visualization is rendered as an SVG with D3.js v7, using `d3.csv` to load the data, `d3.scaleBand` for the categorical axis, and `d3.scaleLinear` for the value axis. Interactive tooltips appear on mouseover, showing the billionaire's full name and net worth through D3's transition system.

Mar 25, 2025

Loading thumbnail…

Fork of ice5

This example demonstrates how to load and parse CSV data using D3.js, fetching a Forbes 2025 billionaires dataset from a GitHub Gist and displaying the row and column count in an HTML `<pre>` element. The page uses D3’s `d3.csv` API to asynchronously retrieve and parse the remote file, then updates the DOM via `document.querySelector` to show the dataset’s dimensions. The visualization also includes decorative inline SVG icons styled with CSS, while the overall layout is styled with headings and light blue backgrounds. The code runs entirely in a single HTML file with D3 loaded via UNPKG.

Mar 18, 2025