Created
September 22, 2012 13:17
-
-
Save codefactory/3766145 to your computer and use it in GitHub Desktop.
D3.js로 만든 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.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: 20px 20px 10px 50px; | |
| width: 780px; | |
| border: 1px solid #ccc; | |
| background-color: white; | |
| } | |
| line { | |
| fill: none; | |
| shape-rendering: crispEdges; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- 차트 컨테이너 --> | |
| <div id="chart-container"></div> | |
| <script src="js/d3.v2.js"></script> <!-- http://d3js.org/d3.v2.js --> | |
| <script> | |
| // 차트 그리기 함수 | |
| function drawChart(data) { | |
| var width = 700, // 차트 너비 | |
| height = 500, // 차트 높이 | |
| padding = 40; // svg 안쪽 padding | |
| // scale | |
| var x = d3.time.scale() | |
| .domain([new Date(2011, 0, 1), new Date(2011, 11, 31)]) | |
| .range([0, width]), | |
| y = d3.time.scale() | |
| .domain([new Date(2011, 0, 1), new Date(2011, 0, 1, 23, 59)]) | |
| .range([0, height]); | |
| // svg | |
| var chart = d3.select('#chart-container') | |
| .append('svg') | |
| .attr('width', width + padding * 2) | |
| .attr('height', height + padding * 2); | |
| var lineGroup = chart.append('g') | |
| .attr('transform', 'translate(' + padding + ', ' + padding + ')'); | |
| // 실제 차트 영역에 배경처럼 깔리는 rect, 위쪽 area chart, 아래쪽 area 차트가 이 위에 올라가면서 | |
| // 낮의 길이 나타내는 타원모양 부분만 보이게 됨 | |
| lineGroup.append('rect') | |
| .attr('x', 0) | |
| .attr('y', 0) | |
| .attr('width', width) | |
| .attr('height', height) | |
| .attr('fill', 'steelblue'); | |
| //위쪽 area chart | |
| var sunriseLine = d3.svg.area() | |
| .x(function (d) { | |
| return x(d.date); | |
| }) | |
| .y1(function (d) { | |
| return y(new Date(2011, 0, 1, d.sunrise[0], d.sunrise[1])); | |
| }) | |
| .interpolate('linear'); | |
| lineGroup.append('path') | |
| .attr('d', sunriseLine(data)) | |
| .attr('fill', '#e2e2e2'); | |
| // 아래쪽 area chart | |
| var sunsetLine = d3.svg.area() | |
| .x(function (d) { | |
| return x(d.date); | |
| }) | |
| .y0(height) | |
| .y1(function (d) { | |
| return y(new Date(2011, 0, 1, d.sunset[0], d.sunset[1])); | |
| }) | |
| .interpolate('linear'); | |
| lineGroup.append('path') | |
| .attr('d', sunsetLine(data)) | |
| .attr('fill', '#e2e2e2'); | |
| // x축 label text | |
| var monthNames = ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월']; | |
| // y축 label text | |
| function yAxisLabel(d) { | |
| if (d == 12) { | |
| return '정오'; | |
| } else if (d == 24) { | |
| return ''; | |
| } else if (d < 12) { | |
| return 'am ' + d; | |
| } else { | |
| return 'pm ' + (d - 12); | |
| } | |
| } | |
| // 매월 15일의 Date 반환 | |
| function midMonthDates() { | |
| return d3.range(0, 12).map(function (i) { | |
| return new Date(2011, i, 15); | |
| }); | |
| } | |
| var axisGroup = chart.append('g') | |
| .attr('transform', 'translate(' + padding + ', ' + padding + ')'); | |
| // 가로 눈금 | |
| axisGroup.selectAll('.yTicks') | |
| .data(d3.range(0, 25)) | |
| .enter() | |
| .append('line') | |
| .attr('x1', -5) | |
| .attr('y1', function (d) { | |
| return d3.round(y(new Date(2011, 0, 1, d))) + 0.5; | |
| }) | |
| .attr('x2', width) | |
| .attr('y2', function (d) { | |
| return d3.round(y(new Date(2011, 0, 1, d))) + 0.5; | |
| }) | |
| .attr('stroke', 'steelblue') | |
| .attr('class', 'yTicks'); | |
| // 세로 눈금 | |
| axisGroup.selectAll('.xTicks') | |
| .data(midMonthDates) | |
| .enter() | |
| .append('line') | |
| .attr('x1', x) | |
| .attr('y1', 0) | |
| .attr('x2', x) | |
| .attr('y2', height + 5) | |
| .attr('stroke', 'steelblue') | |
| .attr('class', 'yTicks'); | |
| // x축 label | |
| axisGroup.selectAll('text.xAxisBottom') | |
| .data(midMonthDates) | |
| .enter() | |
| .append('text') | |
| .text(function (d, i) { | |
| return monthNames[i]; | |
| }) | |
| .attr('x', x) | |
| .attr('y', height + 15) | |
| .attr('text-anchor', 'middle') | |
| .attr('class', 'axis xAxisBottom'); | |
| // y축 label | |
| axisGroup.selectAll('text.yAxisLeft') | |
| .data(d3.range(0, 25)) | |
| .enter() | |
| .append('text') | |
| .text(yAxisLabel) | |
| .attr('x', -7) | |
| .attr('y', function (d) { | |
| return y(new Date(2011, 0, 1, d)); | |
| }) | |
| .attr('dy', 3) | |
| .attr('class', 'yAxisLeft') | |
| .attr('text-anchor', 'end'); | |
| // 가운데 텍스트 표시 | |
| chart.append('text') | |
| .attr('x', width / 2 + padding) | |
| .attr('y', height / 2 + padding) | |
| .attr('text-anchor', 'middle') | |
| .attr('font-size', '14px') | |
| .text('2011년 서울 낮의 길이'); | |
| // 우측 상단 텍스트 표시 | |
| chart.append('text') | |
| .attr('x', width + 40) | |
| .attr('y', 20) | |
| .attr('text-anchor', 'end') | |
| .attr('font-size', '12px') | |
| .text('위쪽 곡선: 일출 시각, 아래쪽 곡선: 일몰 시각'); | |
| } | |
| // json으로 데이터 가져와서 차트 그리기 | |
| d3.json('data/sunrise_sunset.json', drawChart); | |
| // data url - http://codefactory.kr/examples/d3/data/sunrise_sunset.json | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment