ice7

100%

✓ Published0🌍 Public

Last edited Oct 28, 2025

Created on Oct 28, 2025

Forked from Vanilla D3 Vibecoding Template

This example demonstrates quarterly sales and profit trends from an 11-row Superstore CSV using four reusable D3.js v7 charts. A scatter plot of Sales versus Profit uses a Tableau10 color scale for categories, while a pie chart shows total sales share with arc labels and legends. The line and area charts aggregate data by UTC month using `d3.utcMonth` and `d3.rollups`, rendering paths with `d3.line` and `d3.area`. All charts use chainable accessor setters, `d3.select` joins, and SVG viewBox scaling, with hover tooltips on the scatter plot.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE7 - Line Chart

This visualization displays the profit trends of a Super Store for 2023, using a line chart to show how profits change over the months. The chart is built with React and D3 v7, using `scaleTime` for the x-axis and `scaleLinear` for the y-axis. Data is loaded from a CSV file via `d3.csv`, and the line is rendered as an SVG path using `d3.line` with the `curveBasis` smoothing. The axes include tick marks and labels, with the months formatted using `timeFormat('%b')` and the plot styled with custom CSS.

Kkuraakhila9@gmail.com

80% match

Loading thumbnail…

ice7

This example shows a scatter plot of revenue versus profit from a CSV dataset of 200 rows. The plot is built with a reusable D3 module called `scatterPlot`, which uses `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to map and render the axes. Circles are appended with `d3.selectAll` and `join`, using a fixed radius and a steelblue fill. The data is loaded asynchronously with `d3.csv` and parsed to remove currency symbols, while the SVG fills the entire browser window.

Sshyamraghav12@gmail.com

80% match

Loading thumbnail…

ICE7 Line Chart

This line chart displays yearly sales summaries from a superstore dataset, plotting sales figures over time on a purple-themed SVG canvas. The implementation uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` generators to construct axes, gridlines, and a single emphasized line path. It loads data via `d3.csv` from a GitHub gist, parses years with `d3.timeParse`, and formats axis ticks with `format('.3s')`. Hover interactions are not present; the chart focuses on static visualization.

SSharmaAshwini

80% match

Loading thumbnail…

ICE7 - Reusable scatter plot

This interactive scatter plot visualizes Superstore sales data, plotting profit against sales to reveal performance trends. Reusable JavaScript module `scatterPlot` encapsulates chart configuration and rendering, with the D3 v6 API handling data loading via `csv`, linear scaling with `scaleLinear`, and axis generation through `axisLeft` and `axisBottom`. Points are rendered as SVG circles with animation, allowing flexible reconfiguration of dimensions, margins, and visual attributes.

Mmamathareddy1321@gmail.com

80% match

Loading thumbnail…

ICE7

This example renders a monthly sales area chart using D3 v7, displaying sales trends from January to December. The visualization combines a light steel-blue filled area with a steel-blue line overlay, plus orange circles marking individual data points. The chart uses SVG rendering with D3’s scalePoint for the categorical month axis and scaleLinear for the numeric sales axis. Data is loaded from a CSV file and processed with d3.csv, while area and line generators construct the paths. Axis labels and a title annotate the chart.

BBHUMIKA CHUNDU

79% match

Loading thumbnail…

ICE 7

This example shows a reusable D3 scatter plot of product sales versus profit, with each circle representing an item and axes scaled to the data. It fetches CSV data from a GitHub Gist, falling back to embedded data if the request fails. The visualization is built with `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom`, and drawn as SVG circles. The plot is sized to the window and styled with the Share Tech font, using a minimal, full-screen layout.

Ssarasaketh3@gmail.com

78% match

Loading thumbnail…

Ice7Q1

This interactive scatter plot visualizes Microsoft sales data, plotting revenue against profit for different product categories and scaling each point’s radius by order count. Hovering reveals a tooltip with category, revenue, and profit details. Built with D3.js v3, it uses `d3.svg.axis`, linear scales, and `d3.scale.category10` for coloring. Data loads from an external CSV file, and the chart is rendered as an SVG with mouseover transitions controlling tooltip opacity. The reusable `scatterPlot` function configures dimensions, margins, and accessor functions.

Ssrujana reddy

78% match

Loading thumbnail…

Fork of ice07-reusable scatter plot

This reusable scatter plot visualizes retailer data, mapping Sales on the x-axis against Profit on the y-axis, with points colored by product Category using d3.scaleOrdinal and a Tableau color scheme. The code uses D3 v7 to create an SVG chart with axes, tick labels, a dashed zero-profit reference line, and an interactive tooltip triggered by mouse events. It also includes a legend and fixed plot dimensions, with data loaded from a CSV file via d3.csv and parsed with d3.autoType.

LLaasyaJ256

78% match