Skip to content

Instantly share code, notes, and snippets.

@alexstatmath

alexstatmath/d3pyramid

Created February 18, 2013 21:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save alexstatmath/4980933 to your computer and use it in GitHub Desktop.
Save alexstatmath/4980933 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
d3pyramid
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<script src="http://d3js.org/d3.v2.js"></script>
<!--[if lte IE 8]><script src="r2d3.v2.js"></script><![endif]-->
</head>
<body><div id="pyramidDiagram"></div></body>
<script>
// Global variables and functions
var colorLeftBars = "#1F5391";
var colorRightbars = "#00AEEF";
var colorSecondLeftBars = "#999";
var colorSecondRightbars = "#999";
var svgWidth = 890;
var svgHeight = 500;
var width = 250;
var height = 450;
var margin = {top: 0, right: 0, bottom: 5, left: 0};
var data = [{"year":2012,"age":0,"sex":1,"people":790.0},{"year":2012,"age":1,"sex":1,"people":729.0},{"year":2012,"age":2,"sex":1,"people":764.0},{"year":2012,"age":3,"sex":1,"people":760.0},{"year":2012,"age":4,"sex":1,"people":812.0},{"year":2012,"age":5,"sex":1,"people":803.0},{"year":2012,"age":6,"sex":1,"people":897.0},{"year":2012,"age":7,"sex":1,"people":869.0},{"year":2012,"age":8,"sex":1,"people":885.0},{"year":2012,"age":9,"sex":1,"people":977.0},{"year":2012,"age":10,"sex":1,"people":899.0},{"year":2012,"age":11,"sex":1,"people":938.0},{"year":2012,"age":12,"sex":1,"people":977.0},{"year":2012,"age":13,"sex":1,"people":994.0},{"year":2012,"age":14,"sex":1,"people":1020.0},{"year":2012,"age":15,"sex":1,"people":1025.0},{"year":2012,"age":16,"sex":1,"people":987.0},{"year":2012,"age":17,"sex":1,"people":1142.0},{"year":2012,"age":18,"sex":1,"people":1131.0},{"year":2012,"age":19,"sex":1,"people":1150.0},{"year":2012,"age":20,"sex":1,"people":1229.0},{"year":2012,"age":21,"sex":1,"people":1140.0},{"year":2012,"age":22,"sex":1,"people":1193.0},{"year":2012,"age":23,"sex":1,"people":1126.0},{"year":2012,"age":24,"sex":1,"people":1116.0},{"year":2012,"age":25,"sex":1,"people":1010.0},{"year":2012,"age":26,"sex":1,"people":1097.0},{"year":2012,"age":27,"sex":1,"people":1059.0},{"year":2012,"age":28,"sex":1,"people":1108.0},{"year":2012,"age":29,"sex":1,"people":1104.0},{"year":2012,"age":30,"sex":1,"people":1071.0},{"year":2012,"age":31,"sex":1,"people":1048.0},{"year":2012,"age":32,"sex":1,"people":962.0},{"year":2012,"age":33,"sex":1,"people":998.0},{"year":2012,"age":34,"sex":1,"people":1016.0},{"year":2012,"age":35,"sex":1,"people":944.0},{"year":2012,"age":36,"sex":1,"people":977.0},{"year":2012,"age":37,"sex":1,"people":1021.0},{"year":2012,"age":38,"sex":1,"people":1122.0},{"year":2012,"age":39,"sex":1,"people":1213.0},{"year":2012,"age":40,"sex":1,"people":1333.0},{"year":2012,"age":41,"sex":1,"people":1451.0},{"year":2012,"age":42,"sex":1,"people":1460.0},{"year":2012,"age":43,"sex":1,"people":1539.0},{"year":2012,"age":44,"sex":1,"people":1453.0},{"year":2012,"age":45,"sex":1,"people":1568.0},{"year":2012,"age":46,"sex":1,"people":1605.0},{"year":2012,"age":47,"sex":1,"people":1552.0},{"year":2012,"age":48,"sex":1,"people":1527.0},{"year":2012,"age":49,"sex":1,"people":1464.0},{"year":2012,"age":50,"sex":1,"people":1415.0},{"year":2012,"age":51,"sex":1,"people":1442.0},{"year":2012,"age":52,"sex":1,"people":1320.0},{"year":2012,"age":53,"sex":1,"people":1388.0},{"year":2012,"age":54,"sex":1,"people":1285.0},{"year":2012,"age":55,"sex":1,"people":1326.0},{"year":2012,"age":56,"sex":1,"people":1336.0},{"year":2012,"age":57,"sex":1,"people":1105.0},{"year":2012,"age":58,"sex":1,"people":1239.0},{"year":2012,"age":59,"sex":1,"people":1099.0},{"year":2012,"age":60,"sex":1,"people":1216.0},{"year":2012,"age":61,"sex":1,"people":1141.0},{"year":2012,"age":62,"sex":1,"people":1017.0},{"year":2012,"age":63,"sex":1,"people":980.0},{"year":2012,"age":64,"sex":1,"people":855.0},{"year":2012,"age":65,"sex":1,"people":735.0},{"year":2012,"age":66,"sex":1,"people":1058.0},{"year":2012,"age":67,"sex":1,"people":1042.0},{"year":2012,"age":68,"sex":1,"people":1029.0},{"year":2012,"age":69,"sex":1,"people":1169.0},{"year":2012,"age":70,"sex":1,"people":1166.0},{"year":2012,"age":71,"sex":1,"people":1121.0},{"year":2012,"age":72,"sex":1,"people":1073.0},{"year":2012,"age":73,"sex":1,"people":1083.0},{"year":2012,"age":74,"sex":1,"people":1022.0},{"year":2012,"age":75,"sex":1,"people":891.0},{"year":2012,"age":76,"sex":1,"people":812.0},{"year":2012,"age":77,"sex":1,"people":621.0},{"year":2012,"age":78,"sex":1,"people":608.0},{"year":2012,"age":79,"sex":1,"people":561.0},{"year":2012,"age":80,"sex":1,"people":599.0},{"year":2012,"age":81,"sex":1,"people":551.0},{"year":2012,"age":82,"sex":1,"people":515.0},{"year":2012,"age":83,"sex":1,"people":374.0},{"year":2012,"age":84,"sex":1,"people":328.0},{"year":2012,"age":85,"sex":1,"people":249.0},{"year":2012,"age":86,"sex":1,"people":231.0},{"year":2012,"age":87,"sex":1,"people":185.0},{"year":2012,"age":88,"sex":1,"people":153.0},{"year":2012,"age":89,"sex":1,"people":100.0},{"year":2012,"age":90,"sex":1,"people":52.0},{"year":2012,"age":91,"sex":1,"people":39.0},{"year":2012,"age":92,"sex":1,"people":32.0},{"year":2012,"age":93,"sex":1,"people":32.0},{"year":2012,"age":94,"sex":1,"people":29.0},{"year":2012,"age":95,"sex":1,"people":19.0},{"year":2012,"age":96,"sex":1,"people":13.0},{"year":2012,"age":97,"sex":1,"people":6.0},{"year":2012,"age":98,"sex":1,"people":3.0},{"year":2012,"age":99,"sex":1,"people":0.0},{"year":2012,"age":0,"sex":2,"people":722.0},{"year":2012,"age":1,"sex":2,"people":733.0},{"year":2012,"age":2,"sex":2,"people":763.0},{"year":2012,"age":3,"sex":2,"people":739.0},{"year":2012,"age":4,"sex":2,"people":722.0},{"year":2012,"age":5,"sex":2,"people":733.0},{"year":2012,"age":6,"sex":2,"people":772.0},{"year":2012,"age":7,"sex":2,"people":888.0},{"year":2012,"age":8,"sex":2,"people":845.0},{"year":2012,"age":9,"sex":2,"people":861.0},{"year":2012,"age":10,"sex":2,"people":928.0},{"year":2012,"age":11,"sex":2,"people":864.0},{"year":2012,"age":12,"sex":2,"people":970.0},{"year":2012,"age":13,"sex":2,"people":1030.0},{"year":2012,"age":14,"sex":2,"people":1009.0},{"year":2012,"age":15,"sex":2,"people":943.0},{"year":2012,"age":16,"sex":2,"people":1034.0},{"year":2012,"age":17,"sex":2,"people":1069.0},{"year":2012,"age":18,"sex":2,"people":1159.0},{"year":2012,"age":19,"sex":2,"people":1161.0},{"year":2012,"age":20,"sex":2,"people":1220.0},{"year":2012,"age":21,"sex":2,"people":1112.0},{"year":2012,"age":22,"sex":2,"people":1171.0},{"year":2012,"age":23,"sex":2,"people":1066.0},{"year":2012,"age":24,"sex":2,"people":1058.0},{"year":2012,"age":25,"sex":2,"people":975.0},{"year":2012,"age":26,"sex":2,"people":1077.0},{"year":2012,"age":27,"sex":2,"people":1018.0},{"year":2012,"age":28,"sex":2,"people":1086.0},{"year":2012,"age":29,"sex":2,"people":961.0},{"year":2012,"age":30,"sex":2,"people":1065.0},{"year":2012,"age":31,"sex":2,"people":1013.0},{"year":2012,"age":32,"sex":2,"people":954.0},{"year":2012,"age":33,"sex":2,"people":967.0},{"year":2012,"age":34,"sex":2,"people":1119.0},{"year":2012,"age":35,"sex":2,"people":913.0},{"year":2012,"age":36,"sex":2,"people":1001.0},{"year":2012,"age":37,"sex":2,"people":1052.0},{"year":2012,"age":38,"sex":2,"people":1143.0},{"year":2012,"age":39,"sex":2,"people":1219.0},{"year":2012,"age":40,"sex":2,"people":1246.0},{"year":2012,"age":41,"sex":2,"people":1378.0},{"year":2012,"age":42,"sex":2,"people":1517.0},{"year":2012,"age":43,"sex":2,"people":1444.0},{"year":2012,"age":44,"sex":2,"people":1473.0},{"year":2012,"age":45,"sex":2,"people":1490.0},{"year":2012,"age":46,"sex":2,"people":1515.0},{"year":2012,"age":47,"sex":2,"people":1471.0},{"year":2012,"age":48,"sex":2,"people":1488.0},{"year":2012,"age":49,"sex":2,"people":1537.0},{"year":2012,"age":50,"sex":2,"people":1484.0},{"year":2012,"age":51,"sex":2,"people":1395.0},{"year":2012,"age":52,"sex":2,"people":1437.0},{"year":2012,"age":53,"sex":2,"people":1368.0},{"year":2012,"age":54,"sex":2,"people":1391.0},{"year":2012,"age":55,"sex":2,"people":1279.0},{"year":2012,"age":56,"sex":2,"people":1359.0},{"year":2012,"age":57,"sex":2,"people":1228.0},{"year":2012,"age":58,"sex":2,"people":1222.0},{"year":2012,"age":59,"sex":2,"people":1214.0},{"year":2012,"age":60,"sex":2,"people":1197.0},{"year":2012,"age":61,"sex":2,"people":1187.0},{"year":2012,"age":62,"sex":2,"people":1179.0},{"year":2012,"age":63,"sex":2,"people":1088.0},{"year":2012,"age":64,"sex":2,"people":928.0},{"year":2012,"age":65,"sex":2,"people":861.0},{"year":2012,"age":66,"sex":2,"people":1168.0},{"year":2012,"age":67,"sex":2,"people":1087.0},{"year":2012,"age":68,"sex":2,"people":1129.0},{"year":2012,"age":69,"sex":2,"people":1440.0},{"year":2012,"age":70,"sex":2,"people":1431.0},{"year":2012,"age":71,"sex":2,"people":1323.0},{"year":2012,"age":72,"sex":2,"people":1367.0},{"year":2012,"age":73,"sex":2,"people":1314.0},{"year":2012,"age":74,"sex":2,"people":1276.0},{"year":2012,"age":75,"sex":2,"people":1157.0},{"year":2012,"age":76,"sex":2,"people":1146.0},{"year":2012,"age":77,"sex":2,"people":840.0},{"year":2012,"age":78,"sex":2,"people":852.0},{"year":2012,"age":79,"sex":2,"people":838.0},{"year":2012,"age":80,"sex":2,"people":963.0},{"year":2012,"age":81,"sex":2,"people":875.0},{"year":2012,"age":82,"sex":2,"people":826.0},{"year":2012,"age":83,"sex":2,"people":688.0},{"year":2012,"age":84,"sex":2,"people":765.0},{"year":2012,"age":85,"sex":2,"people":633.0},{"year":2012,"age":86,"sex":2,"people":578.0},{"year":2012,"age":87,"sex":2,"people":490.0},{"year":2012,"age":88,"sex":2,"people":451.0},{"year":2012,"age":89,"sex":2,"people":294.0},{"year":2012,"age":90,"sex":2,"people":161.0},{"year":2012,"age":91,"sex":2,"people":122.0},{"year":2012,"age":92,"sex":2,"people":107.0},{"year":2012,"age":93,"sex":2,"people":101.0},{"year":2012,"age":94,"sex":2,"people":98.0},{"year":2012,"age":95,"sex":2,"people":77.0},{"year":2012,"age":96,"sex":2,"people":54.0},{"year":2012,"age":97,"sex":2,"people":36.0},{"year":2012,"age":98,"sex":2,"people":24.0},{"year":2012,"age":99,"sex":2,"people":0.0}];
var dataSecond = [{"year":2012,"age":0,"sex":1,"people":940.0},{"year":2012,"age":1,"sex":1,"people":879.0},{"year":2012,"age":2,"sex":1,"people":914.0},{"year":2012,"age":3,"sex":1,"people":910.0},{"year":2012,"age":4,"sex":1,"people":962.0},{"year":2012,"age":5,"sex":1,"people":953.0},{"year":2012,"age":6,"sex":1,"people":1047.0},{"year":2012,"age":7,"sex":1,"people":1019.0},{"year":2012,"age":8,"sex":1,"people":1035.0},{"year":2012,"age":9,"sex":1,"people":1127.0},{"year":2012,"age":10,"sex":1,"people":1049.0},{"year":2012,"age":11,"sex":1,"people":1088.0},{"year":2012,"age":12,"sex":1,"people":1127.0},{"year":2012,"age":13,"sex":1,"people":1144.0},{"year":2012,"age":14,"sex":1,"people":1170.0},{"year":2012,"age":15,"sex":1,"people":1175.0},{"year":2012,"age":16,"sex":1,"people":1137.0},{"year":2012,"age":17,"sex":1,"people":1292.0},{"year":2012,"age":18,"sex":1,"people":1281.0},{"year":2012,"age":19,"sex":1,"people":1300.0},{"year":2012,"age":20,"sex":1,"people":1379.0},{"year":2012,"age":21,"sex":1,"people":1290.0},{"year":2012,"age":22,"sex":1,"people":1343.0},{"year":2012,"age":23,"sex":1,"people":1276.0},{"year":2012,"age":24,"sex":1,"people":1266.0},{"year":2012,"age":25,"sex":1,"people":1160.0},{"year":2012,"age":26,"sex":1,"people":1247.0},{"year":2012,"age":27,"sex":1,"people":1209.0},{"year":2012,"age":28,"sex":1,"people":1258.0},{"year":2012,"age":29,"sex":1,"people":1254.0},{"year":2012,"age":30,"sex":1,"people":1221.0},{"year":2012,"age":31,"sex":1,"people":1198.0},{"year":2012,"age":32,"sex":1,"people":1112.0},{"year":2012,"age":33,"sex":1,"people":1148.0},{"year":2012,"age":34,"sex":1,"people":1166.0},{"year":2012,"age":35,"sex":1,"people":1094.0},{"year":2012,"age":36,"sex":1,"people":1127.0},{"year":2012,"age":37,"sex":1,"people":1171.0},{"year":2012,"age":38,"sex":1,"people":1272.0},{"year":2012,"age":39,"sex":1,"people":1363.0},{"year":2012,"age":40,"sex":1,"people":1483.0},{"year":2012,"age":41,"sex":1,"people":1601.0},{"year":2012,"age":42,"sex":1,"people":1610.0},{"year":2012,"age":43,"sex":1,"people":1689.0},{"year":2012,"age":44,"sex":1,"people":1603.0},{"year":2012,"age":45,"sex":1,"people":1718.0},{"year":2012,"age":46,"sex":1,"people":1755.0},{"year":2012,"age":47,"sex":1,"people":1702.0},{"year":2012,"age":48,"sex":1,"people":1677.0},{"year":2012,"age":49,"sex":1,"people":1614.0},{"year":2012,"age":50,"sex":1,"people":1565.0},{"year":2012,"age":51,"sex":1,"people":1592.0},{"year":2012,"age":52,"sex":1,"people":1470.0},{"year":2012,"age":53,"sex":1,"people":1538.0},{"year":2012,"age":54,"sex":1,"people":1435.0},{"year":2012,"age":55,"sex":1,"people":1476.0},{"year":2012,"age":56,"sex":1,"people":1486.0},{"year":2012,"age":57,"sex":1,"people":1255.0},{"year":2012,"age":58,"sex":1,"people":1389.0},{"year":2012,"age":59,"sex":1,"people":1249.0},{"year":2012,"age":60,"sex":1,"people":1366.0},{"year":2012,"age":61,"sex":1,"people":1291.0},{"year":2012,"age":62,"sex":1,"people":1167.0},{"year":2012,"age":63,"sex":1,"people":1130.0},{"year":2012,"age":64,"sex":1,"people":1005.0},{"year":2012,"age":65,"sex":1,"people":885.0},{"year":2012,"age":66,"sex":1,"people":1208.0},{"year":2012,"age":67,"sex":1,"people":1192.0},{"year":2012,"age":68,"sex":1,"people":1179.0},{"year":2012,"age":69,"sex":1,"people":1319.0},{"year":2012,"age":70,"sex":1,"people":1316.0},{"year":2012,"age":71,"sex":1,"people":1271.0},{"year":2012,"age":72,"sex":1,"people":1223.0},{"year":2012,"age":73,"sex":1,"people":1233.0},{"year":2012,"age":74,"sex":1,"people":1172.0},{"year":2012,"age":75,"sex":1,"people":1041.0},{"year":2012,"age":76,"sex":1,"people":962.0},{"year":2012,"age":77,"sex":1,"people":771.0},{"year":2012,"age":78,"sex":1,"people":758.0},{"year":2012,"age":79,"sex":1,"people":711.0},{"year":2012,"age":80,"sex":1,"people":749.0},{"year":2012,"age":81,"sex":1,"people":701.0},{"year":2012,"age":82,"sex":1,"people":665.0},{"year":2012,"age":83,"sex":1,"people":524.0},{"year":2012,"age":84,"sex":1,"people":478.0},{"year":2012,"age":85,"sex":1,"people":399.0},{"year":2012,"age":86,"sex":1,"people":381.0},{"year":2012,"age":87,"sex":1,"people":335.0},{"year":2012,"age":88,"sex":1,"people":303.0},{"year":2012,"age":89,"sex":1,"people":250.0},{"year":2012,"age":90,"sex":1,"people":202.0},{"year":2012,"age":91,"sex":1,"people":189.0},{"year":2012,"age":92,"sex":1,"people":182.0},{"year":2012,"age":93,"sex":1,"people":182.0},{"year":2012,"age":94,"sex":1,"people":179.0},{"year":2012,"age":95,"sex":1,"people":169.0},{"year":2012,"age":96,"sex":1,"people":163.0},{"year":2012,"age":97,"sex":1,"people":156.0},{"year":2012,"age":98,"sex":1,"people":153.0},{"year":2012,"age":99,"sex":1,"people":150.0},{"year":2012,"age":0,"sex":2,"people":872.0},{"year":2012,"age":1,"sex":2,"people":883.0},{"year":2012,"age":2,"sex":2,"people":913.0},{"year":2012,"age":3,"sex":2,"people":889.0},{"year":2012,"age":4,"sex":2,"people":872.0},{"year":2012,"age":5,"sex":2,"people":883.0},{"year":2012,"age":6,"sex":2,"people":922.0},{"year":2012,"age":7,"sex":2,"people":1038.0},{"year":2012,"age":8,"sex":2,"people":995.0},{"year":2012,"age":9,"sex":2,"people":1011.0},{"year":2012,"age":10,"sex":2,"people":1078.0},{"year":2012,"age":11,"sex":2,"people":1014.0},{"year":2012,"age":12,"sex":2,"people":1120.0},{"year":2012,"age":13,"sex":2,"people":1180.0},{"year":2012,"age":14,"sex":2,"people":1159.0},{"year":2012,"age":15,"sex":2,"people":1093.0},{"year":2012,"age":16,"sex":2,"people":1184.0},{"year":2012,"age":17,"sex":2,"people":1219.0},{"year":2012,"age":18,"sex":2,"people":1309.0},{"year":2012,"age":19,"sex":2,"people":1311.0},{"year":2012,"age":20,"sex":2,"people":1370.0},{"year":2012,"age":21,"sex":2,"people":1262.0},{"year":2012,"age":22,"sex":2,"people":1321.0},{"year":2012,"age":23,"sex":2,"people":1216.0},{"year":2012,"age":24,"sex":2,"people":1208.0},{"year":2012,"age":25,"sex":2,"people":1125.0},{"year":2012,"age":26,"sex":2,"people":1227.0},{"year":2012,"age":27,"sex":2,"people":1168.0},{"year":2012,"age":28,"sex":2,"people":1236.0},{"year":2012,"age":29,"sex":2,"people":1111.0},{"year":2012,"age":30,"sex":2,"people":1215.0},{"year":2012,"age":31,"sex":2,"people":1163.0},{"year":2012,"age":32,"sex":2,"people":1104.0},{"year":2012,"age":33,"sex":2,"people":1117.0},{"year":2012,"age":34,"sex":2,"people":1269.0},{"year":2012,"age":35,"sex":2,"people":1063.0},{"year":2012,"age":36,"sex":2,"people":1151.0},{"year":2012,"age":37,"sex":2,"people":1202.0},{"year":2012,"age":38,"sex":2,"people":1293.0},{"year":2012,"age":39,"sex":2,"people":1369.0},{"year":2012,"age":40,"sex":2,"people":1396.0},{"year":2012,"age":41,"sex":2,"people":1528.0},{"year":2012,"age":42,"sex":2,"people":1667.0},{"year":2012,"age":43,"sex":2,"people":1594.0},{"year":2012,"age":44,"sex":2,"people":1623.0},{"year":2012,"age":45,"sex":2,"people":1640.0},{"year":2012,"age":46,"sex":2,"people":1665.0},{"year":2012,"age":47,"sex":2,"people":1621.0},{"year":2012,"age":48,"sex":2,"people":1638.0},{"year":2012,"age":49,"sex":2,"people":1687.0},{"year":2012,"age":50,"sex":2,"people":1634.0},{"year":2012,"age":51,"sex":2,"people":1545.0},{"year":2012,"age":52,"sex":2,"people":1587.0},{"year":2012,"age":53,"sex":2,"people":1518.0},{"year":2012,"age":54,"sex":2,"people":1541.0},{"year":2012,"age":55,"sex":2,"people":1429.0},{"year":2012,"age":56,"sex":2,"people":1509.0},{"year":2012,"age":57,"sex":2,"people":1378.0},{"year":2012,"age":58,"sex":2,"people":1372.0},{"year":2012,"age":59,"sex":2,"people":1364.0},{"year":2012,"age":60,"sex":2,"people":1347.0},{"year":2012,"age":61,"sex":2,"people":1337.0},{"year":2012,"age":62,"sex":2,"people":1329.0},{"year":2012,"age":63,"sex":2,"people":1238.0},{"year":2012,"age":64,"sex":2,"people":1078.0},{"year":2012,"age":65,"sex":2,"people":1011.0},{"year":2012,"age":66,"sex":2,"people":1318.0},{"year":2012,"age":67,"sex":2,"people":1237.0},{"year":2012,"age":68,"sex":2,"people":1279.0},{"year":2012,"age":69,"sex":2,"people":1590.0},{"year":2012,"age":70,"sex":2,"people":1581.0},{"year":2012,"age":71,"sex":2,"people":1473.0},{"year":2012,"age":72,"sex":2,"people":1517.0},{"year":2012,"age":73,"sex":2,"people":1464.0},{"year":2012,"age":74,"sex":2,"people":1426.0},{"year":2012,"age":75,"sex":2,"people":1307.0},{"year":2012,"age":76,"sex":2,"people":1296.0},{"year":2012,"age":77,"sex":2,"people":990.0},{"year":2012,"age":78,"sex":2,"people":1002.0},{"year":2012,"age":79,"sex":2,"people":988.0},{"year":2012,"age":80,"sex":2,"people":1113.0},{"year":2012,"age":81,"sex":2,"people":1025.0},{"year":2012,"age":82,"sex":2,"people":976.0},{"year":2012,"age":83,"sex":2,"people":838.0},{"year":2012,"age":84,"sex":2,"people":915.0},{"year":2012,"age":85,"sex":2,"people":783.0},{"year":2012,"age":86,"sex":2,"people":728.0},{"year":2012,"age":87,"sex":2,"people":640.0},{"year":2012,"age":88,"sex":2,"people":601.0},{"year":2012,"age":89,"sex":2,"people":444.0},{"year":2012,"age":90,"sex":2,"people":311.0},{"year":2012,"age":91,"sex":2,"people":272.0},{"year":2012,"age":92,"sex":2,"people":257.0},{"year":2012,"age":93,"sex":2,"people":251.0},{"year":2012,"age":94,"sex":2,"people":248.0},{"year":2012,"age":95,"sex":2,"people":227.0},{"year":2012,"age":96,"sex":2,"people":204.0},{"year":2012,"age":97,"sex":2,"people":186.0},{"year":2012,"age":98,"sex":2,"people":174.0},{"year":2012,"age":99,"sex":2,"people":150.0}];
var yearBegin = 2012;
var ytitle = "Age";
var labelrightbars = "female";
var labelleftbars = "male";
// the pyramid
var maxp = 0,
maxpFirst = data.reduce(function(a,b) { return Math.max(a,b.people); }, 0);
if (dataSecond) {
var maxpSecond = dataSecond.reduce(function(a,b) { return Math.max(a,b.people); }, 0);
maxp = d3.max([maxpFirst, maxpSecond])}
else {
maxp = maxpFirst;
}
var rightbarsdata = data.filter(function(d) { return d.sex==2 && d.year==yearBegin; })
.sort(function(a,b) { return b.age - a.age; }),
leftbarsdata = data.filter(function(d) { return d.sex==1 && d.year==yearBegin; })
.sort(function(a,b) { return b.age - a.age; });
var bins = d3.range(100),
y = d3.scale.ordinal().domain(bins).rangeBands([0, height - margin.bottom - margin.top], 0.25),
x1 = d3.scale.linear().domain([0, maxp]).range([0, width - margin.left - margin.right]),
x2 = d3.scale.linear().domain([0, maxp]).range([width - margin.left - margin.right, 0]);
var svg = d3.select("#pyramidDiagram")
.append("svg")
.attr("width", svgWidth)
.attr("height", svgHeight)
.append("g")
.attr("transform", "translate(20,15)");
// pyramid bar chart
// legende Ages/ Y Axis
svg.append("g").selectAll("text.ages")
.data(bins)
.enter().append("text")
.filter(function(d) { return d%10==0; })
.attr("class", "ages")
.attr("x", width + 15)
.attr("y", function(d) { return y(d) + y.rangeBand() + 7; })
.attr("fill", "#888")
.attr("text-anchor", "middle")
.attr("font-size", "12px")
.text(function(d) { return (100-d).toFixed(0); });
// Second Pyramid
if (dataSecond) {
var rightbarsdataSecond = dataSecond.filter(function(d) { return d.sex==2 && d.year==yearBegin; })
.sort(function(a,b) { return b.age - a.age; }),
leftbarsdataSecond = dataSecond.filter(function(d) { return d.sex==1 && d.year==yearBegin; })
.sort(function(a,b) { return b.age - a.age; });
// ----------------- Rightbars -------------------------------------------
svg.selectAll("rect.secondrightbars")
.data(rightbarsdataSecond)
.enter().append("rect")
.attr("id", function(d) { return "secondrightbars"+(d.year - d.age); })
.attr("class", "secondrightbars")
.attr("fill", colorSecondRightbars)
.attr("transform", function(d,i) {return "translate("+(width+30)+","+y(i).toFixed(2)+")";})
.attr("width", function(d) {return x1(d.people)})
.attr("height", y.rangeBand())
.attr("y", 0);
// ----------------- Leftbars -------------------------------------------
svg.selectAll("rect.secondleftbars")
.data(leftbarsdataSecond)
.enter().append("rect")
.attr("id", function(d) { return "secondleftbars"+(d.year - d.age); })
.attr("class", "secondleftbars")
.attr("fill", colorSecondLeftBars)
.attr("transform", function(d,i) {return "translate("+x2(d.people).toFixed(2)+","+y(i).toFixed(2)+")";})
.attr("width", function(d) {return x1(d.people)})
.attr("height", y.rangeBand())
.attr("y", 0);
}
// ----------------- Rightbars -------------------------------------------
var rightbars = svg.selectAll("rect.rightbars")
.data(rightbarsdata)
.enter().append("rect")
.attr("id", function(d) { return "rightbars"+(d.year - d.age); })
.attr("class", "rightbars")
.attr("stroke",colorRightbars)
.attr("fill", colorRightbars)
.attr("transform", function(d,i) {return "translate("+(width+30)+","+y(i).toFixed(2)+")";})
.attr("width", function(d) {return x1(d.people)})
.attr("height", y.rangeBand())
.attr("y", 0)
.attr("opacity", 1);
// set Bar Tooltip
rightbars.append("title").text(tooltipText);
// label rightbars
svg.append("text")
.attr("x",width+50)
.attr("y",height/2)
.attr("fill","#f3f3f3")
.attr("pointer-events","none")
.attr("font-weight","bold")
.attr("font-family","sant-serif")
.attr("font-size","18px")
.attr("width",30)
.attr("height",30)
.text(labelrightbars);
// ----------------- Leftbars -------------------------------------------
var leftbars = svg.selectAll("rect.leftbars")
.data(leftbarsdata)
.enter().append("rect")
.attr("id", function(d) { return "leftbars"+(d.year - d.age); })
.attr("class", "leftbars")
.attr("stroke",colorLeftBars)
.attr("fill", colorLeftBars)
.attr("transform", function(d,i) {return "translate("+x2(d.people).toFixed(2)+","+y(i).toFixed(2)+")";})
.attr("width", function(d) {return x1(d.people)})
.attr("height", y.rangeBand())
.attr("y", 0)
.attr("opacity", 1);
// set Bar Tooltip
leftbars.append("title").text(tooltipText);
// label leftbars
svg.append("text")
.attr("x",width/2+20)
.attr("y",height/2)
.attr("fill","#f3f3f3")
.attr("pointer-events","none")
.attr("font-weight","bold")
.attr("font-family","sant-serif")
.attr("font-size","18px")
.attr("width",30)
.attr("height",30)
.text(labelleftbars);
// ---------------------------- X Label -------------------------
svg.append("text")
.attr("x", width+15)
.attr("y", height+8)
.attr("dy", ".71em")
.attr("fill", "#888")
.attr("text-anchor", "middle")
.attr("font-size", "13px")
.attr("font-variant", "small-caps")
.attr("letter-spacing", 1)
.text(ytitle);
// ---------------------------- gridlines and labels for right pyramid -------------------------
var rules1 = svg.selectAll("g.rule1")
.data(x1.ticks(5))
.enter().append("g")
.filter(function(d) { return d > 0; })
.attr("class", "rule1")
.attr("transform", function(d) { return "translate("+(width+30+x1(d))+",0)";});
rules1.append("line")
.attr("y1", height - 2)
.attr("y2", height + 4)
.attr("stroke", "#bbb");
rules1.append("line")
.attr("y1", 0)
.attr("y2", height)
.attr("stroke", "white")
.attr("stroke-opacity", .3);
rules1.append("text")
.attr("y", height + 9)
.attr("dy", ".71em")
.attr("text-anchor", "middle")
.attr("font-size", "12px")
.attr("fill", "#bbb")
.text(function(d) { return (d).toFixed(0); });
// ---------------------------- gridlines and labels for left pyramid -------------------------
var rules2 = svg.selectAll("g.rule2")
.data(x2.ticks(5))
.enter().append("g")
.filter(function(d) { return d > 0; })
.attr("class", "rule2")
.attr("transform", function(d) { return "translate("+(x2(d))+",0)";});
rules2.append("line")
.attr("y1", height - 2)
.attr("y2", height + 4)
.attr("stroke", "#bbb");
rules2.append("line")
.attr("y1", 0)
.attr("y2", height)
.attr("stroke", "white")
.attr("stroke-opacity", .3);
rules2.append("text")
.attr("y", height + 9)
.attr("dy", ".71em")
.attr("text-anchor", "middle")
.attr("font-size", "12px")
.attr("fill", "#bbb")
.text(function(d) { return (d).toFixed(0); });
svg.append("div")
.attr("class", "break");
function tooltipText(d) {
return d3.format(".")(d.people)
+ " " + (d.sex==1?"Männer":"Frauen")
+ " im Alter von " + d.age + "-" + (d.age+1)
+ " im Jahr " + d.year;
}
</script>
@mhemesath
Copy link

I found a few issues... take a look at my fork for the implemented corrections.

  • Never include both D3 and R2D3 at the same time. Include D3 for modern browsers, and R2D3 for old ID.
  • Title tooltips currently aren't supported. The bug was around attempting to clone them which IE wasn't allowing for some reason. I put in a special case to get around this in R2D3. In your code, I recommend not rendering them in IE as they don't do anything anyway.

The example still hangs. I profiled the code and found that CSS support is indeed the major drain on performance. I will be prioritizing a fix to make this opt out and that should solve your issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment