-
-
Save mayblue9/14ccebccc22e8f983cee to your computer and use it in GitHub Desktop.
D3.js로 만든 bar 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.js Bar Chart</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <style> | |
| body { | |
| font-family: dotum; | |
| font-size: 11px; | |
| background-color: #f4f4f4; | |
| } | |
| #chart-container { | |
| margin: 100px auto; | |
| padding: 10px 20px; | |
| width: 1000px; | |
| height: 500px; | |
| border: 1px solid #ccc; | |
| background-color: white; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- 차트 컨테이너 --> | |
| <div id="chart-container"></div> | |
| <script src="js/d3.v2.js"></script> <!-- http://d3js.org/d3.v2.js --> | |
| <script> | |
| // 숫자 천단위마다 콤마 찍어주는 함수, d3로 차트 만드는 작업과는 관계 없음 | |
| function addCommas(nStr) { | |
| nStr += ''; | |
| x = nStr.split('.'); | |
| x1 = x[0]; | |
| x2 = x.length > 1 ? '.' + x[1] : ''; | |
| var rgx = /(\d+)(\d{3})/; | |
| while (rgx.test(x1)) { | |
| x1 = x1.replace(rgx, '$1' + ',' + '$2'); | |
| } | |
| return x1 + x2; | |
| } | |
| var width = 1000, // 차트 너비 | |
| height = 500, // 차트 높이 | |
| padding = 5, // 바 사이 간격 | |
| division = 30000, // 바 높이를 알맞게 표현하기 위해 나눠주는 적당한 수 | |
| duration = 1000; // 바 생성할 때 transition delay 값 | |
| // 차트 그리는 함수 | |
| function drawChart(data) { | |
| var svg = window.svg = d3.select('#chart-container') | |
| .append('svg') | |
| .attr('width', width) | |
| .attr('height', height); | |
| // 바 만들기 | |
| svg.selectAll('rect') | |
| .data(data) | |
| .enter() | |
| .append('rect') | |
| .transition() | |
| .delay(function (d, i) { | |
| return i / data.length * 1000; | |
| }) | |
| .attr('x', function (d, i) { | |
| return i * ((width + padding) / data.length); | |
| }) | |
| .attr('y', function (d) { | |
| return height - parseInt(d.population / division, 10); | |
| // 인구수는 천만, 몇백만 하는 큰 수이므로 화면에 적당한 픽셀로 표시하기 위해 적당한 division 값으로 나눠줌 | |
| }) | |
| .attr('width', width / data.length - padding) | |
| .attr('height', function (d) { | |
| return parseInt(d.population / division, 10); | |
| }) | |
| .attr('fill', function (d) { | |
| return 'rgb(0, 0, ' + parseInt(d.population / division, 10) + ')'; | |
| }); | |
| // 바 위에 인구수 표시 | |
| svg.selectAll('g') | |
| .data(data) | |
| .enter() | |
| .append('text') | |
| .transition() | |
| .delay(duration * 1.2) | |
| .text(function (d) { | |
| return addCommas(d.population); | |
| }) | |
| .attr('x', function (d, i) { | |
| return i * ((width + padding) / data.length) + (width / data.length - padding) / 2; | |
| }) | |
| .attr('y', function (d) { | |
| return height - parseInt(d.population /division, 10) - 5; | |
| }) | |
| .attr('fill', 'blue') | |
| .attr('text-anchor', 'middle'); | |
| // 바 아래에 지역 표시 | |
| svg.selectAll('g') | |
| .data(data) | |
| .enter() | |
| .append('text') | |
| .transition() | |
| .delay(duration * 1.2) | |
| .text(function (d) { | |
| return d.city; | |
| }) | |
| .attr('x', function (d, i) { | |
| return i * ((width + padding) / data.length) + (width / data.length - padding) / 2; | |
| }) | |
| .attr('y', function (d) { | |
| return height - 5; | |
| }) | |
| .attr('fill', 'white') | |
| .attr('text-anchor', 'middle'); | |
| // 차트 우측 상단에 표시 | |
| svg.append('text') | |
| .transition() | |
| .delay(duration * 1.2) | |
| .text('2011년도 전국 인구 통계자료') | |
| .attr('x', 980) | |
| .attr('y', 50) | |
| .attr('text-anchor', 'end') | |
| .attr('font-size', '15px') | |
| .attr('fill', 'black'); | |
| }; | |
| // json으로 자료 가져와서 차트 그리기 | |
| d3.json('data/population.json', drawChart); | |
| // data url - http://codefactory.kr/examples/d3/data/popuplation.json | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment