Skip to main content
SimilarExport ZIP
100%

ICE 7 Saranya

✓ Published2🌍 Public
MMalempatiSaranya
Last edited Jul 2, 2022
Created on Jul 2, 2022
Forked from HTML Starter

This example displays a donut chart of aggregated sales data, with each arc labeled by its total value and a legend identifying categories. The visualization also includes tooltips on hover and uses opacity to differentiate segments. Built with React and D3 v2, it loads CSV data and processes it through a custom `TransformChartData` function to sum values by category. The chart is rendered as an SVG using `d3.layout.pie` and `d3.svg.arc`, with color mapping via `d3.scale.ordinal` and interactive legend elements.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also [React Starter] https://gist.githubusercontent.com/MalempatiSaranya/3292ebf15c9fa38a5b2d34c4c1ccf253/raw/a61a397bf02c893e1d9e21663ac6d4d6ba04a6b9/ICE7.csv

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ICE 7 Saranya

This example visualizes aggregated sales data as an interactive donut chart, using a pie layout to segment totals across categories. The visualization is rendered in SVG with D3.js v2 within a React framework, employing `d3.layout.pie` and `d3.svg.arc` to compute arc paths. Hovering over or clicking legend items provides additional context through SVG titles. The data originates from an ICE7.csv file, and the chart includes value labels placed via `arc.centroid`. Color encoding uses an ordinal scale with a pre-defined color range, and the entire plot is animated and wrapped in a custom `TransformChartData` aggregation function.

Ssitaramchallapalli
91% match
Loading thumbnail…

Fork of ICE 7 Saranya

This visualization shows car model sales data for a month in a donut chart. The chart displays sales totals for each car model as proportional arc segments, with labels and tooltips showing sales figures. Built using D3.js v2 and jQuery, the code loads data from a CSV file and uses `d3.layout.pie` and `d3.svg.arc` to generate the donut shape. Animated color fills and a clickable legend with rectangles and text labels enhance interactivity within a React framework, rendering as SVG.

Ssitaramchallapalli
86% match
Loading thumbnail…

Sales of each car model in millions ICE 7 Saranya

This visualization displays total sales of car models in millions, aggregated from a CSV dataset, as an interactive donut chart with a legend. The chart, built with D3 v2 and jQuery, uses `d3.layout.pie` and `d3.svg.arc` to generate proportional arcs, with `d3.scale.ordinal` mapping model names to colors. Each slice includes a hover tooltip via `svg:title` and shows the sales value as text. Animated opacity transitions and clickable legend entries highlight or toggle data segments, while the SVG rendering updates dynamically through `d3.select` and `append`.

MMalempatiSaranya
82% match
Loading thumbnail…

ICE 7 Pie Chart

This example visualizes top product sales as an interactive pie chart, with a legend displaying each product name and its corresponding unit count. The chart renders using D3 v5 within a React framework, leveraging `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` with `schemeCategory10` for color encoding. Data is loaded from an external CSV file via `d3.csv`, sorted by sales value, and the top 10 items are selected for display. The SVG-based visualization includes hover logging of sales values, with legends positioned alongside the chart.

Llibramanju
80% match
Loading thumbnail…

ice7 part2

This example presents an interactive pie chart built with D3.js v7 that visualizes static sales data across four product categories. The chart renders as an SVG, with each category represented by a colored slice, and uses a hover interaction to display a tooltip showing the category name and its sales value. The code employs `d3.pie()` to compute the arc angles, `d3.arc()` to generate the slice paths, and `d3.scaleOrdinal` with `d3.schemeCategory10` for coloring. A separate HTML legend lists each category with its corresponding color swatch.

Jjammigumpula.priyanka193@gmail.com
80% match
Loading thumbnail…

ICE7

This pie chart visualizes export values across different years. It loads CSV data from a GitHub gist and renders an SVG donut chart using D3 v5’s `pie` and `arc` generators, with `scaleOrdinal` for section colors. Labels display formatted values via `format`, and a legend lists each year with its corresponding value.

Ssugunagar
80% match
Loading thumbnail…

ICE - 7 Pie Chart

This example displays the percentage of total sales for different items in a pie chart using D3 v5. The code loads CSV data from a GitHub gist and renders an SVG with a pie chart and a legend, with each slice and legend entry colored by a fixed ordinal scale. It uses `d3.csv`, `d3.pie`, and `d3.arc` to compute and draw the arc segments, and `d3.scaleOrdinal` for color mapping, while formatting the percentage labels with `d3.format`.

RRamyapriyaPutta
80% 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
79% match