Skip to content

Instantly share code, notes, and snippets.

@hinunbi

hinunbi/README.md

Last active September 21, 2017 23:37
Show Gist options
  • Save hinunbi/9266324 to your computer and use it in GitHub Desktop.
Save hinunbi/9266324 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
README.md

D3.js 그래프 연습

간단한 날짜-수치 그래프에 update 버튼을 누르면 새로운 그래프가 그려진다.

자체 데이터를 이용하는 그래프

index.html은 HTML에 그래프 데이터를 포함하는 웹 페이지 소스이다.

TSV 데이터를 이용하는 그래프

index-tsv.html은 TSV 파일의 데이터를 포함하는 웹 페이지 소스이다.
데이터 파일들은 웹 컨텍스트 루트 아래 data 디렉터리에 위치해야 한다.
각 파일들의 위치는 다음과 같다.

/+- index.html
 +- index-data.html
 +- data/+- data.tsv
         +- data-alt.tsv
Raw
data-alt.tsv
date close
01-May-12 58.13
30-Apr-12 37.98
27-Apr-12 67.00
26-Apr-12 45.70
25-Apr-12 30.00
Raw
data.tsv
date close
10-May-12 38.13
01-May-12 58.13
30-Apr-12 53.98
27-Apr-12 67.00
26-Apr-12 89.70
25-Apr-12 99.00
Raw
index-data.html
<!DOCTYPE html>
<meta charset="utf-8" xmlns="http://www.w3.org/1999/html"/>
<style>
body {
font: 12px Arial;
}
path {
stroke: steelblue;
stroke-width: 2;
fill: none;
}
.axis path,
.axis line {
fill: none;
stroke: grey;
stroke-width: 1;
shape-rendering: crispEdges;
}
.grid path {
stroke-width: 0;
}
.tick line {
stroke: grey;
opacity: 0.7;
}
.area {
fill: lightsteelblue;
stroke-width: 0;
}
</style>
<html>
<head>
<title>d3 example</title>
</head>
<body>
<div>
<input name="updateButton" type="button" value="update" onclick="updateData()">
</div>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.0/d3.js" charset="utf-8"></script>
<script type="text/javascript">
parseDate = d3.time.format("%d-%b-%y").parse;
margin = {top: 30, right: 40, bottom: 100, left: 50};
width = 600 - margin.left - margin.right;
height = 400 - margin.top - margin.bottom;
var xScale = d3.time.scale().range([0, width]);
var yScale = d3.scale.linear().range([height, 0]);
var xAxis = d3.svg.axis().scale(xScale).orient("bottom").ticks(10).tickFormat(d3.time.format("%Y-%m-%d")); // 좌표글자의 위치와 치역의
var yAxis = d3.svg.axis().scale(yScale).orient("left").ticks(10);
var valueLine = d3.svg.line()
.interpolate("linear")
.x(function (d) {
return xScale(d.date);
})
.y(function (d) {
return yScale(d.close);
});
var valueArea = d3.svg.area()
.x(function (d) {
return xScale(d.date);
})
.y0(height)
.y1(function (d) {
return yScale(d.close);
});
function make_x_axis() {
return d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(10);
}
function make_y_axis() {
return d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(10);
}
d3.tsv('/data/data.tsv', function (error, data) {
console.log(data);
data.forEach(function (d) {
d.date = parseDate(d.date);
d.close = +d.close;
});
xScale.domain(d3.extent(data,
function (d) {
return d.date;
}));
yScale.domain([0, d3.max(data,
function (d) {
return d.close;
})]);
var svg = d3.select("body")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + ", " + margin.top + ")");
svg.append("path")
.datum(data)
.attr("class", "area")
.attr("d", valueArea);
svg.append("path")
.attr("class", "line")
.attr("d", valueLine(data));
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0, " + height + ")")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", function (d) {
return "rotate(-65)";
});
svg.append("g")
.attr("class", "y axis")
.style("fill", "blue")
.call(yAxis);
svg.append("g")
.attr("class", "grid")
.attr("transform", "translate(0," + height + ")")
.call(make_x_axis()
.tickSize(-height, 0, 0)
.tickFormat("")
);
svg.append("g")
.attr("class", "grid")
.call(make_y_axis()
.tickSize(-width, 0, 0)
.tickFormat("")
);
svg.append("text")
.attr("x", width / 2)
.attr("y", height + margin.bottom)
.style("text-anchor", "middle")
.text("Date");
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0 - (margin.left))
.attr("x", 0 - (height / 2))
.attr("dy", "1em")
.style("text-anchor", "middle")
.text("Value");
svg.append("text")
.attr("x", (width / 2))
.attr("y", 0 - (margin.top / 2))
.attr("text-anchor", "middle")
.style("font-size", "16px")
.style("text-decoration", "underline")
.text("Value vs Date Graph");
});
function updateData() {
d3.tsv("/data/data-alt.tsv", function (error, data) {
console.log(data);
data.forEach(function (d) {
d.date = parseDate(d.date);
d.close = +d.close;
});
xScale.domain(d3.extent(data, function (d) {
return d.date;
}));
yScale.domain([0, d3.max(data, function (d) {
return d.close;
})]);
var svg = d3.select("body").transition();
svg.select(".line")
.duration(750)
.attr("d", valueLine(data));
svg.select(".area")
.duration(750)
.attr("d", valueArea(data));
svg.select(".x.axis")
.duration(750)
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", function (d) {
return "rotate(-65)";
});
svg.select(".y.axis")
.duration(750)
.call(yAxis);
svg.select(".grid")
.duration(750)
.call(make_x_axis()
.tickSize(-height, 0, 0)
.tickFormat("")
);
});
}
</script>
</body>
</html>
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8" xmlns="http://www.w3.org/1999/html"/>
<style>
body {
font: 12px Arial;
}
path {
stroke: steelblue;
stroke-width: 2;
fill: none;
}
.axis path,
.axis line {
fill: none;
stroke: grey;
stroke-width: 1;
shape-rendering: crispEdges;
}
.grid path {
stroke-width: 0;
}
.tick line {
stroke: grey;
opacity: 0.7;
}
.area {
fill: lightsteelblue;
stroke-width: 0;
}
</style>
<html>
<head>
<title>d3 example</title>
</head>
<body>
<div>
<input name="updateButton" type="button" value="update" onclick="updateData()">
</div>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.0/d3.js" charset="utf-8"></script>
<script type="text/javascript">
var data = [
{date: "10-May-12", close: "38.13"},
{date: "01-May-12", close: "58.13"},
{date: "30-Apr-12", close: "53.98"},
{date: "27-Apr-12", close: "67.00"},
{date: "26-Apr-12", close: "89.70"},
{date: "25-Apr-12", close: "99.00"}
];
parseDate = d3.time.format("%d-%b-%y").parse;
margin = {top: 30, right: 40, bottom: 100, left: 50};
width = 600 - margin.left - margin.right;
height = 400 - margin.top - margin.bottom;
var xScale = d3.time.scale().range([0, width]);
var yScale = d3.scale.linear().range([height, 0]);
var xAxis = d3.svg.axis().scale(xScale).orient("bottom").ticks(10).tickFormat(d3.time.format("%Y-%m-%d"));
var yAxis = d3.svg.axis().scale(yScale).orient("left").ticks(10);
var valueLine = d3.svg.line()
.interpolate("linear")
.x(function (d) {
return xScale(d.date);
})
.y(function (d) {
return yScale(d.close);
});
var valueArea = d3.svg.area()
.x(function (d) {
return xScale(d.date);
})
.y0(height)
.y1(function (d) {
return yScale(d.close);
});
function make_x_axis() {
return d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(10);
}
function make_y_axis() {
return d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(10);
}
data.forEach(function (d) {
d.date = parseDate(d.date);
d.close = +d.close;
});
xScale.domain(d3.extent(data,
function (d) {
return d.date;
}));
yScale.domain([0, d3.max(data,
function (d) {
return d.close;
})]);
var svg = d3.select("body")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + ", " + margin.top + ")");
svg.append("path")
.datum(data)
.attr("class", "area")
.attr("d", valueArea);
svg.append("path")
.attr("class", "line")
.attr("d", valueLine(data));
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0, " + height + ")")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", function (d) {
return "rotate(-65)";
});
svg.append("g")
.attr("class", "y axis")
.style("fill", "blue")
.call(yAxis);
svg.append("g")
.attr("class", "grid")
.attr("transform", "translate(0," + height + ")")
.call(make_x_axis()
.tickSize(-height, 0, 0)
.tickFormat("")
);
svg.append("g")
.attr("class", "grid")
.call(make_y_axis()
.tickSize(-width, 0, 0)
.tickFormat("")
);
svg.append("text")
.attr("x", width / 2)
.attr("y", height + margin.bottom)
.style("text-anchor", "middle")
.text("Date");
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0 - (margin.left))
.attr("x", 0 - (height / 2))
.attr("dy", "1em")
.style("text-anchor", "middle")
.text("Value");
svg.append("text")
.attr("x", (width / 2))
.attr("y", 0 - (margin.top / 2))
.attr("text-anchor", "middle")
.style("font-size", "16px")
.style("text-decoration", "underline")
.text("Value vs Date Graph");
function updateData() {
var dataAlt = [
{date: "01-May-12", close: "58.13"},
{date: "30-Apr-12", close: "37.98"},
{date: "27-Apr-12", close: "67.00"},
{date: "26-Apr-12", close: "45.70"},
{date: "25-Apr-12", close: "30.00"}
];
dataAlt.forEach(function (d) {
d.date = parseDate(d.date);
d.close = +d.close;
});
xScale.domain(d3.extent(dataAlt, function (d) {
return d.date;
}));
yScale.domain([0, d3.max(dataAlt, function (d) {
return d.close;
})]);
var svg = d3.select("body").transition();
svg.select(".line")
.duration(750)
.attr("d", valueLine(dataAlt));
svg.select(".area")
.duration(750)
.attr("d", valueArea(dataAlt));
svg.select(".x.axis")
.duration(750)
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", function (d) {
return "rotate(-65)";
});
svg.select(".y.axis")
.duration(750)
.call(yAxis);
svg.select(".grid")
.duration(750)
.call(make_x_axis()
.tickSize(-height, 0, 0)
.tickFormat("")
);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment