gayathrisaxena23@gmail.com

@gayathrisaxena·14 public vizzes

ICE8_Network

A force-directed network graph displays six named nodes (Alice, Bob, Carol, David, Eve, Frank) and five directed links between them. The example uses d3.forceSimulation with forceLink, forceManyBody, and forceCenter to compute positions, rendering circles and text labels as SVG elements. Node and link coordinates update on each simulation tick, showing the network’s layout evolution. The graph is built with D3 v7 in a plain HTML document, with references to a React version that only mounts a static message.

Apr 12, 2026

Loading thumbnail…

ICE8_Tree

A hierarchical tree diagram visualizes the relationships among technology topics, with a red root node, blue first-level children, and green deeper descendants. The implementation uses d3.stratify to convert flat parent-child data into a hierarchy, then positions nodes with the d3.tree layout. The SVG rendering draws black connecting lines between linked nodes and places text labels offset from each circular node, clearly displaying the branching structure from Technology down to AI, Web, ML, NLP, Frontend, and Backend.

Apr 12, 2026

Loading thumbnail…

ICE8_Map

This example shows a world map where countries are colored according to sample population data using a sequential blue color scale. Hovering over a country highlights it in orange, and moving the cursor away restores its original fill. The map is rendered as SVG with the `d3.geoNaturalEarth1` projection and `d3.geoPath` using TopoJSON data from world-atlas, while population values are mapped through `d3.scaleSequential` and `d3.interpolateBlues`.

Apr 12, 2026

Loading thumbnail…

Area Chart - Trend

This area chart visualizes the increasing trend of a value over a five-year period, using a light blue fill beneath the line to emphasize the magnitude of change from 2018 to 2022. Built with D3 v7 as an SVG, the code sets up linear scales and the `d3.area` generator, with the y-axis baseline anchored at the chart’s bottom. Axes, labels, and a simple dataset are rendered directly in JavaScript within an HTML file.

Mar 30, 2026

Loading thumbnail…

Scatter plot

This scatter plot shows the relationship between study hours and test scores using five custom data points. Each black circle represents one observation, plotted with hours on the x-axis and scores on the y-axis. The visualization uses d3’s `scaleLinear`, `extent`, `axisBottom`, and `axisLeft` within a reusable `scatterPlot` function to handle scaling, axes, and margins. The SVG rendering is configured with a fixed width of 800 and height of 500, and the chart displays labeled axes and axis tick marks.

Mar 30, 2026

Loading thumbnail…

Scatter plot

This example shows a scatter plot of five custom data points relating study hours to test scores, with hours on the x-axis and scores on the y-axis. It draws fixed-size SVG output (800 by 500 pixels) into the page body using a reusable `scatterPlot` component built with D3’s `select` API. The component is configured via chained methods (`.width`, `.height`, `.data`, `.xValue`, `.yValue`) and attached to the SVG through `svg.call(plot)`. The data is hardcoded in the `index.jsx` file, and rendering relies on SVG elements generated through D3’s selection and layout functions.

Mar 30, 2026

Loading thumbnail…

Pie Chart - Expenses

This pie chart visualizes the proportional distribution of expenses across four categories: Food (40), Travel (20), Shopping (25), and Others (15). Built with D3.js v7, the SVG rendering uses the `d3.pie()` and `d3.arc()` generators to create the slices, with `d3.scaleOrdinal()` assigning distinct colors. The chart displays category labels positioned at each arc’s centroid using the `arc.centroid` method, and includes an HTML legend generated through D3's selection API. The hardcoded dataset drives the visualization, which is rendered entirely client-side in the browser.

Mar 30, 2026

Loading thumbnail…

Line Chart - Trend

This line chart displays a quantitative trend over time, plotting five yearly data points from 2018 to 2022, with values increasing from 20 to 90. The visualization renders in an SVG using D3 v7, with a linear x-scale for years and a linear y-scale for values. The code constructs the line path using `d3.line()`, applies axes via `d3.axisBottom()` and `d3.axisLeft()`, and labels the axes as "Year" and "Value," all within a 600×400 pixel canvas with specified margins.

Mar 30, 2026

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This gallery example demonstrates a reusable scatter plot showing the relationship between study hours and test scores across five data points. The visualization uses d3.scaleLinear to map data domains to pixel coordinates, with axisBottom and axisLeft generating the labeled x- and y-axes. Data points render as black circles via SVG path elements appended through the join pattern. The code separates the chart logic into a scatterPlot.js module, exposing chainable setter methods such as .width and .xValue for configuration. The index.js file initializes the visualization by importing necessary D3 functions and calling the plot on an SVG container with fixed dimensions.

Mar 30, 2026

Loading thumbnail…

Fork of React & D3 Starter

This example shows a minimal integration of React and D3, displaying a single centered text message that reads “Hello D3 & React.” The code demonstrates how to combine React’s declarative component structure with D3’s imperative DOM manipulation by using the `useRef` hook and `useEffect` to call `d3.select` on the rendered element. It imports `createRoot` from `react-dom/client` and the `select` function from `d3` (v7), rendering the component into the `#root` div. The styling uses a large font size for visual impact, and the example serves as a foundational template for more complex React-D3 visualizations.

Mar 30, 2026

Loading thumbnail…

ICE6_Gayathri_LineChart

A line chart and bar chart combination displays sales and profit trends for years 2015 through 2022, with sales as steel-blue bars and profit as a red line. The visualization uses D3 v7’s `scaleBand` for the x-axis and `scaleLinear` for the y-axis, rendering SVG elements within a React application. The chart includes a legend and axis labels, with data hardcoded in the script.

Mar 9, 2026

Loading thumbnail…

ICE6_Gayathri_ScatterPlot

This scatter plot visualizes the Iris flower dataset by plotting petal length against sepal length, with each flower represented by a purple, semi-transparent circle. The SVG visualization uses D3 v7’s `scaleLinear` to map the data values to coordinates along the x- and y-axes, which are labeled with the corresponding measurement names. The code fetches the CSV data from a GitHub gist via `d3.csv`, then appends the circles and axis text directly to the SVG element using D3’s selection and layout methods.

Mar 9, 2026

Loading thumbnail…

ICE6_Gayathri_BarChart

This bar chart displays the top 10 countries by population in 2019, with horizontal bars ranked by population size. The visualization uses D3 v7 scales—`scaleBand` for the categorical country axis and `scaleLinear` for the numeric population axis—to map data from a CSV file loaded via `d3.csv`. React manages the component state and renders the SVG elements, with each bar drawn as a `<rect>` filled in steelblue inside a translated group.

Mar 9, 2026

Loading thumbnail…

ICE5_Gayathri_Skincare_Data

This example demonstrates how to load and parse a CSV dataset with D3, displaying the file size, row count, and column count in a styled summary box. A static pink rectangle appears in an SVG graphic, while the tutorial-style page highlights the parsed data structure. The code uses `fetch` and `d3.csvParse` to handle the remote CSV from a GitHub gist, and `document.getElementById` and `innerHTML` to update the summary. A separate React component, using `useRef` and `useEffect`, renders "Hello D3 & React" with a division, though it is not integrated into the main visual flow.

Feb 28, 2026