Fork of ice-7-task2

100%

Fork of ice-7-task2

✓ Published0🌍 Public

Last edited Mar 24, 2026

Created on Mar 24, 2026

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Task 2 line

This fork of Task 2 uses D3 v7 to render a multi-line chart of monthly household expenses across five categories—housing, food, transportation, utilities, and entertainment—for a full year. It uses `d3.csv` to load the data, `d3.scalePoint` and `d3.scaleLinear` for the axes, and `d3.line` to generate each category’s path. A color legend is built with `d3.scaleOrdinal` and `d3.schemeCategory10`. The SVG output includes labeled axes and a legend on the right side.

Eeeshani.boyapati@gmail.com

89% 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

87% match

Loading thumbnail…

ice-7-task3

A stacked area chart displays monthly household expenses across seven categories—Housing, Food, Transportation, Utilities, Entertainment, Healthcare, and Education—from a CSV file. Each category is drawn as a semi-transparent filled area with a distinct color from `d3.schemeTableau10`, using `d3.area()` to compute paths. The x-axis uses a point scale for months, and the y-axis is linear for USD amounts. A legend identifies categories, with axes and labels rendered via `d3.axisBottom` and `d3.axisLeft` in SVG.

Vvineelaviswanadham07@gmail.com

85% 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 D3 Starter Line Chart ICE-7

This line chart visualizes monthly household spending using React and D3 v7, with data loaded from a CSV via `d3.csv`. The chart uses `scaleTime` and `scaleLinear` for the axes, and `d3.line` with `curveBasis` to render a smooth spending trend. Axis ticks are custom-drawn as SVG elements, with gold lines and blue text, while the line itself appears in red. The graph includes labeled axes for months and expenses, and was built as an ICE-7 assignment fork.

Sshreyasribearelly@gmail.com

84% match

Loading thumbnail…

Fork of ICE-7 Line Chat - DV

This line chart visualizes monthly expenditures, plotting time on the x-axis against the expenditure amount on the y-axis. The data is loaded from an external CSV file. Using D3 v5, the code constructs the visualization with `scaleTime` and `scaleLinear` for the axes, `axisBottom` and `axisLeft` for the ticks, and a `line` generator to draw the path. The chart displays a single red line against a minimal grid, with both axes labeled and styled via CSS.

HHema1430

83% match

Loading thumbnail…

ice-7-task2

This example presents a visual analysis of household expenses across seven categories over a year, using annual totals in a pie chart with percentage labels and a legend, alongside a line chart tracking monthly spending per category. The pie chart computes yearly sums from a CSV dataset, applies a Tableau color scheme, and displays labels positioned along an inner arc. The line chart uses a point scale for months, a linear scale for expense values, and renders lines for each category via `d3.line()`, with axes and labels added through `d3.axisBottom` and `d3.axisLeft`. Both charts are rendered as SVG elements.

Vvineelaviswanadham07@gmail.com

83% match

Loading thumbnail…

Fork of 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`.

YYamini Malikireddy

82% match