I occasionally find myself needing to create population pyramids as a result of my work. All I've been able to find in the past has been hacks of Google Charts or Plotly or other popular charting libraries. I even tried creating some of these myself for chart.js! I got sick of trying to hack my way through someone else's work and decided to make my own javascript charting tool from 'scratch' using D3.
And that's how D3-Population-Pyramid was born!
To use it, you'll need only popPyramid.min.js and D3 for your own implementation. The easiest use is to include this in your header:
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="popPyramid.min.js"></script>
And include something like this in your body:
<script>
// data must be in a format with age, male, and female in each object
var exampleData = [{ age: '0-9', male: 10, female: 12 }, { age: '10-19',
male: 14, female: 15 }, { age: '20-29', male: 15, female: 18 },
{ age: '30-39', male: 18, female: 18 }, { age: '40-49', male: 21, female: 22 },
{age: '50-59', male: 19, female: 24 }, { age: '60-69', male: 15, female: 14 },
{age: '70-79', male: 8, female: 10 }, { age: '80-89', male: 4, female: 5 },
{age: '90+', male: 2, female: 3 }];
var options = {
height: 400,
width: 600,
style: {
leftBarColor: "#229922",
rightBarColor: "#992222"
}
}
pyramidBuilder(exampleData, '#pyramid', options);
</script>
| Name | Type | Default | Optional | Notes |
|---|---|---|---|---|
| data | JSON | N/A | N | Needs age, male, and female properties. Example: [{ age: '0-50', male: 4500, female: 4500 }, { age: '51-99+',male: 5000, female: 5000 }] |
| target | string | N/A | N | Uses D3's select() function. Examples: '#pyramid', 'body' |
| options | JSON | see below | N | If you want all defaults, you'll need to go with {} for this var |
| options.height | numeric | 400 | Y | |
| options.width | numeric | 400 | Y | |
| options.style | JSON | see below | Y | Example: {leftBarColor: '#00ffaa', rightBarColor: '#ffaa00', tooltipBG: '#333', tooltipColor: 'white'} |
| options.style.leftBarColor | string (hex) | '#6c9dc6' | Y | Input color will be automatically lightened for :hover css |
| options.style.rightBarColor | string (hex) | '#de5454' | Y | Input color will be automatically lightened for :hover css |
| options.style.tooltipBG | string (hex) | '#fefefe' | Y | Uses CSS background property, so you could use more than just a color value. |
| options.style.tooltipColor | string (hex) | 'black' | Y | Controls CSS color property for tooltip |