반응형
D3.js - Data-Driven Documents
D3 is a JavaScript library for visualizing data with HTML, SVG, and CSS.
d3js.org
These are the best JavaScript chart libraries for 2019
First, a brief history: With data collection and use continuing to increase exponentially, the need to visualize this data is becoming more important. Developers seek to consolidate millions of database records into beautiful charts and dashboards that hum
www.freecodecamp.org
더보기
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
</head>
<body>
<!-- D3.js를 읽어들임 -->
<script type="text/javascript" src="./d3.min.js"></script>
<!-- 그림 스타일의 지정 -->
<style>
body {
font-size: 10px;
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}
</style>
<script>
// 데이터파일명의 지정
var CSVFILE = "./2014kion.csv";
// 날짜형식의 지정 ---- (※1)
var parseDate = d3.time.format("%Y/%m/%d").parse;
// 화면사이즈의 지정
var gr_w = 600; // 그래프 폭
var gr_h = 400; // 그래프 높이
var margin = {
top: 40,
right: 20,
bottom: 50,
left: 20
};
// 스케일 지정 ---- (※2)
// 왼쪽 위가 (0,0), y축 좌표 반대로
var x = d3.time.scale().range([0, gr_w]);
var y = d3.scale.linear().range([gr_h, 0]);
// Axis의 지정---- (※3)
var x_axis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickFormat(function(d) {
return (d.getMonth() + 1) + "월";
});
var y_axis = d3.svg.axis().scale(y).orient("left").ticks(5);
// SVG 태그의 추가 ---- (※4)
var svg = d3.select("body")
.append("svg")
.attr("width", gr_w + margin.left + margin.right)
.attr("height", gr_h + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
// 꺾은선 그래프의 작성 ---- (※5)
// 각 축이 사용할 데이터 설정
var line = d3.svg.line()
.x(function(d) {
return x(d.date);
})
.y(function(d) {
return y(d.value);
});
// 데이터파일을 읽어들임 ---- (※6)
// 2014/1/5,5.4 => (헤더를 기반으로) {date: "2014/1/5", value:"5.4"}로 변환
d3.csv(CSVFILE, function(err, data) {
if (err) {
alert("데이터 읽기 에러");
return;
}
// 날짜형식 등을 변경---- (※7)
data.forEach(function(d) {
d.date = parseDate(d.date);
d.value = parseFloat(d.value);
});
console.log(data);
// 스케일 범위의 지정
x.domain(d3.extent(data, function(d) {
return d.date;
}));
y.domain([
d3.min(data, function(d) {
return d.value;
}),
d3.max(data, function(d) {
return d.value;
})
]);
// 꺾은선그래프를 그림 ---- (※8)
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
// 눈금 축 추가
svg.append("g")
.attr("class", "y axis")
.call(y_axis);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + gr_h + ")")
.call(x_axis);
});
</script>
</body></html>
2014kion.csv // 콤마로 구분
date,value
2014/1/1,9.6
2014/1/2,7.3
2014/1/3,5.9
2014/1/4,6.5
2014/1/5,5.4
2014/1/6,5.3
2014/1/7,5.5
2014/1/8,7.3
2014/1/9,7.2
2014/1/10,3.6
2014/1/11,4.3
2014/1/12,5.3
2014/1/13,5.1
2014/1/14,4.2
2014/1/15,3
...반응형
'IT' 카테고리의 다른 글
| GraphQL] 기본 개념 (0) | 2020.02.22 |
|---|---|
| 데이터 시각화 3] NVD3.js , C3.js (0) | 2020.02.17 |
| 데이터 시각화1] 차트 만들기 // html (0) | 2020.02.17 |
| Day 16 (0) | 2020.02.11 |
| Html] ckeditor 설정 (0) | 2020.02.11 |
댓글