Skip to main content
SimilarExport ZIP
100%

pie chart ICE-7

✓ Published1🌍 Public
Vvydeeshm@gmail.com
Last edited Oct 25, 2025
Created on Oct 25, 2025
Forked from ICE-7

This chart displays monthly electricity usage for a household over 24 months, using a line with circular markers to show seasonal peaks in summer and winter. Built as a reusable D3 v7 component in SVG, it employs `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` for rendering, with `d3.axisBottom` and `d3.axisLeft` for labeled axes and gridlines. The component exposes a public API including `.update()` for redrawing with new data, reading from a CSV file with `date` and `value` columns. A hover tooltip provides interactive feedback.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-7

This interactive line chart visualizes 24 months of synthetic household electricity usage data from a CSV file. The line and points track seasonal consumption patterns, rising and falling across the year with peaks in summer and winter months. Built with reusable D3 v7 component architecture, it uses `d3.scaleTime()`, `d3.scaleLinear()`, and `d3.line()` to render the SVG, with gridlines, axes, and tooltips. The chart supports dynamic updates through a public `.update()` method, making it adaptable for any time-series dataset with date and value columns.

Vvydeeshm@gmail.com
86% match
Loading thumbnail…

line chart ICE-7

This example shows a reusable line chart tracking synthetic monthly household electricity usage in kWh over 24 months. Built with D3 v7, the chart uses `d3.scaleTime()` and `d3.scaleLinear()` for axes, `d3.line()` for the series path, and `d3.axisBottom()` and `d3.axisLeft()` for labeled axes with gridlines. The SVG rendering includes data points as circles, a hover tooltip, and an animated update capability through the `lineChart.update()` API, allowing redraws with new CSV data.

Vvydeeshm@gmail.com
86% match
Loading thumbnail…

pie chart ICE-7

This interactive pie chart visualizes a synthetic household budget allocation across eight categories, displaying each slice with its percentage label and a matching legend. Built with D3 v7, it uses `d3.pie` to compute arc angles, `d3.arc` for slice paths, and `d3.scaleOrdinal` with `d3.schemeTableau10` for colors. The SVG rendering includes leader lines, hover tooltips with transitions, and a reusable component pattern supporting `update()`. A tooltip provides exact values on mouseover, while legend swatches use the same color scale.

Vvydeeshm@gmail.com
85% match
Loading thumbnail…

pie chart ICE 7

This pie chart displays monthly sales data for a company across 2024, with each slice labeled by a three-letter month abbreviation and a legend showing full month names with corresponding sales figures in thousands of dollars. Using D3 v7, the visualization employs `d3.pie()` and `d3.arc()` to generate the slices, `d3.scaleOrdinal` with color schemes to distinguish months, and SVG text elements positioned via `arc.centroid()` for in-slice labels. A legend is constructed with colored rectangles and accompanying text, all rendered in an SVG container.

Aadithiarikatla@gmail.com
84% match
Loading thumbnail…

area chart ICE-7

This area chart visualizes 24 months of synthetic household electricity usage in kWh. The filled area emphasizes the magnitude of values relative to a zero baseline, with an overlaid line and interactive dots. Built as a reusable D3 component using d3.area and d3.line, it renders in SVG with animated updates. The chart includes axes, gridlines, axis labels, and a hover tooltip, all managed through D3 v7 selection joins and the public update method.

Vvydeeshm@gmail.com
82% match
Loading thumbnail…

ICE-7

This example presents a reusable D3 v7 area chart showing 24 months of synthetic household electricity usage in kWh, with the filled area emphasizing magnitude relative to a zero baseline. It renders an SVG with a gradient-styled area, an overlaid line, dots, axes, gridlines, and a hover tooltip that displays exact values. The chart uses d3.area, d3.line, d3.scaleTime, d3.scaleLinear, and d3.axisBottom/axisLeft, and supports updates via a public update method that redraws the visualization with new data.

Vvydeeshm@gmail.com
82% match
Loading thumbnail…

Pie Chart ICE-7

This pie chart visualizes monthly expenditures by department, using proportional slices and a color-coded legend. The chart is rendered in SVG on an HTML page. The code loads CSV data from a GitHub gist, processes it with `d3.csv`, and builds arcs using the `d3.pie` and `d3.arc` APIs. Section colors are assigned via `scaleOrdinal`, and labels and legend values are formatted with `d3.format`.

KKande2011
81% match
Loading thumbnail…

Fork of Pie Chart ICE-7

This example visualizes monthly expenditures from a CSV file as a pie chart. The chart displays categories as colored slices, with each slice labeled by its associated data value, and includes a legend that maps the colors to their numeric values. The visualization is built using D3 version 5, specifically leveraging `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` for the pie geometry, arc paths, and color mapping. Data is fetched asynchronously via `d3.csv` from a GitHub gist URL, and the SVG canvas is rendered with a fixed width and height.

AAnanyaSamala
81% match