Last active
June 10, 2023 14:33
-
-
Save ronakrrb/73e9204a66e2a9c1fee8 to your computer and use it in GitHub Desktop.
Pyramid Chart Layout built in d3.js
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
| region | population | |
|---|---|---|
| Africa | 1110635000 | |
| Americas | 972005000 | |
| Asia | 4298723000 | |
| Europe | 742452000 | |
| Ocenia | 38304000 |
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
| <html> | |
| <head> | |
| <style> | |
| body { | |
| font: 10px sans-serif; | |
| } | |
| .arc path { | |
| stroke: #fff; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="https://s3-ap-southeast-1.amazonaws.com/charts.pykih.com/gists/pyramid.js"></script> | |
| <script> | |
| var width = 700, | |
| height = 450, | |
| radius = Math.min(width, height) / 2; | |
| var color = d3.scale.ordinal() | |
| .range(["#255aee","#3a6fff","#4f84ff","rgb(101,154,302)","rgb(122,175,323)", "rgb(144,197,345)", "rgb(165,218,366)"]); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height) | |
| .append("g") | |
| d3.csv("data.csv", function(error, data) { | |
| var pyramid = d3.pyramid() | |
| .size([width,height]) | |
| .value(function(d) { return d.population; }); | |
| var line = d3.svg.line() | |
| .interpolate('linear-closed') | |
| .x(function(d,i) { return d.x; }) | |
| .y(function(d,i) { return d.y; }); | |
| var g = svg.selectAll(".pyramid-group") | |
| .data(pyramid(data)) | |
| .enter().append("g") | |
| .attr("class", "pyramid-group"); | |
| g.append("path") | |
| .attr("d", function (d){ return line(d.coordinates); }) | |
| .style("fill", function(d) { return color(d.region); }); | |
| g.append("text") | |
| .attr({ | |
| "y": function (d,i) { | |
| if(d.coordinates.length === 4) { | |
| return (((d.coordinates[0].y-d.coordinates[1].y)/2)+d.coordinates[1].y) + 5; | |
| } else { | |
| return (d.coordinates[0].y + d.coordinates[1].y)/2 + 10; | |
| } | |
| }, | |
| "x": function (d,i) { return width/2;} | |
| }) | |
| .style("text-anchor", "middle") | |
| .text(function(d) { return d.region; }); | |
| d3.select("body").append("table") | |
| .attr({ | |
| "id" : "footer", | |
| "width": width + "px" | |
| }) | |
| d3.select("body #footer").append("tr") | |
| .attr({ | |
| "class" : "PykCharts-credits", | |
| "id" : "credit-datasource" | |
| }) | |
| .append("td") | |
| .style("text-align","left") | |
| .html("<span style='pointer-events:none;'>Credits: </span><a href='http://pykcharts.com' target='_blank'>"+ "Pykcharts" +"</a>"); | |
| }); | |
| </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
| Maslow's hierarchy of needs is often portrayed in the shape of a pyramid with the largest, | |
| most fundamental levels of needs at the bottom and the need for self-actualization at the top. | |
| While the pyramid has become the de facto way to represent the hierarchy, Maslow himself | |
| never used a pyramid to describe these levels in any of his writings on the subject. | |
| Reference: http://en.wikipedia.org/wiki/Maslow%27s_hierarchy_of_needs |
Hello
your pyramid.js script very useful.
can i ask something?
how can i do upside down pyramid?
Hi Rona
Can u please guide me to do upside down this same pyramid?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi
it is possible to use this code? I need a license