peterwang6666

@peterwang6666·6 public vizzes

Untitled

This pie chart visualizes user-vote outcomes from a small CSV dataset, mapping each user to a colored slice representing their winning choice. The chart is rendered as an SVG using D3 v4’s `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` APIs, with the data loaded via `d3.csv`. Each slice is filled by browser color (from a fixed palette) and labeled with the user’s name, while a title reads “pie chart.” The code also includes an unused loop variable and a console log, but the visualization itself focuses on the proportional distribution of the two outcomes.

Dec 18, 2021

Loading thumbnail…

Fork of Pie chart Test

This is an SVG pie chart that visualizes the percentages of white, black, and draw results from a dataset of 20,058 total records, with each slice labeled by its name and percentage. The chart uses D3 v6's `d3.pie` function to compute the arc segments and `d3.arc` to define both the path shapes and the text label positions, with a custom color scale (`d3.scaleOrdinal`) mapping values to a palette. The chart is centered within a large 4000x4000 SVG canvas, and the data is hardcoded in `index.js` rather than being loaded from the provided `data.csv` file.

Dec 18, 2021

Loading thumbnail…

Fork of Fork of Pie chart Test111

This example displays a pie chart of country populations in SVG, using an ordinal color scale with a fixed palette. The chart is generated with d3.pie and d3.arc, and each slice is labeled with the country name positioned via d3.arc centroid coordinates. Data is loaded from a CSV file with d3.csv, and the chart is centered inside a large 4000x4000 SVG viewport. The code uses d3.v6 and relies on data binding to append path and text elements per slice.

Dec 18, 2021

Loading thumbnail…

Fork of Making a Bar Chart

This bar chart displays the victory status of chess matches, plotting population values against country names. Built with D3 v5, it uses `scaleLinear` for the x-axis and `scaleBand` for the y-axis, with axes rendered via `axisBottom` and `axisLeft`. The data is loaded from a CSV file using `csv`, with population values multiplied by 1000. The chart features customized axes, including a tick format that abbreviates large numbers, and applies a steelblue fill to the rectangles via CSS.

Dec 13, 2021

Loading thumbnail…

Fork of xxx

This bar chart shows the total number of turns grouped by victory status, using a horizontal layout with a linear x-scale and a band y-scale. Population data from the 2018 United Nations World Population Prospects is loaded via `d3.csv`, with values converted to thousands. The visualization customizes D3 axes using `axisBottom` and `axisLeft`, removes default domain lines, and formats tick labels with `d3.format`. SVG rendering is applied through D3 v5 selections, with margins and a title added programmatically.

Dec 13, 2021

Loading thumbnail…

xxx

This bar chart displays the number of turns taken in chess games, broken down by victory status (mate, resign, draw, or out of time), using data loaded from a CSV file. The visualization uses d3.scaleLinear and d3.scaleBand to map turns and statuses, with d3.axisBottom and d3.axisLeft for labeled axes. Titles and axis labels are added as SVG text elements, and the bars are styled with a steelblue fill. The chart’s x-axis tick format converts large numbers into abbreviated notation using d3.format.

Dec 13, 2021