Pie Chart for top brands and their prices

100%

Pie Chart for top brands and their prices

✓ Published0🌍 Public

SSwapna1915

Last edited Jul 26, 2023

Created on Jul 26, 2023

A pie chart displays the relative prices of top brands, with each slice labeled by its price in thousands and a corresponding legend listing brand names and values. The chart uses D3 v5 APIs including `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate segments and assign colors, while `d3.csv` loads the dataset from a GitHub Gist. Text labels are positioned via `arc.centroid`, and the SVG renders the chart and legend interactively.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

pie chart

This pie chart visualizes the prices of the top 11 products from a CSV dataset, sorted in descending order and drawn as SVG arcs. Built with D3.js v5, it uses the `pie` and `arc` functions to generate segments, `scaleOrdinal` with `schemeCategory10` for color coding, and includes an interactive legend showing each product name and its price in dollars. Data is loaded asynchronously via `csv` from a GitHub gist, and the chart is rendered on mouseover logging.

Aadapavaishnavi12

85% match

Loading thumbnail…

Pie Chart

This pie chart displays car sales for the month of May across multiple car brands, with each slice labeled with its sales value in thousands. The chart uses D3 v5’s `pie` and `arc` generators to compute slice angles and paths, rendered as SVG. An ordinal color scale maps each brand to a distinct color from a hardcoded array. Legends appear at the right, listing each brand and its corresponding value, while the data is loaded asynchronously from a CSV hosted on GitHub Gist using `d3.csv`.

Vvaddepallinaveen

82% match

Loading thumbnail…

Pie Chart

This pie chart displays TV brand sales data, breaking down each brand’s year-to-date (YTD) revenue into proportional slices with corresponding legends showing percentage and value in thousands. The visualization uses d3.pie and d3.arc to generate the SVG path segments, with d3.scaleOrdinal assigning a distinct color to each brand. Data is loaded asynchronously via d3.csv from a GitHub gist, and d3.format is used to present numeric values in a compact format.

KKiran Jyothi Bodduluri-11604571

81% match

Loading thumbnail…

Pie Chart

This pie chart displays the sales figures of various companies, with each slice sized proportionally and labeled with its value in thousands. It also includes a color-coded legend listing company names and corresponding sales amounts. The visualization uses D3 v5 APIs including `pie`, `arc`, `scaleOrdinal`, and `format` to generate the SVG segments and text, with data loaded via `csv` from a GitHub gist. Colors are assigned through a custom ordinal scale.

TTejaswi@3271

81% match

Loading thumbnail…

Pie chart

A pie chart displays the top 10 states by YTD sales, with each slice colored and paired with a legend showing the brand name and value. The chart uses `d3.pie` to compute angles and `d3.arc` to render SVG paths, with `d3.scaleOrdinal` assigning colors. Data loads from a CSV via the `csv` method, and the legend includes formatted values using `d3.format`. The SVG is sized 960×500, with the pie centered and legend positioned to the right.

Ssowmyanagula@my.unt.edu

80% match

Loading thumbnail…

Pie Chart

This example displays a pie chart of sales figures for different companies, with each segment labeled by its proportional value and paired with a legend showing company names and sales totals. The chart is rendered as SVG using D3 v5, with data fetched from a CSV URL. It uses D3’s `pie` and `arc` generators to create the segments, a `scaleOrdinal` to map sales values to a set of predefined colors, and custom text elements to label each slice.

Mmanvithareddykarra

80% match

Loading thumbnail…

pie chart ic7

A pie chart visualizes the top 10 bike models ranked by cost. Each slice represents a bike, with colors assigned via `d3.scaleOrdinal`, and the chart is rendered using D3's `pie` and `arc` functions within an SVG canvas. The legend, positioned to the right, uses `d3.select` and `d3.arc` to list bike names and their costs in thousands. Data is loaded asynchronously from a CSV using `d3.csv`, with cost values formatted via `d3.format`. Text labels at slice centroids display the bike names, though the code sets the fill to black and font size, which may affect readability against colored slices.

Ddivyagunuguntla

79% match

Loading thumbnail…

Pie Chart

This interactive pie chart visualizes the top 10 best-selling books, displaying the relative share of sales (in thousands) for each country. Built with D3 v5 and rendered as SVG, it uses the `pie` layout and `arc` generator to create the chart's segments. The visualization includes a custom legend and data labels, with colors mapped via `scaleOrdinal`. The data is fetched from a remote CSV file using D3's `csv` function, and the project imports specific modules like `select`, `arc`, and `format` to handle rendering.

SSrilekha24

79% match