Fork of HTML Starter

100%

Fork of HTML Starter

✓ Published0🌍 Public

Last edited Mar 27, 2026

Created on Mar 27, 2026

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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

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

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

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

77% match

Loading thumbnail…

Fork of Fork of HTML Starter

This example visualizes a scatter plot of gold-price data from a CSV file, animating between engine power and miles-per-gallon columns on a fixed axis. The visualization uses D3’s `csv` loader and a custom `scatterPlot` module, rendering SVG circles with a 5-pixel radius. A `setInterval` timer cycles the x-axis mapping every second, updating the chart via the plot function. The code demonstrates dynamic axis updates by re-invoking the plot with new accessors, while the y-value remains static, and the viewport dimensions are set to the window size.

NNanditha Reddy

77% match

Loading thumbnail…

Fork of Fork of HTML Starter

This interactive scatter plot visualizes wildlife data, mapping animal weight, altitude, population density, and temperature. The visualization cycles through different x-axis variables every second, allowing dynamic exploration of relationships between ecological metrics. Built with D3 v6, it uses scalable vector graphics (SVG) rendering with ordinal symbol scales to distinguish habitats, while circle sizes encode age-specific differences. The code implements reusable chart functions with configurable accessors, and animates transitions by updating scales and redrawing marks. Data originates from a CSV file loaded via D3’s CSV parser, with axes and symbols rendered using D3’s scale and shape generators.

NNandini Maddula

77% match