Fork of HTML Starter

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

92% match

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.

88% match

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.

87% match

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

84% match

Sshreyasribearelly@gmail.com

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.

Ssahithya.voleti@gmail.com

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.

Fork of Fork of HTML Starter

A line chart visualizes cost data from 2000 to 2013, plotting expenses against time with a green line. The visualization uses D3 v5 to load CSV data, create time and linear scales, and render axes with custom tick styling. The chart highlights the upward trend in sales, with red axis labels and a bold title, set against a light blue background. The code employs d3.select, d3.csv, d3.scaleTime, d3.scaleLinear, and d3.line to construct the SVG-based chart.

NNandini Maddula

Eeeshani.boyapati@gmail.com

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.