Fork of Task 2 line

100%

Fork of Task 2 line

✓ Published0🌍 Public

Last edited Mar 24, 2026

Created on Mar 24, 2026

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

89% match

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

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

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

80% match

Loading thumbnail…

Fork of Task-9(Area Chart)

This fork of Task-9 shows a purple-titled area chart of mobile phone costs over time, with a green filled region beneath a gray line and blue axis labels, drawn as an SVG. The code uses D3 v5 APIs such as `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `line`, and `area` with a `curveBasis` interpolation, rendering to an SVG element. Data is loaded from a CSV file and parsed with `d3.timeParse`. The visualization includes labeled axes for month and cost, with a formatted y-axis tick label.

HHarika Metta

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

80% match

Loading thumbnail…

Fork of Fork of Reusable D3 pie Plot

This household expenses pie chart visualizes the proportional spending across eight categories, such as Housing, Food, and Education, with each slice labeled by its percentage of the total. The chart is rendered using the D3 v7 library, which uses `d3.pie()` to compute arc data, `d3.arc()` to generate the SVG paths, and `d3.scaleOrdinal()` with `schemeCategory10` for colors. A legend on the right side lists each category with its original value, and the entire visualization is created with SVG elements. Data is loaded from a local `expenses.csv` file using `d3.csv()`.

Eeeshani.boyapati@gmail.com

79% match