D3 Example

100%

✓ Published0🌍 Public

Last edited Nov 20, 2015

Created on Nov 20, 2015

A bar chart displays the populations of major world religions, with each bar colored by its corresponding religion using the `d3.scale.category10` ordinal color scale. The visualization loads data from `religionWorldTotals.csv` via `d3.csv`, and renders axes with `d3.svg.axis`, applying a custom SI format to abbreviate large numbers. Bars are sized with `d3.scale.ordinal` and `d3.scale.linear` for positioning and height, while the y-axis uses a rotated tick label style from the `Open Sans` font. The code is authored by Curran and uses D3 version 3.5.5, drawing everything as SVG elements.

AI-generated description

Adding color to a bar chart using d3.scale.category10.

This is example 10 from the screencast Splitting Charts.

MIT License

<div align="center"><a href="http://www.simplehitcounter.com" target="_blank"><img src="http://simplehitcounter.com/hit.php?uid=1979118&f=16777215&b=0" border="0" height="18" width="83" alt="web counter"></a></div>

Similar vizzes

Loading thumbnail…

D3 Example

A bar chart displays global religious populations, ranked by size, with tilted x-axis labels for readability. The visualization uses D3.js (v3) to bind CSV data, scale bars with `d3.scale.ordinal` and `d3.scale.linear`, and render axes via `d3.svg.axis`. Tick labels rotate by -16 degrees, and y-axis values use a custom SI formatter (e.g., "B" for billions). The chart’s SVG is built with margin conventions, while the x-axis text styling applies the Open Sans font.

CCurran Kelleher

92% match

Loading thumbnail…

D3 Example

This example shows a single stacked bar chart that breaks down the world’s total population by religious affiliation, using one bar per region (here, a single “World” region) with each segment colored by religion. The visualization uses the D3.js library’s `d3.layout.stack` to compute the stacking of values, while `d3.scale.ordinal` and `d3.scale.linear` map categorical regions and numeric populations to screen positions. Axes are rendered with `d3.svg.axis`, and a color legend is added via `d3.legend.color`. Data comes from the bundled CSV file `religionWorldTotals.csv`, which lists population counts for each religion, and the chart is drawn in SVG.

CCurran Kelleher

91% match

Loading thumbnail…

D3 Example

A horizontal bar chart displays the 2010 populations of major world religions, from Christians at over two billion to Jews at under fourteen million. The visualization encodes data from the Pew-Templeton Global Religious Futures Project using an SVG rendered with D3.js, where bar lengths reflect population and a tooltip reveals exact figures. The code employs d3.scale.linear, d3.scale.ordinal, and d3.svg.axis, with a custom SI format replacing "G" with "B" for billion. The Playfair Display font and d3-tip library support styling and interactive hover effects, while the data is loaded from a local CSV file.

CCurran Kelleher

88% match

Loading thumbnail…

D3 Example

This example visualizes the population sizes of world religions using colored circles positioned along a horizontal axis. It shows the data as an array of circles, with each circle’s area encoding the population value and its color representing the religion category. The visualization is rendered as an SVG using D3.js (version 3.5.5), with an ordinal x-scale for categorical spacing, a square-root scale for radius, and a categorical color scale. The x-axis is rotated slightly, and data is loaded from a CSV file (`religionWorldTotals.csv`) using `d3.csv`.

CCurran Kelleher

88% match

Loading thumbnail…

D3 Example

This example presents grouped bar charts comparing religious affiliations across the five most populous countries, using population data loaded from a CSV via `d3.csv`. The code leverages `d3.nest` to structure data by religion and `d3.layout.stack` to layer the groups, while `d3.scale.ordinal` and `d3.scale.linear` map countries and population counts to SVG rectangles. A color legend is rendered with `d3.legend`, and axes are customized using `d3.svg.axis`. The visualization highlights stacked-to-grouped bar transitions, with styling via Open Sans fonts and D3 version 3.5.5.

AAsadeviB

88% match

Loading thumbnail…

D3 Example

This radial bar chart displays world religious populations using curved slices that extend outward from a central point. Each slice's length corresponds to population size, with values read along a shared horizontal axis, while colors distinguish religious groups. The code uses D3.js with `d3.layout.pie`, `d3.svg.arc`, and `d3.scale.ordinal` for positioning, and loads data from a CSV file. A color legend and bottom axis are rendered in SVG. The author notes that this technique distorts area-per-value perception, making it potentially misleading.

CCurran Kelleher

87% match

Loading thumbnail…

D3 Example

This example shows a bar chart comparing the population of five religions, using SVG rendering within a React framework. The bars are filled with distinct texture patterns—hexagons, crosses, caps, woven, and waves—generated by the textures library, with each religion assigned a unique pattern via an ordinal color scale. The code uses D3 v3 APIs including `d3.scale.ordinal`, `d3.svg.axis`, and `d3.csv` to load and visualize the `religionWorldTotals.csv` data, with axes formatted using a custom SI tick formatter that converts "G" to "B" for billions.

Zzoniyac

87% match

Loading thumbnail…

D3 Example

This example displays grouped bar charts comparing the populations of five countries across eight religious categories. The visualization uses a stacked-to-grouped layout, with each religion represented by a distinct color from a categorical scale. The code loads data from a CSV file and leverages D3.js (version 3.5.5) with d3.nest, d3.layout.stack, d3.svg.axis, and d3.legend to render the SVG chart. Axes and legends are styled with the Open Sans font.

JJan0RodGar

87% match