Skip to main content
SimilarExport ZIP
100%

Sales of each car model in millions ICE 7 Saranya

✓ Published0🌍 Public
MMalempatiSaranya
Last edited Jul 3, 2022
Created on Jul 3, 2022
Forked from HTML Starter

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`.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

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

ICE7 Pie Chart

This pie chart visualizes the top car sales in 2022, with each slice sized proportionally to the number of units sold and a legend displaying car names and sales counts. The chart renders using D3 v5’s `pie` and `arc` generators to compute segment geometry, with colors assigned via `scaleOrdinal` and `d3.schemeCategory10`. Data is loaded asynchronously from `carsales.json` using `d3.json`, and the SVG is built by appending `path` and `rect` elements. The presentation uses an SVG container with a legend offset to the side, and sales values are formatted with `d3.format`.

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

ICE 7 Pie Chart

This visualization presents a pie chart of top car company sales by price, with each slice labeled with its value and accompanied by a legend listing the corresponding model names. The chart uses D3 v5 APIs including `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate the segments and map categorical colors, while the legend is built manually with SVG `rect` and `text` elements. Data is loaded from a GitHub Gist via `d3.csv` in a React-based setup, with the SVG rendered directly in the browser.

Llikith1266
78% match
Loading thumbnail…

Fork of ICE - 7 Pie Chart Maanas Katta

This pie chart shows annual car sales for different companies in India, with each slice labeled with its sales value in thousands and accompanied by a color-coded legend listing company names and corresponding figures. The visualization uses D3 v5, loading CSV data via `d3.csv` and computing arc paths with `d3.pie` and `d3.arc`. Colors are assigned through `d3.scaleOrdinal`, and the chart renders as SVG elements, including a centered pie and a legend positioned to the right, with labels formatted using `d3.format`.

RRohith arabati
77% match
Loading thumbnail…

ICE 7 Pie Chart

This pie chart displays 2021 car sales by type, with each slice labeled by car category and its percentage of total sales. A legend to the right provides additional identification of the color-coded segments. The visualization is built using D3.js v5, which handles the data loading, pie layout, and arc generation. The code uses `d3.pie()` to compute the angles, `d3.arc()` to draw the slices, and `d3.scaleOrdinal` with `d3.schemeCategory10` for the color palette, with data fetched from a remote text file.

RRahulbelede97@gmail.com
77% match
Loading thumbnail…

Ice 7

This visualization shows the sales of cars in India from 2009 to 2019 using a combined line and area chart. The black line traces the sales trend over time, while the orange area beneath it emphasizes the magnitude of sales. The chart uses D3 v5’s `scaleTime` and `scaleLinear` for the axes, with `line` and `area` generators applying a basis curve to smooth the data. Data is loaded from a CSV file, and sales values are parsed as numbers while years are formatted as dates.

Eeravellisaimeghana
77% match