Fork of Untitled

100%

Fork of Untitled

✓ Published0🌍 Public

Last edited Apr 3, 2021

Created on Apr 3, 2021

Forked from Untitled

This radial bar chart compares data across Chinese provinces, plotting two series per category as concentric arcs. The green outer bars show “OurData” values, while red inner bars represent “ActualData” for each province, with labels rotated around the circle for readability. Built with D3 v4, it uses `d3.scaleBand` for the angular axis, `d3.scaleRadial` for the radius, and `d3.arc` to generate the SVG paths. The data originates from a local file with province names and paired value/rate fields.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This radial bar chart shows the distribution of values for 100 kilometers, with two series overlaid to compare data from the left and right lanes. The chart uses a circular layout where each segment represents a kilometer, and the two bars for each category are drawn as arcs at different radii. The visualization is built with the d3.js v4 library, using `d3.scaleBand` for the angular axis and `d3.scaleRadial` for the radial values. The chart is rendered as an SVG, loading data from a CSV file.

WW9183907

80% match

Loading thumbnail…

Untitled

This radial bar chart displays the distribution of sea surface temperatures across different climate classes, with each colored band extending outward from a central donut. The chart uses D3.js v6 with SVG rendering and React, loading CSV data from a GitHub gist. The code employs d3.scaleBand for angular positioning and d3.scaleRadial for radius values, while d3.arc constructs the annular bars with padded gaps. Labels are rotated and positioned around the perimeter, with text anchors adjusted to maintain readability. The inner radius is fixed at 90, and the outer radius scales up to the maximum data value of 39,999.

Yyungchiau

78% match

Loading thumbnail…

Fork of Fork of reproduction of somethind 4th cell

This example shows a radial bar chart plotting five data series as concentric circular rings, with each series represented by a wedge extending from the center to a value on a 0–100 scale. The visualization uses D3.js version 7.8.4 to generate an SVG, employing `d3.lineRadial` with `curveLinearClosed` to create the series paths, `d3.scaleLinear` for the radius mapping, and SVG circles as grid levels. Axis labels are positioned using trigonometric calculations based on the angle slice for each series.

Rrwata97

78% match

Loading thumbnail…

Province Data Compare

The visualization compares case numbers across Chinese provinces using a grouped bar chart, with bars representing "OurData" and "ActrualData" from a JSON dataset. It renders SVG bars that animate upward on load, while axes and legend fade in sequentially. Built with D3 v3, it uses ordinal scales for categorical positioning, linear scaling for values, and transitions to animate bar heights and element opacity. Hover interactions darken bar colors, and the chart includes rotated x-axis labels for province names.

LLex

77% match

Loading thumbnail…

Untitled

This radial bar chart displays the values of a single numeric variable for each country in a dataset loaded from a CSV file. Each bar extends outward from a central inner radius, with its length proportional to the country’s value, and labels are rotated around the circle for readability. The visualization uses d3.scaleBand for angular positions, d3.scaleRadial for radial distances, and d3.arc to draw the bar segments as SVG paths. The chart is rendered in an SVG container, with margins and dimensions defined in the script.

AAnissa Belkelfa

77% match

Loading thumbnail…

Fork of Fork of Fork of Fork of bar_char 5 styles

This example renders a horizontal bar chart of UN population data for 10 countries in 2020, colored teal with labeled axes. Built with React components and D3 v5 scales, it uses `scaleBand` for the y-axis and `scaleLinear` for the x-axis, drawing SVG rectangles per country. The code formats tick labels using D3’s `format` function, abbreviates values (e.g., “1.2B”), and supports tooltips via SVG `<title>` elements. Data is loaded asynchronously with D3’s `csv` utility.

TTanupat B.

76% match

Loading thumbnail…

Fork of data visulization

This bar chart displays the populations of 335 country codes, where each bar's length corresponds to the population value. The visualization uses D3.js v6 within a React framework to render the data as SVG. The code loads data from a CSV file, scales the population values (multiplied by 1000), and uses `scaleLinear` for the x-axis and `scaleBand` for the y-axis. Axis labels are generated using `axisLeft` and `axisBottom`, while the bars themselves are appended as SVG rectangles.

HHarsh Patel

76% match

Loading thumbnail…

Fork of Radial pie - Player statistics

This example shows a radial pie chart of US state population data across age groups. The chart uses a circular layout with stacked bars for each state, and labels for state abbreviations positioned around the outer ring. The code leverages `d3.scaleBand` for angular positioning, `d3.scaleRadial` from the `d3-scale-radial` library for radii, and `d3.stack` for the stacked segments. SVG paths are drawn using `d3.arc`, with color encoding via `d3.scaleOrdinal` and a legend for age categories.

TTracey

75% match