Fork of HTML Starter

100%

Fork of HTML Starter

✓ Published0🌍 Public

Last edited Mar 27, 2026

Created on Mar 27, 2026

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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

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

81% match

Loading thumbnail…

Fork of Scatter Plot

This fork of a scatter plot visualizes monthly sales versus profit from a small CSV dataset, encoding each month as a steelblue circle. Using D3 v7 within a React framework, the code loads the data and renders the chart as an SVG, leveraging `d3.scaleLinear` and `d3.extent` to map values, and `d3.axisBottom` and `d3.axisLeft` to generate axes. The example demonstrates a reusable chart structure with configurable margins and an explicit SVG container.

Ppvvaishnavi93@gmail.com

80% match

Loading thumbnail…

Fork of React & D3 Starter

This example shows a reusable scatter plot of monthly sales versus profit from a small CSV dataset. The chart renders as SVG circles on linear x- and y-axes, with labeled axes and a title. The code defines a `scatterPlot` function that takes data and scales as props, using `d3.csv` to load the data and `d3.axisBottom` and `d3.axisLeft` to draw the axes. Color is fixed to steelblue, and the plot is built within a React JSX file.

Ppvvaishnavi93@gmail.com

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

79% match