ICE-7 Pie Chart

100%

ICE-7 Pie Chart

✓ Published1🌍 Public

Last edited Mar 25, 2023

Created on Mar 25, 2023

This example visualizes the weekly sales of Walmart for ten dates as a pie chart, with each slice colored and labeled by its corresponding sales amount in millions of dollars. The pie chart layout is generated using D3.js version 7, employing the `pie` and `arc` functions, while `scaleOrdinal` with `schemeCategory10` assigns colors. A legend on the right displays each date and its formatted sales value, drawn with SVG `rect` and `text` elements. The data is loaded asynchronously from a CSV file hosted on GitHub, and all rendering is done with SVG.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE 7 - line graph

This line chart visualizes the weekly sales of Walmart over a 52-week period. The y-axis represents sales figures, ranging from 0 to 4,000,000, while the x-axis tracks the week number. Using D3.js (v5), the code loads CSV data from a GitHub gist and renders an SVG line graph with a slateblue stroke. It employs d3.scaleLinear for both axes, d3.axisLeft and d3.axisBottom for ticks, and d3.line to generate the path. The chart includes labeled axes, gridlines, and a title, with margins positioning the plot centrally.

IIsabella Jaya Rani C

85% match

Loading thumbnail…

Pie chart , ICE-7

A pie chart displays the top ten weekly product sales in a shop, with each slice sized by the `weeksales` value and colored via `d3.scaleOrdinal`. The code loads CSV data from a GitHub gist using `d3.csv`, computes the pie layout with `d3.pie`, and draws SVG paths with `d3.arc`. Slice labels show formatted sales values, and a legend lists product names with matching colors and values.

AAmanullah007

84% match

Loading thumbnail…

ICE 7.4

This visualization displays 11 years of Walmart sales data as a smooth area chart, with a black line tracing sales over time above a yellow filled region. The SVG chart uses D3.js v5 scales, axes, and generators, including `scaleTime`, `scaleLinear`, `line`, and `area` with `curveBasis` for smoothing. The data is loaded from a remote CSV file, with years parsed via `d3.timeParse` and sales converted to numbers. Axis labels and gridlines are styled through CSS, while tick labels on the y-axis are formatted using D3's `format` with the `.3s` specifier.

Kkartik900

84% match

Loading thumbnail…

ICE 7

This pie chart visualizes sales by category, displaying five segments for electronics, furniture, clothing, and toys. The chart uses D3.js v7 to load the sales.csv dataset, then applies `d3.pie()` and `d3.arc()` to compute slice geometries, with `d3.scaleOrdinal` and `d3.schemeTableau10` assigning colors. It renders as SVG with category labels positioned via `labelArc.centroid()` and includes a legend showing each category and its value. Hovering over a slice reveals a tooltip with the category name and numeric value.

Aankitgoudpoodhari07@gmail.com

83% match

Loading thumbnail…

ICE 7- Area Chart

This area chart visualizes the weekly sales of Walmart over time, with a smooth, curved line and a skyblue fill beneath it to emphasize the trend. The visualization is built with D3 v6 using the `area` generator with a `curveBasis` interpolation, and it scales the x-axis with `scaleTime` and the y-axis with `scaleLinear`. The chart includes labeled axes and a title. The data is loaded from a CSV file containing weekly sales figures.

IIsabella Jaya Rani C

83% match

Loading thumbnail…

ICE-7 Line Chart

This visualization aggregates Walmart weekly sales data by temperature bins, smoothing the resulting points into a blue basis-spline line chart. It uses D3 version 7 APIs including `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render the SVG. The chart plots temperature in Fahrenheit on the x-axis against total weekly sales on the y-axis, with the data sourced from a CSV hosted on GitHub. Axis labels and a title annotate the plot, which lacks interactive features.

SSanjib Paudel

83% match

Loading thumbnail…

ICE 7.3

This example shows Walmart sales over an 11-year period as a single line chart, with time on the x-axis and total sales value on the y-axis. The visualization is built with React and rendered as an SVG using D3 v5, specifically leveraging `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and the `line` generator to draw the path. Data is loaded as CSV and parsed with `d3.timeParse` to convert date strings into temporal values. Grid lines are styled via CSS, and axis labels are added as SVG text elements.

Kkartik900

83% match

Loading thumbnail…

ICE7 - Pie Chart

This pie chart visualizes regional sales distribution, with each slice representing a region's proportion of total sales and a legend showing region names with percentage values. The code loads sales data from a GitHub-hosted CSV using d3.csv, then renders the chart with d3.pie and d3.arc functions, applying colors via scaleOrdinal. SVG elements are appended to the page using d3.select, with legend text formatted via d3.format to display percentages. The visualization uses d3.v5 and outputs the result as scalable vector graphics.

Kkuraakhila9@gmail.com

82% match