This example shows how to make colored circles whose area represents a quantity. This is example 23 from the screencast Splitting Charts.
MIT License
Last active
November 20, 2015 21:19
-
-
Save curran/36933d70fa4e43027910 to your computer and use it in GitHub Desktop.
Colored Circle Area Chart
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>D3 Example</title> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
| <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> | |
| <style> | |
| .axis text { | |
| font-family: 'Open Sans', sans-serif; | |
| font-size: 22pt; | |
| } | |
| .axis .label { | |
| font-size: 20pt; | |
| } | |
| .axis path, .axis line { | |
| fill: none; | |
| stroke: #000; | |
| shape-rendering: crispEdges; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script> | |
| var outerWidth = 960; | |
| var outerHeight = 500; | |
| var margin = { left: 100, top: 179, right: 100, bottom: 205 }; | |
| var barPadding = 0.2; | |
| var xColumn = "religion"; | |
| var radiusColumn = "population"; | |
| var radiusMax = 54; | |
| var colorColumn = "religion"; | |
| var innerWidth = outerWidth - margin.left - margin.right; | |
| var innerHeight = outerHeight - margin.top - margin.bottom; | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", outerWidth) | |
| .attr("height", outerHeight); | |
| var g = svg.append("g") | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| var xAxisG = g.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(0," + innerHeight + ")"); | |
| var xScale = d3.scale.ordinal().rangePoints([0, innerWidth], barPadding); | |
| var radiusScale = d3.scale.sqrt().range([0, radiusMax]); | |
| var colorScale = d3.scale.category10(); | |
| var xAxis = d3.svg.axis().scale(xScale).orient("bottom") | |
| .outerTickSize(0); | |
| function render(data){ | |
| xScale.domain( data.map( function (d){ return d[xColumn]; })); | |
| radiusScale.domain([0, d3.max(data, function (d){ return d[radiusColumn]; })]); | |
| colorScale.domain(data.map(function (d){ return d[colorColumn]; })); | |
| xAxisG | |
| .call(xAxis) | |
| .selectAll("text") | |
| .attr("dx", "-0.37632em") | |
| .attr("dy", "1.257728em") | |
| .attr("transform", "rotate(-16)" ); | |
| var circles = g.selectAll("circle").data(data); | |
| circles.enter().append("circle") | |
| .attr("width", xScale.rangeBand()); | |
| circles | |
| .attr("cx", function (d){ return xScale(d[xColumn]); }) | |
| .attr("cy", innerHeight / 2) | |
| .attr("r", function (d){ return radiusScale(d[radiusColumn]); }) | |
| .attr("fill", function (d){ return colorScale(d[colorColumn]); }); | |
| circles.exit().remove(); | |
| } | |
| function type(d){ | |
| d.population = +d.population; | |
| return d; | |
| } | |
| d3.csv("religionWorldTotals.csv", type, render); | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| religion | population | |
|---|---|---|
| Christian | 2173100000 | |
| Muslim | 1598360000 | |
| Unaffiliated | 1126280000 | |
| Hindu | 1032860000 | |
| Buddhist | 487320000 | |
| Folk Religions | 404890000 | |
| Other Religions | 57770000 | |
| Jewish | 13640000 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment