Yash Raj Mathur

@yashrajmathu·17 public vizzes

ICE8_Network

This example demonstrates a small network graph with six nodes (Alice, Bob, Carol, David, Eve, Frank) connected by five links, rendered as blue circles and gray lines in an SVG. It uses d3.forceSimulation with forceLink, forceManyBody, and forceCenter to compute positions, and tick event handlers to update node, link, and label coordinates. Data comes from inline JavaScript arrays, and the code is written with plain D3 v7, with no React logic applied to the visualization itself.

Apr 12, 2026

Loading thumbnail…

ICE8_Tree

This example displays a hierarchical tree of technology topics, starting with a root “Technology” node and branching into subcategories like AI, Web, and their children. The data is converted into a hierarchy using `d3.stratify` and laid out with the `d3.tree` function. The SVG rendering uses D3 v7 to draw black links, color-coded circle nodes based on depth, and text labels for each category, all within a React application.

Apr 12, 2026

Loading thumbnail…

ICE8_Map

This example presents a world map colored to display sample population data for a selection of countries, with a grayscale fill for regions without data. It loads country boundaries as TopoJSON from the world-atlas package and uses d3.geoNaturalEarth1 for projection, d3.geoPath for rendering, and a sequential color scale with d3.interpolateBlues to encode values. Interactive mouseover events highlight countries in orange, while the map is rendered as SVG with a bold title.

Apr 12, 2026

Loading thumbnail…

Area Chart- Trend

This area chart visualizes the trend of a single data series over time, using a light blue filled region to emphasize the change in value from 2018 to 2022. The visualization plots five data points using d3.scaleLinear for both axes and renders the area with d3.area, which draws a path from the x-axis baseline to the data points. Axes are generated with d3.axisBottom and d3.axisLeft, and the chart includes text labels for the Year and Value dimensions.

Mar 30, 2026

Loading thumbnail…

Scatter Plot

A reusable D3 scatter plot displays the positive correlation between study Hours and exam Score across five custom data points. The chart uses d3.scaleLinear for both axes, d3.axisBottom and d3.axisLeft for ticks, and SVG circles for points. The scatterPlot function exports a configurable chart factory, invoked with chained setters for width, height, data, and accessor functions. Rendered via SVG with the Share Tech font, axes are labeled "Hours" and "Score" with fixed margins for clear presentation.

Mar 30, 2026

Loading thumbnail…

Pie Chart - Expenses

This example renders a simple pie chart that visualizes expense categories (Food, Travel, Shopping, Others) with their corresponding quantitative values. The chart uses d3.pie() and d3.arc() to generate the slices, with a d3.scaleOrdinal() providing the categorical color scheme. Each slice is labeled using arc.centroid() to position the category names, and a separate HTML legend is appended below the SVG to reinforce the color-coded categories. The visualization is built with d3.v7 and rendered as inline SVG.

Mar 30, 2026

Loading thumbnail…

Line Chart - Trend

A line chart displays a quantitative trend over time, plotting five data points from 2018 to 2022 where values increase from 20 to 90. The SVG visualization uses d3.scaleLinear for both axes and a d3.line generator to create the blue stroked path. The chart includes labeled X and Y axes with tick marks, rendered using d3.axisBottom and d3.axisLeft. The code manually sets chart dimensions and margins, then appends the line and axes to a group element within the SVG canvas.

Mar 30, 2026

Loading thumbnail…

Fork of React & D3 Starter

This example shows a minimal integration of React and D3, displaying a static message. It renders a single HTML div with the text “Hello D3 & React” centered on the page. The code uses React’s `createRoot` to mount a functional component and D3’s `select` method to set the text content, demonstrating how the two libraries can coexist within a modern React application. The data source is not applicable here.

Mar 30, 2026

Loading thumbnail…

Fork of React & D3 Starter

This fork of the React & D3 Starter shows a pie chart of expense categories with quantitative values, alongside a reusable scatter plot module implemented as a factory function. The pie chart uses d3.pie and d3.arc to generate SVG slices, a d3.scaleOrdinal color scale, and includes text labels placed via arc.centroid plus an HTML legend. The scatter plot module uses d3.scaleLinear, extent, axisBottom, and axisLeft to render axes and circles, with setters for width, height, data, and value accessors. Data is hardcoded in both components, and rendering uses SVG throughout.

Mar 30, 2026

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example displays the classic Iris flower dataset as an animated scatter plot, cycling through four different feature combinations on the x-axis every two seconds. The visualization uses D3 v6 with a reusable `scatterPlot` function and SVG rendering, leveraging `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` to map data to positions and draw axes. Circles are updated via data joins, with each column of the Iris dataset swapped in sequence to explore relationships between sepal and petal measurements.

Mar 30, 2026

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example shows a reusable scatter plot mapping study Hours on the x-axis against test Score on the y-axis, with five data points plotted as black circles. The visualization is built using D3 v6 modules including `scaleLinear`, `axisBottom`, `axisLeft`, and `extent`, all wrapped in a custom `scatterPlot` factory function that accepts configurable setters for width, height, data, and accessor functions. The SVG rendering includes labeled axes for Hours and Score, with margins and a fixed 800×500 canvas, while the page uses the Share Tech font from Google Fonts. The code demonstrates a modular pattern where `index.js` supplies a small hardcoded dataset and applies the reusable chart via `svg.call(plot)`.

Mar 30, 2026

Loading thumbnail…

ICE6_Yash_LineChart

This example shows annual revenue as orange bars and cost as a green line from 2015 to 2022, with a legend and axis labels for comparison. It uses d3.scaleBand for the x-axis years and d3.scaleLinear for the y-axis values, rendering SVG rectangles and a d3.line path. The data is hardcoded in the script, and the visualization is built with D3 v7 inside a plain HTML page without React integration.

Mar 9, 2026

Loading thumbnail…

ICE6_Yash_ScatterPlot

This scatter plot visualizes Iris flower measurements, plotting petal width on the x-axis against sepal width on the y-axis for each sample. The visualization uses d3.csv to load the Iris dataset from a remote gist, then applies d3.scaleLinear to map the data values to SVG coordinates. Each data point is rendered as an orange, semi-transparent circle using d3.selectAll and data joins. The chart includes labeled axes for both dimensions, with the y-axis label rotated -90 degrees. The SVG rendering approach provides a clear, static view of the relationship between these two floral characteristics.

Mar 9, 2026

Loading thumbnail…

ICE6_Yash_BarChart

This example shows a bar chart of city populations, with ten bars of increasing height from left to right. The visualization uses D3 v7 within a React framework, rendering SVG rectangles with an orange fill. The data is hardcoded in the script, and the chart uses `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, with bar heights calculated from the population values. The React version loads CSV data from a gist and plots sepal length values instead.

Mar 9, 2026

Loading thumbnail…

ICE5_Yash_Mobile_Data_Visualization

This example demonstrates how to load and parse a CSV dataset from a GitHub gist using D3 v7. It displays a summary box showing the file size, row count, and column count of the mobile sales data, alongside a static blue SVG circle. The visualization uses the Fetch API to retrieve the CSV text, then `d3.csvParse` to convert it into an array of objects. The page is built with React and integrates D3 through a `useEffect` hook to display a simple message, while the summary updates via direct DOM manipulation.

Feb 28, 2026

Loading thumbnail…

ICE5_Mobile_Data_Visualization

This example demonstrates a minimal integration of React and D3, displaying the text "Hello D3 & React" centered on the page. It uses React’s `useRef` and `useEffect` hooks to obtain a DOM node, then calls D3’s `select` method to set the element’s text content. The rendering occurs through `react-dom/client`’s `createRoot`, with D3 v7 and React 19 imported via an import map in the HTML file.

Feb 28, 2026

Loading thumbnail…

Fork of React & D3 Starter

This scatter plot visualizes the relationship between student study hours and exam marks, with a summary showing total students and averages. It uses D3 v7’s `d3.csv` to load data, `scaleLinear` for axes, and `d3.axisBottom`/`axisLeft` for the coordinate system. The React wrapper (index.jsx) renders an SVG, while the standalone HTML version draws semitransparent steelblue circles for each student. Data comes from a raw GitHub CSV file hosted by the author, and the chart includes axis labels for hours and marks.

Feb 28, 2026