Skip to main content
SimilarExport ZIP
100%

Fork of ICE 7 Saranya

✓ Published0🌍 Public
Ssitaramchallapalli
Last edited Jul 2, 2022
Created on Jul 2, 2022
Forked from 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.

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…

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
87% match
Loading thumbnail…

ICE 7 Saranya

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.

MMalempatiSaranya
86% match
Loading thumbnail…

Fork of ICE-7 pie chart

This chart visualizes the number of car units sold per car model as a donut pie chart, with each segment sized proportionally to its value and a corresponding legend that pairs each car category with its numeric sales figure. The visualization is built using D3 version 5, employing `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate the arcs and color scheme, while data is loaded asynchronously from a CSV file via `d3.csv`. The SVG output positions the donut centered at the left, with the legend displayed on the right, and uses a custom text formatting function for axis tick labels.

Eeravellisaimeghana
84% match
Loading thumbnail…

Fork of Fork of ICE-7 pie chart

This visualization presents a pie chart showing the number of car units sold for different car models. The chart uses a donut-style layout with a central hole, and each slice is colored distinctly to represent a different car. A legend on the right side lists each car name with its corresponding color and the exact unit count. The visualization is built using D3.js version 5, fetching data from a CSV file hosted on GitHub. The code uses D3's `arc`, `pie`, and `scaleOrdinal` functions to generate the chart and legend, with custom section colors and formatted tick values for the legend text.

Eeravellisaimeghana
84% match
Loading thumbnail…

Fork of ICE-7

This visualization displays car sales data over time as a line chart, with years on the x-axis and sales figures on the y-axis. It uses D3 v5 to load CSV data, parse dates with d3.timeParse, and render scales and axes via scaleTime, scaleLinear, axisBottom, and axisLeft. The line is drawn using the d3.line generator, with the SVG path styled in orange. The chart includes labeled axes and uses margins to position the plot within the SVG canvas.

CCherukuriMilind
83% match
Loading thumbnail…

ICE 7 fork

A donut chart displays 2022 US auto sales by brand, with the total sales volume for each brand represented as a slice of the circle. The visualization uses D3.js version 5, specifically the `pie`, `arc`, and `scaleOrdinal` APIs to calculate slice angles and apply a categorical color palette. Data is loaded asynchronously from a CSV file via `d3.csv`. Each slice’s fill color corresponds to a legend on the right, which lists brand names and their sales figures formatted in thousands with a “K” suffix.

SSnigdha6698
82% match
Loading thumbnail…

Fork of ICE-7 pie chart

This pie chart displays the number of car units sold for different car models, using a dataset of units per car name. The visualization renders each segment as an arc with a distinct color and includes a legend showing the car name and its corresponding value. Built with D3 v5, it uses the `pie` and `arc` generators to compute the segments, while `scaleOrdinal` assigns colors and `format` handles the numeric tick labels. The data is loaded asynchronously via `d3.csv` from a GitHub gist.

Llikith1266
82% match