D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
BenHeubl
Full window
Github gist
Inequality Shares (for countries we have data - Worldbank database)
<!DOCTYPE html> <meta charset="utf-8"> <style> body{ width:1200px; margin:100px auto; background: black; } svg text{ font-size:12px; font: white; font-family: futura, Arial, sans-serif; } rect{ shape-rendering:crispEdges; } </style> <body> <script src="https://d3js.org/d3.v3.min.js"></script> <script src="code.js"></script> <script> var sales_data=[ ['Income share held by second 20%','ARG',7.57,9.29], ['Income share held by third 20%','ARG',12.78,14.54], ['Income share held by fourth 20%','ARG',21.31,22.43], ['Income share held by highest 20%','ARG',55.15,49.38], ['Income share held by highest 10%','ARG',37.7,32.42], ['Income share held by lowest 10%','ARG',0.95,1.46], ['Income share held by lowest 20%','ARG',3.19,4.36], ['Income share held by second 20%','BGD',12,12.37], ['Income share held by third 20%','BGD',15.7,16.07], ['Income share held by fourth 20%','BGD',21.07,21.27], ['Income share held by highest 20%','BGD',42.57,41.41], ['Income share held by highest 10%','BGD',28.11,27.03], ['Income share held by lowest 10%','BGD',3.91,3.99], ['Income share held by lowest 20%','BGD',8.66,8.88], ['Income share held by second 20%','BLR',13.75,13.65], ['Income share held by third 20%','BLR',17.78,17.67], ['Income share held by fourth 20%','BLR',22.95,22.79], ['Income share held by highest 20%','BLR',36.64,36.85], ['Income share held by highest 10%','BLR',22.03,22.34], ['Income share held by lowest 10%','BLR',3.62,3.76], ['Income share held by lowest 20%','BLR',8.88,9.04], ['Income share held by second 20%','CAN',12.5,12.39], ['Income share held by third 20%','CAN',17,16.79], ['Income share held by fourth 20%','CAN',22.81,22.74], ['Income share held by highest 20%','CAN',40.77,40.98], ['Income share held by highest 10%','CAN',25.63,25.74], ['Income share held by lowest 10%','CAN',2.48,2.68], ['Income share held by lowest 20%','CAN',6.92,7.1], ['Income share held by second 20%','COL',6.75,6.9], ['Income share held by third 20%','COL',10.97,11.15], ['Income share held by fourth 20%','COL',18.14,18.72], ['Income share held by highest 20%','COL',62.24,60.04], ['Income share held by highest 10%','COL',47.01,44.26], ['Income share held by lowest 10%','COL',0.13,1.05], ['Income share held by lowest 20%','COL',1.9,3.19], ['Income share held by second 20%','CRI',8.86,8.57], ['Income share held by third 20%','CRI',13.67,12.9], ['Income share held by fourth 20%','CRI',21.49,20.31], ['Income share held by highest 20%','CRI',52.12,53.77], ['Income share held by highest 10%','CRI',35.67,37.08], ['Income share held by lowest 10%','CRI',1.13,1.57], ['Income share held by lowest 20%','CRI',3.86,4.45], ['Income share held by second 20%','DEU',13.26,13.07], ['Income share held by third 20%','DEU',17.24,17.06], ['Income share held by fourth 20%','DEU',22.65,22.44], ['Income share held by highest 20%','DEU',38.2,39.14], ['Income share held by highest 10%','DEU',23.43,24.41], ['Income share held by lowest 10%','DEU',3.47,3.3], ['Income share held by lowest 20%','DEU',8.65,8.29], ['Income share held by second 20%','DNK',14.73,14.46], ['Income share held by third 20%','DNK',18.12,17.9], ['Income share held by fourth 20%','DNK',22.67,22.34], ['Income share held by highest 20%','DNK',34.26,36.17], ['Income share held by highest 10%','DNK',20.21,22.1], ['Income share held by lowest 10%','DNK',4.17,3.29], ['Income share held by lowest 20%','DNK',10.22,9.13], ['Income share held by second 20%','DOM',7.61,8.54], ['Income share held by third 20%','DOM',12.14,13.19], ['Income share held by fourth 20%','DOM',19.91,20.8], ['Income share held by highest 20%','DOM',56.68,52.8], ['Income share held by highest 10%','DOM',40.72,36.47], ['Income share held by lowest 10%','DOM',1.22,1.81], ['Income share held by lowest 20%','DOM',3.66,4.67], ['Income share held by second 20%','ECU',6.96,8.42], ['Income share held by third 20%','ECU',11.22,12.98], ['Income share held by fourth 20%','ECU',18.08,20.15], ['Income share held by highest 20%','ECU',60.7,54.35], ['Income share held by highest 10%','ECU',45.91,38.35], ['Income share held by lowest 10%','ECU',0.94,1.35], ['Income share held by lowest 20%','ECU',3.04,4.1], ['Income share held by second 20%','ESP',12.19,12.13], ['Income share held by third 20%','ESP',16.53,17.26], ['Income share held by fourth 20%','ESP',22.55,23.92], ['Income share held by highest 20%','ESP',41.69,41.28], ['Income share held by highest 10%','ESP',26.32,25.2], ['Income share held by lowest 10%','ESP',2.6,1.36], ['Income share held by lowest 20%','ESP',7.04,5.41], ['Income share held by second 20%','EST',11.66,13.25], ['Income share held by third 20%','EST',16.06,17.06], ['Income share held by fourth 20%','EST',22.21,22.84], ['Income share held by highest 20%','EST',43.14,39.76], ['Income share held by highest 10%','EST',27.63,24.32], ['Income share held by lowest 10%','EST',2.68,2.45], ['Income share held by lowest 20%','EST',6.93,7.09], ['Income share held by second 20%','FIN',13.98,13.78], ['Income share held by third 20%','FIN',17.42,17.41], ['Income share held by fourth 20%','FIN',22.14,22.57], ['Income share held by highest 20%','FIN',36.91,37.06], ['Income share held by highest 10%','FIN',22.77,22.59], ['Income share held by lowest 10%','FIN',3.99,3.73], ['Income share held by lowest 20%','FIN',9.55,9.18], ['Income share held by second 20%','GEO',10.61,9.94], ['Income share held by third 20%','GEO',15.4,15.07], ['Income share held by fourth 20%','GEO',22.38,22.36], ['Income share held by highest 20%','GEO',46.24,47.59], ['Income share held by highest 10%','GEO',30.33,31.25], ['Income share held by lowest 10%','GEO',1.8,1.84], ['Income share held by lowest 20%','GEO',5.37,5.04], ['Income share held by second 20%','GRC',11.99,12.28], ['Income share held by third 20%','GRC',16.98,17.07], ['Income share held by fourth 20%','GRC',23.15,22.77], ['Income share held by highest 20%','GRC',41.16,41.43], ['Income share held by highest 10%','GRC',25.74,26.19], ['Income share held by lowest 10%','GRC',2.48,2.18], ['Income share held by lowest 20%','GRC',6.72,6.45], ['Income share held by second 20%','HUN',13.87,13.41], ['Income share held by third 20%','HUN',17.49,17.71], ['Income share held by fourth 20%','HUN',22.14,22.89], ['Income share held by highest 20%','HUN',36.95,37.74], ['Income share held by highest 10%','HUN',22.81,23.1], ['Income share held by lowest 10%','HUN',4,3.28], ['Income share held by lowest 20%','HUN',9.55,8.25], ['Income share held by second 20%','IRL',12.48,12.81], ['Income share held by third 20%','IRL',16.61,16.87], ['Income share held by fourth 20%','IRL',22.2,22.68], ['Income share held by highest 20%','IRL',41.1,40.02], ['Income share held by highest 10%','IRL',26.21,24.61], ['Income share held by lowest 10%','IRL',2.96,2.86], ['Income share held by lowest 20%','IRL',7.61,7.62], ['Income share held by second 20%','ITA',11.9,12.01], ['Income share held by third 20%','ITA',16.76,17.02], ['Income share held by fourth 20%','ITA',22.89,23.15], ['Income share held by highest 20%','ITA',42.31,41.75], ['Income share held by highest 10%','ITA',26.99,26.21], ['Income share held by lowest 10%','ITA',2.04,1.99], ['Income share held by lowest 20%','ITA',6.14,6.07], ['Income share held by second 20%','KGZ',12.75,11.76], ['Income share held by third 20%','KGZ',16.5,16.06], ['Income share held by fourth 20%','KGZ',22.11,22.22], ['Income share held by highest 20%','KGZ',39.97,42.89], ['Income share held by highest 10%','KGZ',24.69,27.37], ['Income share held by lowest 10%','KGZ',3.67,2.78], ['Income share held by lowest 20%','KGZ',8.67,7.07], ['Income share held by second 20%','LTU',12.7,12.45], ['Income share held by third 20%','LTU',17.06,17.57], ['Income share held by fourth 20%','LTU',22.68,23.23], ['Income share held by highest 20%','LTU',39.71,40.35], ['Income share held by highest 10%','LTU',24.7,24.83], ['Income share held by lowest 10%','LTU',3.16,2.18], ['Income share held by lowest 20%','LTU',7.85,6.4], ['Income share held by second 20%','MEX',7.72,8.79], ['Income share held by third 20%','MEX',12.29,13.33], ['Income share held by fourth 20%','MEX',19.43,20.2], ['Income share held by highest 20%','MEX',56.58,52.75], ['Income share held by highest 10%','MEX',41.42,37.51], ['Income share held by lowest 10%','MEX',1.55,1.99], ['Income share held by lowest 20%','MEX',3.98,4.93], ['Income share held by second 20%','NOR',13.97,14.49], ['Income share held by third 20%','NOR',17.28,17.97], ['Income share held by fourth 20%','NOR',22.03,22.55], ['Income share held by highest 20%','NOR',37.17,35.99], ['Income share held by highest 10%','NOR',23.3,21.87], ['Income share held by lowest 10%','NOR',3.82,3.28], ['Income share held by lowest 20%','NOR',9.55,9], ['Income share held by second 20%','PAN',6.34,7.74], ['Income share held by third 20%','PAN',11.37,12.52], ['Income share held by fourth 20%','PAN',19.85,20.06], ['Income share held by highest 20%','PAN',60.76,56.38], ['Income share held by highest 10%','PAN',43.7,40.1], ['Income share held by lowest 10%','PAN',0.23,1.1], ['Income share held by lowest 20%','PAN',1.68,3.3], ['Income share held by second 20%','PER',7.75,9.35], ['Income share held by third 20%','PER',12.9,14.35], ['Income share held by fourth 20%','PER',20.84,21.59], ['Income share held by highest 20%','PER',55.16,50.08], ['Income share held by highest 10%','PER',38.64,34.07], ['Income share held by lowest 10%','PER',1.1,1.66], ['Income share held by lowest 20%','PER',3.35,4.63], ['Income share held by second 20%','POL',12.31,12.19], ['Income share held by third 20%','POL',16.49,16.36], ['Income share held by fourth 20%','POL',22.28,22.25], ['Income share held by highest 20%','POL',41.05,41.34], ['Income share held by highest 10%','POL',26.09,26.19], ['Income share held by lowest 10%','POL',3.23,3.23], ['Income share held by lowest 20%','POL',7.87,7.86], ['Income share held by second 20%','SLV',7.54,9.44], ['Income share held by third 20%','SLV',12.75,14.22], ['Income share held by fourth 20%','SLV',20.88,21.6], ['Income share held by highest 20%','SLV',56.38,50], ['Income share held by highest 10%','SLV',39.27,33.7], ['Income share held by lowest 10%','SLV',0.5,1.67], ['Income share held by lowest 20%','SLV',2.45,4.74], ['Income share held by second 20%','STP',8.5,11.85], ['Income share held by third 20%','STP',12.23,16.38], ['Income share held by fourth 20%','STP',17.69,22.63], ['Income share held by highest 20%','STP',56.35,41.65], ['Income share held by highest 10%','STP',43.61,26.02], ['Income share held by lowest 10%','STP',2.21,3.18], ['Income share held by lowest 20%','STP',5.23,7.49], ['Income share held by second 20%','THA',9.61,10.5], ['Income share held by third 20%','THA',13.6,14.61], ['Income share held by fourth 20%','THA',20.74,21.45], ['Income share held by highest 20%','THA',49.85,46.68], ['Income share held by highest 10%','THA',33.79,30.99], ['Income share held by lowest 10%','THA',2.58,2.8], ['Income share held by lowest 20%','THA',6.2,6.76], ['Income share held by second 20%','TUN',10.2,11.51], ['Income share held by third 20%','TUN',14.89,16.24], ['Income share held by fourth 20%','TUN',21.64,22.62], ['Income share held by highest 20%','TUN',47.31,42.88], ['Income share held by highest 10%','TUN',31.57,27.18], ['Income share held by lowest 10%','TUN',2.44,2.73], ['Income share held by lowest 20%','TUN',5.96,6.75], ['Income share held by second 20%','URY',9.31,8.99], ['Income share held by third 20%','URY',14.38,13.74], ['Income share held by fourth 20%','URY',21.9,21.44], ['Income share held by highest 20%','URY',49.73,50.91], ['Income share held by highest 10%','URY',33.05,34.37], ['Income share held by lowest 10%','URY',1.71,1.91], ['Income share held by lowest 20%','URY',4.68,4.92], ['Income share held by second 20%','USA',10.66,10.4], ['Income share held by third 20%','USA',15.65,15.77], ['Income share held by fourth 20%','USA',22.43,23.1], ['Income share held by highest 20%','USA',45.91,46.03], ['Income share held by highest 10%','USA',29.87,29.61], ['Income share held by lowest 10%','USA',1.8,1.38], ['Income share held by lowest 20%','USA',5.35,4.7] ]; var width = 1300, height = 900, margin ={b:0, t:40, l:170, r:50}; var svg = d3.select("body") .append("svg").attr('width',width).attr('height',(height+margin.b+margin.t)) .append("g").attr("transform","translate("+ margin.l+","+margin.t+")"); var data = [ {data:bP.partData(sales_data,2), id:'Inequalities_in_Year_2000', header:["Category","Nation", "Inequality_in_Year_2000"]}, {data:bP.partData(sales_data,3), id:'Inequality_in_Year_2010', header:["Category","Nation", "Inequality_in_Year_2010"]} ]; bP.draw(data, svg); </script> </body>
Modified
http://d3js.org/d3.v3.min.js
to a secure url
https://d3js.org/d3.v3.min.js