sdarsi2404@gmail.com

Fork of ice82

This fork of ice82 presents a small hierarchical dataset of world population as a toggleable view. The **Tree View** uses `d3.hierarchy`, `d3.tree`, and `d3.linkHorizontal` to draw a tidy node-link diagram, with circle size mapping to population values. The **Network View** instead employs `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to create an interactive, draggable graph. Both views render to SVG and encode root, region, and country nodes with distinct colors.

ice82

This example presents hierarchical population data as an interactive tree and network visualization. Buttons toggle between a `d3.tree` layout showing parent-child relationships with node sizes scaled by population, and a `d3.forceSimulation` network view with draggable nodes and link lines. The code uses D3 v7 with SVG rendering, drawing colored circles and labels for world regions and countries from embedded sample data.

Fork of HTML Starter

Fork of Fork of Network Graph

Fork of Network Graph

This example shows an employee hierarchy as a network graph, with nodes representing people and links representing parent-child relationships. The node positions are determined by a physics simulation using `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to arrange the structure. The data is loaded via `d3.csv` from a Gist, and circles in skyblue with text labels render each node within an SVG. Link lines use a light gray stroke, and the simulation updates node transforms and link coordinates on every tick.

Fork of D3 Starter

ice8

The ICE-8 Tree & Network visualization presents two distinct views of relational data, toggled via buttons. The Tree View displays a hierarchical structure, while the Network View maps interconnected nodes, both rendered as scalable vector graphics. The example uses D3.js version 7, leveraging its core selection and layout APIs, with the force-directed simulation handling node positioning in the network mode. The SVG canvas is dynamically redrawn based on the selected view.

ice8

This interactive scatter plot visualizes the Iris dataset, comparing sepal length against sepal width across three species of iris flowers. The visualization uses D3.js scales and axes to map the quantitative dimensions, with a color scale distinguishing species. Hovering over the legend highlights the corresponding data points while fading others, and the legend items respond to mouse events. The chart loads data from a remote CSV file using D3’s csv parser and renders with SVG.

Fork of Player Statics using reusable scatter plot

This interactive scatter plot analyzes cricket player statistics, cycling through four attribute pair comparisons such as Runs versus Strike Rate and Matches Played versus Player of the Match. Built with D3.js v7, it renders SVG circles with smooth animated transitions between datasets, using `d3.scaleLinear` for axes and `d3.axisBottom`/`d3.axisLeft` for ticks. Data is fetched via `d3.csvParse` from a remote gist, with a hover tooltip displaying player details.

Fork of Area Chart - Runs vs Matches

A green area chart with orange line overlays and red data points displays runs scored against match number in a sports dataset. The visualization uses an SVG container with D3.js v7, employing `d3.area`, `d3.line`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft` to map integer match numbers and runs. Data is loaded as CSV from a GitHub Gist, converted to numeric values, and rendered with axis labels for "Match Number" and "Runs Scored," with a semi-transparent fill and point markers for clarity.

Area Chart - Runs vs Matches

This area chart displays the relationship between match number and runs scored, using a green filled area with an orange overlaid line and red data point markers. The visualization loads data from a GitHub Gist, converts string values to numbers, and maps match number to the x-axis and runs scored to the y-axis. It uses d3.area and d3.line to generate the paths, d3.scaleLinear for both axes, and d3.axisBottom with d3.axisLeft for labeling. The chart includes axis labels and a slight opacity on the filled region for improved readability.

Fork of line chart of player Statics

A fork of a line chart visualizing a cricket player's runs scored versus match number. The data is loaded from a remote CSV file and rendered as an orange line using the D3.js v7 `d3.line()` generator with linear scales. Red circular markers highlight each data point, and labeled axes for "Match Number" and "Runs Scored" are drawn using `d3.axisBottom` and `d3.axisLeft`. The SVG output includes margins and a fixed chart size of 700 by 450 pixels.

line chart of player Statics

A line chart visualizes the relationship between match number and runs scored for a player, with an orange line and red circular markers highlighting individual data points. The visualization maps match numbers to the x-axis and runs scored to the y-axis, using a linear scale for both dimensions. The chart is rendered as an SVG using D3.js v7, specifically employing `d3.csv` to load the dataset, `d3.line` to generate the path, and `d3.axisBottom` and `d3.axisLeft` to create labeled axes. Data is loaded from an external Gist source.

Pie Chart for Player Statics

This pie chart visualizes the distribution of runs scored by individual players, using a CSV dataset fetched from a GitHub gist. Built with D3.js v7, it renders an SVG pie chart where each slice is colored by player name and includes direct labels. The chart uses `d3.pie()` and `d3.arc()` to generate slice geometry, with a legend and a hover tooltip that displays player-specific details. A color scale (`d3.scaleOrdinal`) maps each player to a distinct category color.

Fork of D3 Starter

This pie chart visualizes the distribution of runs scored by individual cricket players, with each slice labeled by player name and colored via an ordinal scale. The chart is rendered as an SVG using D3.js v7, fetching CSV data from a GitHub Gist and parsing it with `d3.csvParse`. A `d3.pie` layout computes slice angles, while `d3.arc` generates the path geometry, and an interactive tooltip appears on hover for additional detail.

Fork of Player Statics using reusable scatter plot

Fork of Vanilla D3 Vibecoding Template

This example demonstrates four chart types—scatter plot, pie chart, line chart, and area chart—built with D3.js and rendered as SVG. Each chart visualizes a cricket dataset fetched as a CSV from a GitHub gist, mapping runs against strike rates, and runs across years. The code uses `d3.csvParse`, `d3.scaleLinear`, `d3.pie`, `d3.arc`, `d3.line`, and `d3.area` to construct the visualizations. All charts are appended directly to the page body, with scales and color schemes defined inline for each plot.

Fork of Reusable D3 Scatter Plot

This React-based visualization displays two D3 scatter plots comparing cricket player statistics—Runs versus Strike Rate and Wickets versus Balls Faced—with color-coded points by match type (T20, ODI, Test) and tooltips showing player names. It loads CSV data via `d3-fetch`’s `csv` function, transforms numeric fields with JavaScript’s unary plus operator, and renders SVG circles using `d3-scale`’s `scaleLinear` and `scaleOrdinal` for axes and color encoding. Axes are generated with `d3-axis`’s `axisBottom` and `axisLeft`, with the reusable `plotScatter` function invoked twice in a `useEffect` hook.

Fork of Reusable D3 Scatter Plot

This interactive scatter plot visualizes cricket player statistics, comparing runs against strike rate or wickets against balls faced. Users toggle between the two views via buttons. Built with React and D3, the chart uses d3.csv to load remote data, d3.scaleLinear and d3.scaleOrdinal for scales, and d3.axisBottom/d3.axisLeft for axes. Circles are colored by match type (T20, ODI, Test) with hover tooltips, rendered as SVG with a legend.

Fork of Reusable D3 Scatter Plot

This example presents a fork of a reusable D3 scatter plot built in React with SVG rendering. It displays two scatter plots from cricket statistics: Runs versus Strike Rate and Wickets versus Balls Faced, with each point colored by match type (T20, ODI, or Test) using d3.scaleOrdinal and including interactive tooltips via appended title elements. Data is loaded as CSV using d3-fetch and processed with d3.axisBottom, d3.axisLeft, d3.extent, and d3.scaleLinear for scales and axes. The source data comes from a gist hosted on GitHub, rendered through React’s useEffect and useState hooks.

Fork of Reusable D3 Scatter Plot

This fork of a reusable D3 scatter plot visualizes the relationship between hours studied and test scores for a small student dataset. It uses `d3.scaleLinear` for both axes, with a steelblue, semi-transparent circle for each data point. The chart is rendered as an SVG, created by a `createScatterPlot` function that clears any existing SVG for reuse. Axes are drawn with `d3.axisBottom` and `d3.axisLeft`, and labels are added for both “Hours Studied” and “Test Score”. The code is written for D3 v3 and is licensed under the MIT license.

Fork of My CSS Color Scatter Plot

Fork of My CSS Color Scatter Plot

This scatter plot visualizes CSS color specifications, mapping each named color’s CSS level (1 through 4) on the x-axis against its computed luminance (brightness) on the y-axis. Each circle is filled with its corresponding hex value, revealing how brightness varies across specification releases. The code uses d3.csv to load color data from a GitHub gist, then applies d3.scaleLinear for both axes, d3.axisBottom and d3.axisLeft for ticks, and SVG circles with custom hex-to-luminance conversion. The chart also rotates x-axis labels and includes axis titles for readability.

Fork of Bar Graph Visualization

This bar chart displays the distribution of CSS color specifications across different levels, counting how many colors exist for each level. The visualization uses D3.js v7 to load a CSV file via `d3.csv`, aggregate the data with `d3.rollup`, and render an SVG bar chart using `d3.scaleBand` and `d3.scaleLinear`. Bars are drawn as SVG rectangles that turn orange on hover, with axes generated by `d3.axisBottom` and `d3.axisLeft`. The x-axis labels are rotated for readability, and the y-axis shows the number of colors per level.

Fork of Bar Graph Visualization

This bar chart displays the distribution of CSS color specifications across different levels, counting how many colors exist for each level. The visualization uses D3.js v7 to load a CSV file via `d3.csv`, aggregate the data with `d3.rollup`, and render an SVG bar chart using `d3.scaleBand` and `d3.scaleLinear`. Bars are drawn as SVG rectangles that turn orange on hover, with axes generated by `d3.axisBottom` and `d3.axisLeft`. The x-axis labels are rotated for readability, and the y-axis shows the number of colors per level.

Bar Graph Vizualization

Color Palette Fork

This visualization displays a color palette as a grid of interactive circles, each filled with a specific RGB hex value from a CSV file and labeled with its corresponding keyword. Hovering over any circle scales it up slightly to highlight the selection. The page uses D3.js v7's `d3.csv` to load and bind the remote data, then selects and styles DOM elements to render the circles. It also fetches the CSV file’s size via `fetch` with a HEAD request to report data length, along with row and column counts.

Color Palette Fork

This visualization displays a color palette as a grid of interactive circles, each filled with a specific RGB hex value from a CSV file and labeled with its corresponding keyword. Hovering over any circle scales it up slightly to highlight the selection. The page uses D3.js v7's `d3.csv` to load and bind the remote data, then selects and styles DOM elements to render the circles. It also fetches the CSV file’s size via `fetch` with a HEAD request to report data length, along with row and column counts.

Color Palette Fork

This visualization displays a color palette as a grid of interactive circles, each filled with a specific RGB hex value from a CSV file and labeled with its corresponding keyword. Hovering over any circle scales it up slightly to highlight the selection. The page uses D3.js v7's `d3.csv` to load and bind the remote data, then selects and styles DOM elements to render the circles. It also fetches the CSV file’s size via `fetch` with a HEAD request to report data length, along with row and column counts.

Color Palette Fork

This visualization displays a color palette as a grid of interactive circles, each filled with a specific RGB hex value from a CSV file and labeled with its corresponding keyword. Hovering over any circle scales it up slightly to highlight the selection. The page uses D3.js v7's `d3.csv` to load and bind the remote data, then selects and styles DOM elements to render the circles. It also fetches the CSV file’s size via `fetch` with a HEAD request to report data length, along with row and column counts.

Color Palette Fork

This visualization displays a color palette as a grid of interactive circles, each filled with a specific RGB hex value from a CSV file and labeled with its corresponding keyword. Hovering over any circle scales it up slightly to highlight the selection. The page uses D3.js v7's `d3.csv` to load and bind the remote data, then selects and styles DOM elements to render the circles. It also fetches the CSV file’s size via `fetch` with a HEAD request to report data length, along with row and column counts.

Color Palette Fork

Fork of D3 Starter

This starter example displays the text "Hello D3" prominently in the center of a web page, serving as a minimal introduction to building visualizations with D3 version 6. It loads the D3 library from a CDN and uses the `select` function to target the body element, then calls the `text` method to inject the static string into the DOM. The page is styled with large, centered typography, and the accompanying video walks through the setup process. The example demonstrates the fundamental pattern of selecting a DOM node and manipulating its content with D3’s data-join-independent API.

Fork of D3 Starter

This starter example displays the text "Hello D3" prominently in the center of a web page, serving as a minimal introduction to building visualizations with D3 version 6. It loads the D3 library from a CDN and uses the `select` function to target the body element, then calls the `text` method to inject the static string into the DOM. The page is styled with large, centered typography, and the accompanying video walks through the setup process. The example demonstrates the fundamental pattern of selecting a DOM node and manipulating its content with D3’s data-join-independent API.

Fork of D3 Starter

This starter example displays the text "Hello D3" prominently in the center of a web page, serving as a minimal introduction to building visualizations with D3 version 6. It loads the D3 library from a CDN and uses the `select` function to target the body element, then calls the `text` method to inject the static string into the DOM. The page is styled with large, centered typography, and the accompanying video walks through the setup process. The example demonstrates the fundamental pattern of selecting a DOM node and manipulating its content with D3’s data-join-independent API.

Fork of D3 Starter

This starter example displays the text "Hello D3" prominently in the center of a web page, serving as a minimal introduction to building visualizations with D3 version 6. It loads the D3 library from a CDN and uses the `select` function to target the body element, then calls the `text` method to inject the static string into the DOM. The page is styled with large, centered typography, and the accompanying video walks through the setup process. The example demonstrates the fundamental pattern of selecting a DOM node and manipulating its content with D3’s data-join-independent API.

Fork of D3 Starter

This starter example displays the text "Hello D3" prominently in the center of a web page, serving as a minimal introduction to building visualizations with D3 version 6. It loads the D3 library from a CDN and uses the `select` function to target the body element, then calls the `text` method to inject the static string into the DOM. The page is styled with large, centered typography, and the accompanying video walks through the setup process. The example demonstrates the fundamental pattern of selecting a DOM node and manipulating its content with D3’s data-join-independent API.

Fork of D3 Starter

This starter example displays the text "Hello D3" prominently in the center of a web page, serving as a minimal introduction to building visualizations with D3 version 6. It loads the D3 library from a CDN and uses the `select` function to target the body element, then calls the `text` method to inject the static string into the DOM. The page is styled with large, centered typography, and the accompanying video walks through the setup process. The example demonstrates the fundamental pattern of selecting a DOM node and manipulating its content with D3’s data-join-independent API.