Skip to main content
SimilarExport ZIP
100%

Fork of HTML Starter

✓ Published0🌍 Public
YYamini Malikireddy
Last edited Mar 28, 2026
Created on Mar 28, 2026
Forked from HTML Starter

This chart displays monthly expenses across three categories—food, transport, and entertainment—using a stacked area chart powered by D3 v7. The visualization loads data from a CSV file and renders SVG paths generated by `d3.area` and `d3.stack`. The y-axis scales linearly with `d3.scaleLinear`, while the x-axis uses `d3.scalePoint` for month categories. A legend maps category colors via `d3.scaleOrdinal`, and the chart includes axis labels, a title, and rotated x-axis tick labels using `d3.axisBottom` and `d3.axisLeft`.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

This multi-line chart tracks monthly spending across three categories—food, transport, and entertainment—using a CSV dataset. Rendered as SVG paths and circles, it employs the reusable `multiLineChart()` function with D3's `scalePoint`, `scaleLinear`, and `scaleOrdinal` for axes and color encoding. Axis labels, a bold title, and an interactive legend clarify the trends. The chart is built with D3 v7, loading data via `d3.csv` and appending SVG elements.

YYamini Malikireddy
92% match
Loading thumbnail…

Fork of HTML Starter

This visualization shows monthly food and transport expenses as a scatter plot, with each circle representing a month and positioned by its food and transport costs. The reusable chart function `scatterPlot()` uses `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for tick marks, and SVG circles with a steelblue fill. Data is loaded from an external CSV file via `d3.csv` and parsed as numbers. The chart includes labeled axes, a bold title, and configurable setters for dimensions and value accessors.

YYamini Malikireddy
90% match
Loading thumbnail…

Fork of HTML Starter

This scatter plot displays the relationship between food and transport expenses across twelve months, with each circle representing a month’s spending on these two categories. The visualization is rendered as an SVG using D3.js v7, employing a reusable `scatterPlot()` function that leverages `d3.scaleLinear` for axes and `d3.axisBottom`/`d3.axisLeft` for tick marks. Data is loaded from a local CSV file (`data.csv`) and parsed into numeric values, while the chart’s configurable parameters (x/y mappings, labels, dimensions) are set via fluent setter methods before rendering.

YYamini Malikireddy
89% match
Loading thumbnail…

Fork of HTML Starter

This pie chart visualizes expense categories and their corresponding values from a CSV dataset. Using D3.js v7, the chart generates colored slices with SVG paths via `d3.pie()` and `d3.arc()`, with white labels positioned at arc centroids. A legend constructed with SVG rectangles and text displays each category alongside a color scale based on `d3.scaleOrdinal` and `d3.schemeCategory10`. The data is loaded asynchronously with `d3.csv`.

YYamini Malikireddy
86% match
Loading thumbnail…

Fork of D3 Starter Area chart ICE-7

This area chart shows household monthly expenses over time within a D3.js SVG. The code loads a CSV dataset and uses D3 v5 APIs like `scaleTime` and `scaleLinear` for axes, along with `line` and `area` generators with `curveBasis` smoothing. Styling includes a lime-colored semi-transparent area and blue line, with formatted tick labels for both axes. The visualization renders an interactive, static SVG with axis labels for “Months” and “Expenses.”

Sshreyasribearelly@gmail.com
84% match
Loading thumbnail…

Fork of HTML Starter

This area chart visualizes monthly grocery sales revenue using D3.js v6 with SVG rendering. It fetches CSV data from a GitHub Gist, then displays revenue trends across months with labeled axes and steelblue fill. The code employs D3's `scaleBand`, `scaleLinear`, `area`, and `axisBottom`/`axisLeft` APIs, with data converted to numeric values via unary plus operator.

Ssahithya.voleti@gmail.com
83% match
Loading thumbnail…

Fork of ice-7-task2

This fork of ice-7-task2 visualizes monthly expenses across five categories—housing, food, transportation, utilities, and entertainment—as a multi-line chart. The D3 v7 code loads data from a CSV file and renders an SVG with smooth monotone curves for each category, distinguished by a categorical color scheme. It uses `d3.scalePoint` for the month axis, `d3.scaleLinear` for the expense axis, and `d3.line` with `d3.curveMonotoneX` to generate the lines, while also adding individual data points and a right-side legend.

Eeeshani.boyapati@gmail.com
82% match
Loading thumbnail…

Fork of Task 3

This fork of Task 3 displays monthly expense categories as overlapping filled areas in an SVG area chart, using d3.area to stack housing, food, transportation, utilities, and entertainment values. The code loads data from monthly.csv, applies d3.scalePoint and d3.scaleLinear for axes, and colors each category with d3.scaleOrdinal and d3.schemeCategory10. Semi-transparent fills allow categories to be compared across months, with axis labels generated via d3.axisBottom and d3.axisLeft.

Eeeshani.boyapati@gmail.com
81% match