WangJiaCheng1999

@WangJiaCheng1999·9 public vizzes

Fork of Making an Interactive Pie Chart

This interactive donut chart displays the proportion of income from Sales, Dividends, and Interest, with each slice labeled by category and showing a percentage on hover. Built with D3 v5, it uses `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate SVG paths, while tooltips are implemented via mouse events and a styled HTML div. The chart reads its data from a CSV file, computing percentages from the parsed values, and features rounded slice corners and a responsive hover opacity effect.

Jun 5, 2021

Loading thumbnail…

Fork of Fork of Fork of Customizing Axes

This bar chart displays the populations of the world’s ten most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The visualization uses D3 v5 with SVG rendering, building on a tutorial by Curran Kelleher. It demonstrates customizing axes by applying a `scaleBand` for country labels and a `scaleLinear` for population values, using `axisBottom` and `axisLeft` with custom tick formatting that abbreviates numbers (e.g., converting “G” to “B” for billions). The chart also removes default grid lines and adds styled axis labels and titles via CSS.

Jun 1, 2021

Loading thumbnail…

Fork of Making a Bar Chart

This horizontal bar chart displays the populations of the ten most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The visualization uses D3 v5 with an SVG rendering approach, employing `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the categorical y-axis, and `d3.axisLeft` and `d3.axisBottom` for tick marks. Data is loaded from a CSV file via `d3.csv`, with population values converted to numbers and scaled by 1,000.

May 31, 2021

Loading thumbnail…

Fork of Feministischer Kampftag II

A grouped horizontal bar chart is split into categories, comparing the percentage of women who agree versus disagree with statements about their work situation during the COVID-19 pandemic. The chart uses D3 v6 scales (`scaleBand`, `scaleLinear`) within a React framework to render SVG rectangles. Hovering a bar triggers a Tippy.js tooltip with the exact percentage. Data comes from a CSV file sourced from a SPÖ Frauen survey.

May 29, 2021

Loading thumbnail…

Fork of Stylized Bar Chart

This bar chart displays the top 10 most populous countries for 2020, with population values formatted in billions and a teal color scheme. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, rendering bars as SVG rectangles. Data comes from the United Nations World Population Prospects 2019, loaded via `d3.csv` and filtered to the first ten rows. Axes are generated with custom React components, and tooltips are provided through SVG `<title>` elements.

May 29, 2021

Loading thumbnail…

Fork of Read from Excel

A horizontal bar chart displays the population of the top 10 most populous countries using 2018 UN estimates, with each bar colored by a value from the CSV file. The visualization uses d3.csv to load data, d3.scaleLinear and d3.scaleBand for positioning, and d3.axisBottom with a tick formatter that abbreviates large numbers to billions. Axes are rendered as SVG, with gridlines from tickSize, and the chart includes a title and axis label.

May 28, 2021

Loading thumbnail…

Fork of Stylized Bar Chart

A horizontal bar chart ranks the top 10 most populous countries from the UN World Population Prospects 2019 dataset, with population values formatted in billions. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis and `scaleLinear` for the population x-axis, rendering SVG `<rect>` marks with native `<title>` tooltips. Axis components map ticks using D3’s scale methods, and the chart is styled with Poppins font and a teal color scheme.

May 27, 2021

Loading thumbnail…

Fork of Fork of Stylized Bar Chart

A bar chart displays the top 10 most populous countries for 2020, sourced from the United Nations World Population Prospects 2019, with population values on the x-axis and country names on the y-axis. The visualization uses React and D3 v5, employing `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and SVG `<rect>` elements for bars. Custom-built `AxisBottom` and `AxisLeft` components render ticks, while D3's `format` converts numbers with SI prefixes, replacing 'G' with 'B' for billions.

May 27, 2021

Loading thumbnail…

Fork of Stylized Bar Chart

A horizontal bar chart displays the top 10 most populous countries using United Nations World Population Prospects 2019 data. The visualization uses React with d3-scale’s `scaleBand` and `scaleLinear` for layout, and d3-format to abbreviate population values in billions. SVG rectangles represent each country, with axes rendered by custom React components. The code loads data via d3’s `csv` parser and applies a custom loading state before rendering.

May 27, 2021