Skip to content
Snippets Groups Projects
Commit fc50601a authored by NAAE CHO's avatar NAAE CHO
Browse files

d3.js tutorial and practice

parent 788e3c2d
No related branches found
No related tags found
No related merge requests found
Expand all Show whitespace changes
Inline Side-by-side
bar.html 0 → 100644
+ 47
− 0
View file @ fc50601a
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bar chart</title>
<!--d3.js 라이브러리 추가-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js"></script>
<!--css-->
<style>
.bar{
fill: blue;
}
</style>
</head>
<body>
<script>
//데이터 설정
const data =[30,20,168,303,65,80];
//svg 캔버스 설정
const width = 500;
const height = 150;
const svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
//막대 그래프 생성
svg.selectAll("rect")
.data(data)
.enter().append("rect")
.attr("x", (d, i) => i * 70) //x 좌표 설정
.attr("y", d => height -d ) //y좌표 설정
.attr("width", 65) //막대 넓이 설정
.attr("height", d => d) //막대 높이 설정
.attr("class","bar");
</script>
<iframe src="map.html" width="500" height="800"> </iframe>
</body>
</html>
\ No newline at end of file
car.html 0 → 100644
+ 154
− 0
View file @ fc50601a
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bar chart</title>
<!--d3.js 라이브러리 추가-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js"></script>
<!--css-->
<style>
.bar {
fill: steelblue;
}
.bar:hover{
fill: orange;
}
.axis-label {
font-size: 14px;
}
.tooltip {
position: absolute;
text-align: center;
width: auto;
height: auto;
padding: 2px;
font: 12px sans-serif;
background: lightsteelblue;
border: 0px;
border-radius: 8px;
pointer-events: none;
opacity: 0;
}
</style>
</head>
<body>
<h2>2022년 1월 전국 지역 별 전기차 현황</h2>
<iframe id="mapFrame" src="map.html" width="500" height="600" frameborder="0"></iframe>
<script>
//데이터 설정
const data = [
{ region: "서울", value: 41140 },
{ region: "인천", value: 12942 },
{ region: "경기", value: 40239 },
{ region: "강원", value: 8042 },
{ region: "충북", value: 8184 },
{ region: "충남", value: 10015 },
{ region: "대전", value: 7675 },
{ region: "세종", value: 1879 },
{ region: "경북", value: 11269 },
{ region: "대구", value: 16169 },
{ region: "전북", value: 7389 },
{ region: "전남", value: 8837 },
{ region: "광주", value: 5204 },
{ region: "경남", value: 12725 },
{ region: "부산", value: 12501 },
{ region: "울산", value: 3180 },
{ region: "제주", value: 25580 }
];
//svg 캔버스 설정
const width = 800;
const height = 400;
const margin = { top: 20, right: 20, bottom: 70, left: 70 };
const svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
//x스케일 설정
const x = d3.scaleBand()
.domain(data.map(d => d.region))
.range([margin.left, width - margin.right])
.padding(0.1);
//y스케일 설정
const y = d3.scaleLinear()
.domain([0, d3.max(data, d => d.value)]).nice()
.range([height - margin.bottom, margin.top]);
// x축 생성
const xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x))
.selectAll("text")
.attr("transform", "rotate(-45)")
.style("text-anchor", "end");
// y축 생성
const yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y))
.append("text")
.attr("x", -margin.left)
.attr("y", margin.top - 10)
.attr("fill", "black")
.attr("text-anchor", "start")
.attr("class", "axis-label")
.text("Value");
// SVG 요소에 x축 추가
svg.append("g")
.call(xAxis);
// SVG 요소에 y축 추가
svg.append("g")
.call(yAxis);
// 툴팁 생성
const tooltip = d3.select("body").append("div")
.attr("class", "tooltip");
//막대 그래프 생성
svg.selectAll("rect")
.data(data)
.enter().append("rect")
.attr("class","bar")
.attr("x", d => x(d.region))
.attr("y", d => y(d.value))
.attr("width", x.bandwidth())
.attr("height", d => y(0) - y(d.value))
//마우스 이벤트
.on("mouseover", function(event, d) {
tooltip.transition()
.duration(200)
.style("opacity", .9);
tooltip.html(`지역: ${d.region}<br>값: ${d.value}`)
.style("left", (event.pageX + 5) + "px")
.style("top", (event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
tooltip.transition()
.duration(500)
.style("opacity", 0);
});
</script>
</body>
</html>
\ No newline at end of file
map.html 0 → 100644
+ 176
− 0
View file @ fc50601a
This diff is collapsed.
scatter.html 0 → 100644
+ 70
− 0
View file @ fc50601a
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>scatter chart</title>
<!--d3.js 라이브러리 추가-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js"></script>
<style>
.dot{
fill: blue;
stroke: #000;
}
</style>
</head>
<body>
<script>
//데이터
const data =[
{x:30, y:20}, {x:50, y:90},{x:80, y:50},{x:20, y:10},{x:60, y:33}
]
//svg 캔버스 추가
const width = 500;
const height = 300;
const margin = {top: 20, right: 20, bottom:30, left: 40};
//svg 요소 생성 및 위치 조정
const 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 + ")");
//x,y축 스케일 설정
const x = d3.scaleLinear()
.domain([0,d3.max(data, d => d.x)]) //x축 도메인 설정
.range([0,width]); //x 축의 범위 설정
const y = d3.scaleLinear()
.domain([0,d3.max(data, d => d.y)]) //y축 도메인 설정
.range([height,0]); //y 축의 범위 설정
//x,y축 추가
svg.append("g")
.attr("transform" , "translate(0, " + height+ ")")
.call(d3.axisBottom(x));
svg.append("g")
.call(d3.axisLeft(y));
//산포도 점을 추가
svg.selectAll("circle")
.data(data)
.enter().append("circle")
.attr("class","dot")
.attr("cx", d => x(d.x))
.attr("cy", d => y(d.y))
.attr("r",5);
</script>
</body>
</html>
\ No newline at end of file
south-korea.svg 0 → 100644
+ 81
− 0
View file @ fc50601a
This diff is collapsed.
svgtest.html 0 → 100644
+ 18
− 0
View file @ fc50601a
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>svg</title>
</head>
<body>
<svg width="500" height="500" style="background-color: pink">
<rect x="50" y="50" width="100" height="100" fill="blue"></rect>
<circle cx="300" cy="100" r="50" fill="green"></circle>
<line x1="50" y1="200" x2="200" y2="200" stroke-width="2" stroke="red"></line>
<polygon points="250,250 300,300 200,300" fill="black"></polygon>
</svg>
</body>
</html>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment

feedback to tooltime@ajou.ac.kr or hwan@ajou.ac.kr