csesomarajuaswini@gmail.com

@Aswini-37·9 public vizzes

Fork of Fork of Map

A force-directed graph represents a student collaboration network, with six tomato-colored nodes for students and gray links for their connections. Built with d3.v7, it uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` forces to position nodes. The SVG rendering updates node and label positions on each simulation tick. Users can drag nodes, which adjusts the simulation's alpha target to pause or restart the layout.

Apr 9, 2026

Loading thumbnail…

Fork of D3 Starter

This example shows a pie chart of student marks distribution, with each slice labeled by the student’s name. It loads CSV data from a GitHub repository, parses the marks as numbers, and uses `d3.pie()` to compute slice angles and `d3.arc()` to generate SVG path shapes. The chart applies a categorical color scale (`d3.schemeCategory10`) and positions labels using `arc.centroid()`. The visualization renders in SVG within a 500×400 viewport, using D3 v7 loaded via an import map.

Mar 28, 2026

Loading thumbnail…

Fork of D3 Starter

This area chart visualizes the relationship between Age and Marks, using a light blue fill with a blue stroke to represent the trend. The SVG graphic is rendered using D3 v7, with data loaded from an external CSV file hosted on GitHub. The code sorts the data by age and constructs the area using the `d3.area` generator. Linear scales (`d3.scaleLinear`) map the age and marks values to pixel coordinates, while `d3.axisBottom` and `d3.axisLeft` add the axes, and text elements label the chart, its axes, and title.

Mar 28, 2026

Loading thumbnail…

Fork of D3 Starter

A line chart shows the relationship between Age and Marks, with age on the x-axis and marks on the y-axis. The visualization loads CSV data from a GitHub repository, sorts the points by age, and renders a single blue path using d3.line with d3.scaleLinear domains and ranges. Axes are added via d3.axisBottom and d3.axisLeft, while text elements label the axes and title. The chart uses SVG rendering and D3 v7 with the module import via an importmap.

Mar 28, 2026

Loading thumbnail…

Fork of Fork of D3 Starter

This example shows a reusable scatter plot that maps student Age against Marks, with axes and labels generated from a CSV file. The code defines a `drawScatter` function that uses `d3.scaleLinear` to set domains and ranges, then renders circles with `d3.selectAll` and appends axis groups via `d3.axisBottom` and `d3.axisLeft`. Data is loaded asynchronously from a GitHub-hosted CSV using `d3.csv`, and the SVG output is cleared and redrawn on each call.

Mar 28, 2026

Loading thumbnail…

Fork of D3 Starter

This visualization combines a bar chart and line chart to show sales, profit, and expenses over time. The chart displays orange, semi-transparent bars for sales alongside blue, green, and red lines for sales, profit, and expenses, respectively. It uses d3.csv to load data from an external GitHub-hosted CSV file. The SVG rendering relies on d3.scalePoint, d3.scaleLinear, and d3.line to map the categorical months and numeric amounts, with d3.axisBottom and d3.axisLeft for axes and additional gridlines.

Mar 7, 2026

Loading thumbnail…

Fork of D3 Starter

This scatter plot visualizes the relationship between age and income, plotting individual data points as steelblue circles within a fixed 700x400 SVG canvas. The visualization loads CSV data from a GitHub repository, converts the age and income values to numbers, and maps them to screen coordinates using d3.scaleLinear scales. Axes are generated with d3.axisBottom and d3.axisLeft to show the age range from 20 to 60 and income range from $30,000 to $90,000. The chart provides a straightforward view of how income varies across different ages in the dataset.

Mar 5, 2026

Loading thumbnail…

Fork of Fork of Empty D3 Starter-likitha

A bar chart displays product sales data loaded from a remote CSV file via `d3.csv`. The visualization uses `d3.scaleBand` and `d3.scaleLinear` to map product categories and sales values, rendering steelblue rectangles in an SVG. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, while the chart updates through D3’s data join pattern using `selectAll` and `enter`. The static SVG output is styled with a minimal CSS rule for message text.

Mar 5, 2026

Loading thumbnail…

Fork of D3 Starter

This visualization displays the distribution of counts across dataset categories as circles arranged horizontally in an SVG canvas. The code loads CSV data from a GitHub repository using `d3.csv`, converts the count values to numbers with the unary plus operator, and calculates total rows and sum via `d3.sum`. A summary line above the chart reports these aggregate values. Each circle’s radius reflects its count value, rendered with a steelblue fill and positioned at fixed x-intervals. The implementation uses D3 v7 selection, data join, and enter/append methods to create the SVG circles.

Feb 27, 2026