pie chart

100%

✓ Published0🌍 Public

Last edited Mar 28, 2024

Created on Mar 28, 2024

This example shows a pie chart of unemployment rates by country, with each slice labeled by country name and percentage in the legend on the right. It fetches CSV data from a GitHub gist and renders the chart on a canvas element using the Chart.js library. The code parses the CSV rows manually, assigns each country a random color, and customizes legend and tooltip callbacks to display the percentage alongside names.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

pie chart

This example shows a pie chart displaying crime counts by type, with the data fetched from a CSV file hosted in a GitHub Gist. The chart is drawn on a Canvas element using the Chart.js library, which handles the pie chart rendering. The JavaScript code parses the CSV data, extracting the crime type and count from specific columns, then passes these as labels and data values to the Chart.js constructor. The visualization uses a fixed set of semi-transparent colors for the pie slices with a border width of one pixel.

TTarun Kumar Bosupally

80% match

Loading thumbnail…

Pie Chart

This pie chart visualizes the unemployment rate across US states, displaying the top 10 states with the highest rates. The chart uses D3.js v5 version's `pie` and `arc` functions to generate SVG path segments, with each state represented by a colored slice. A legend on the right lists each state, its corresponding color, and the unemployment rate in US dollars. The data is loaded from a CSV file hosted on GitHub Gist, processed using D3's `csv` and `scaleOrdinal` functions.

AAmruthaVee

80% match

Loading thumbnail…

Pie Chart

This example shows a pie chart of country-level death counts, with each slice labeled by its value in thousands and accompanied by a color-coded legend. The chart is rendered as SVG using D3 v5, pulling CSV data from a GitHub gist. The code uses `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to compute slice geometry, assign colors, and draw paths, while `d3.select` and `d3.format` handle DOM updates and label formatting. The legend and slice labels are added as SVG text elements, with an outer ring arc generator used only for positioning text at slice centroids.

Hheykrizza

79% match

Loading thumbnail…

PIE CHART

This pie chart visualizes global internet usage rates by country, with each slice sized proportionally to the internet user rate and colored via a categorical scale. Hovering highlights a slice and displays a tooltip with the country name and rate, while a legend lists all countries. Built with D3 v5, it loads CSV data from a GitHub gist and renders the chart as SVG using the `pie` and `arc` generators, with `scaleOrdinal` for colors.

DDeegutla123

79% match

Loading thumbnail…

pie chart of people visited

This pie chart visualizes the number of people who visited various countries, with each slice labeled with its corresponding value in thousands. The chart is rendered using D3 v5’s `pie`, `arc`, and `scaleOrdinal` APIs, drawing SVG paths for the segments and text labels at their centroids. A legend on the right maps each country to its slice color and displays the numeric value. The data is loaded from a remote CSV file via `d3.csv`, with slice colors assigned from a hardcoded array.

SSaikiran2029

79% match

Loading thumbnail…

line chart

This line chart visualizes unemployment rates across multiple countries, with each country plotted on the x-axis and its corresponding rate on the y-axis. The chart is rendered on a canvas using Chart.js, which fetches CSV data from a GitHub gist and parses it into labels and numeric values. The code creates a line dataset with a teal border color, includes a legend at the top, and displays axis titles for countries and unemployment rate. The visualization updates responsively based on the canvas dimensions.

Ssaisathyapriya097@gmail.com

79% match

Loading thumbnail…

Assignmnet 7 Pie Chart

This pie chart visualizes the proportion of COVID-19 cases across the top five nations, with each slice labeled with its percentage and a color-coded legend listing country names and values. It loads CSV data from a GitHub gist and renders the chart using D3 v5’s pie and arc generators, with a scaleOrdinal for slice colors. Text labels are positioned via arc.centroid, and the legend is assembled manually with rect and text elements. The SVG is selected and sized from the HTML attributes, and data processing occurs asynchronously with async/await.

AAshrith Kudidhi

78% match

Loading thumbnail…

Pie Chart

A pie chart displays the population distribution of the top ten most populous countries, with each slice sized proportionally and color-coded via a categorical scale. The chart renders as an SVG, generated from CSV data loaded from a GitHub gist. Using d3.pie and d3.arc, the visualization constructs the circular segments, while d3.scaleOrdinal with schemeCategory10 assigns slice colors. A legend on the right lists each country with its corresponding color swatch and population value, and hovering over a slice logs the population to the console.

Bbrindapotluri

78% match