msahithipatel@gmail.com

@msahithipatel-dev·10 public vizzes

Fork of Fork of four

This area chart displays a synthetic time series from a CSV file, plotting daily values that rise and fall in a peak pattern. The visualization uses a steelblue line and semi-transparent fill to show the trend. Built with D3.js v7, it parses CSV data and uses `d3.scaleLinear` for axes, `d3.area` and `d3.line` for shapes, and renders to SVG. Axis labels are added via `d3.axisBottom` and `d3.axisLeft`.

Oct 28, 2025

Loading thumbnail…

Fork of four

This fork of the D3.js area chart example plots the values from `data.csv`, which contains a `day` and `value` for 50 points. The chart displays a smooth, single-series trend with a semi-transparent, steel-blue filled area beneath a line of the same color. The code uses `d3.scaleLinear` to map data to pixel coordinates, and `d3.area` and `d3.line` to generate the SVG path data. Axes are added using `d3.axisBottom` and `d3.axisLeft`, with labeled "Day" and "Value" axes, and the rendering is done entirely through SVG.

Oct 28, 2025

Loading thumbnail…

four

This area chart displays daily values over a 50-day period, with a semi-transparent blue fill beneath a solid blue trend line. The visualization uses D3.js v7 to load data from a CSV file and render an SVG. It employs `d3.scaleLinear` for both axes, `d3.area` and `d3.line` to generate the paths, and `d3.axisBottom` and `d3.axisLeft` for the labeled day and value axes.

Oct 28, 2025

Loading thumbnail…

Fork of Fork of third

A line chart displays average monthly temperatures from 2021 to 2024, with time on the x-axis and degrees Celsius on the y-axis. The code loads a local CSV file using `d3.csv`, parses dates with `d3.timeParse`, and builds the visualization with D3 v7. The chart uses `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.curveMonotoneX` for a smooth line, and `d3.axisBottom` and `d3.axisLeft` for tick labels. Orange circles mark each data point with a hover tooltip.

Oct 28, 2025

Loading thumbnail…

Fork of third

A line chart displays average monthly temperatures from 2021 to 2024, with the x-axis encoding month-year and the y-axis temperature in degrees Celsius. The visualization uses D3 v7 with SVG rendering, employing `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to construct the axes, and `d3.line` with `curveMonotoneX` to draw the smoothed path. Orange circles mark individual data points, and tooltips appear via SVG `title` elements, all sourced from an external CSV file.

Oct 28, 2025

Loading thumbnail…

third

This visualization shows the average monthly temperature from January 2021 through December 2024, with the x-axis displaying month-year labels and the y-axis measuring temperature in degrees Celsius. A blue line connects the data points, while orange circles mark each measurement and provide hover tooltips with the exact value. The chart uses D3 v7’s `d3.csv`, `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to parse the external CSV file and render the SVG line chart. The dataset reveals a consistent seasonal pattern across all four years, with warmer temperatures peaking in June and July.

Oct 28, 2025

Loading thumbnail…

Fork of two

This pie chart shows the proportion of total sales by product category, with labels on each slice and a legend to the side. It uses D3 v7’s `d3.rollups` to aggregate sales per category and `d3.pie` to generate arcs, while `d3.scaleOrdinal` assigns colors. Each slice’s centroid is computed with `d3.arc.centroid` for label placement, and the SVG is rendered from CSV data.

Oct 28, 2025

Loading thumbnail…

two

This pie chart visualizes total sales across product categories using data loaded from a CSV file. Categories include Electronics, Clothing, Furniture, Groceries, and Stationery, with summed sales values displayed directly on each slice. The visualization uses d3.csv to load the data, d3.rollups to aggregate sales by category, and d3.pie with d3.arc to generate the slices. A categorical color scale assigns distinct hues, while labels and a legend provide context. The chart is rendered as SVG within an HTML page, with arcs stroked in white for separation.

Oct 28, 2025

Loading thumbnail…

Fork of one

This example presents a reusable scatter plot that visualizes student performance, mapping study hours on the x-axis, scores on the y-axis, and gender as a categorical color. Built with D3 v7, the chart is rendered as SVG and uses `d3.scaleLinear` for axes and `d3.scaleOrdinal` for color encoding. Data is loaded from an external CSV file, and tooltips reveal additional attributes. The scatter plot function is designed for reusability, allowing it to be applied to any dataset with matching fields.

Oct 28, 2025

Loading thumbnail…

one

A reusable D3.js scatter plot visualizes student performance, mapping study hours on the x-axis and test scores on the y-axis, with circles colored by gender (blue for Male, pink for Female). Built with d3.v7, it uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` for color encoding, and `d3.axisBottom`/`d3.axisLeft` for tick marks. The chart loads `students.csv` via `d3.csv` and appends `title` elements for tooltips, rendering as SVG with margins and labeled axes.

Oct 28, 2025