Skip to content

Commit 63b77b6

Browse files
mincloud1501mincloud1501
committed
D3.js
1 parent d454803 commit 63b77b6

File tree

13 files changed

+1309
-57
lines changed

13 files changed

+1309
-57
lines changed

‎.ipynb_checkpoints/Untitled1-checkpoint.ipynb‎

Lines changed: 228 additions & 56 deletions
Large diffs are not rendered by default.

‎D3_example/Bubble_Plot/css/style.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
#chart-area svg {
2+
margin-left: auto;
3+
margin-right: auto;
4+
display: block;
5+
}
6+
7+
#logo {
8+
height:50px;
9+
}
10+
11+
.navbar-brand {
12+
height: 60px;
13+
padding: 5px 0px;
14+
}

‎D3_example/Bubble_Plot/data/data_full.json‎

Lines changed: 1 addition & 0 deletions
Large diffs are not rendered by default.

‎D3_example/Bubble_Plot/index.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="description" content="">
6+
<title>Gapminder Clone</title>
7+
<!-- Bootstrap -->
8+
<!-- Custom styling -->
9+
<link rel="stylesheet" href="css/style.css">
10+
</head>
11+
12+
<body>
13+
14+
<div class="container">
15+
<div class="row">
16+
<div id="chart-area"></div>
17+
</div>
18+
</div>
19+
20+
<!-- External JS libraries -->
21+
<script src="js/d3.min.js"></script>
22+
<!-- Custom JS -->
23+
<script src="js/main.js"></script>
24+
25+
</body>
26+
</html>

‎D3_example/Bubble_Plot/js/d3.min.js‎

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎D3_example/Bubble_Plot/js/main.js‎

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
/*
2+
* main.js
3+
Gapminder Clone
4+
*/
5+
6+
var margin = { left:80, right:20, top:50, bottom:100 };
7+
var height = 500 - margin.top - margin.bottom,
8+
width = 800 - margin.left - margin.right;
9+
10+
var g = d3.select("#chart-area")
11+
.append("svg")
12+
.attr("width", width + margin.left + margin.right)
13+
.attr("height", height + margin.top + margin.bottom)
14+
.append("g")
15+
.attr("transform", "translate(" + margin.left +
16+
", " + margin.top + ")");
17+
18+
var time = 0;
19+
20+
var colors = {
21+
"americas": "#5687d1",
22+
"africa": "#5c7b61",
23+
"asia": "#de783b",
24+
"europe": "#6ab975",
25+
};
26+
27+
// 이것 해보는것 실습
28+
var colorText = g.selectAll("text").data(d3.entries(colors))
29+
colorText.enter()
30+
.append("text")
31+
.attr("class", "colors")
32+
.attr("y", function(d,i){return height+40+ 15*i;})
33+
.attr("x", width-40)
34+
.attr("font-size", "20px")
35+
.style("fill",function(d){return d.value;})
36+
.style("opacity", "0.8")
37+
.style("text-anchor", "middle")
38+
.text(function(d){return d.key;});
39+
40+
// Scales
41+
var x = d3.scaleLog()
42+
.range([0, width])
43+
.domain([142, 120000]);
44+
var y = d3.scaleLinear()
45+
.range([height, 0])
46+
.domain([0, 90]);
47+
var area = d3.scaleLinear()
48+
.range([25*Math.PI, 1500*Math.PI])
49+
.domain([2000, 1400000000]);
50+
51+
// Labels
52+
var xLabel = g.append("text")
53+
.attr("y", height + 50)
54+
.attr("x", width / 2)
55+
.attr("font-size", "20px")
56+
.attr("text-anchor", "middle")
57+
.text("GDP Per Capita ($)");
58+
59+
var yLabel = g.append("text")
60+
.attr("transform", "rotate(-90)")
61+
.attr("y", -40)
62+
.attr("x", -170)
63+
.attr("font-size", "20px")
64+
.attr("text-anchor", "middle")
65+
.text("Life Expectancy (Years)")
66+
67+
var timeLabel = g.append("text")
68+
.attr("y", height -10)
69+
.attr("x", width - 40)
70+
.attr("font-size", "40px")
71+
.attr("opacity", "0.4")
72+
.attr("text-anchor", "middle")
73+
.text("1800");
74+
75+
// X Axis
76+
var xAxisCall = d3.axisBottom(x)
77+
.tickValues([400, 4000, 40000])
78+
.tickFormat(d3.format("$"));
79+
g.append("g")
80+
.attr("class", "x axis")
81+
.attr("transform", "translate(0," + height +")")
82+
.call(xAxisCall);
83+
84+
// Y Axis
85+
var yAxisCall = d3.axisLeft(y)
86+
.tickFormat(function(d){ return +d; });
87+
g.append("g")
88+
.attr("class", "y axis")
89+
.call(yAxisCall);
90+
91+
92+
d3.json("data/data_full.json", function(data){
93+
console.log(data);
94+
95+
// Clean data
96+
const formattedData = data.map(function(year){
97+
return year["countries"].map(function(country){
98+
return country;
99+
})
100+
});
101+
102+
// Run the code every 0.1 second
103+
d3.interval(function(){
104+
// At the end of our data, loop back
105+
time = (time < 214) ? time+1 : 0
106+
update(formattedData[time]);
107+
}, 100)
108+
109+
// First run of the visualization
110+
update(formattedData[0]);
111+
})
112+
113+
function update(data) {
114+
// Standard transition time for the visualization
115+
var t = d3.transition()
116+
.duration(100)
117+
118+
// JOIN new data with old elements.
119+
var circles = g.selectAll("circle").data(data, function(d){
120+
return d.country;
121+
});
122+
123+
// EXIT old elements not present in new data.
124+
circles.exit()
125+
.remove();
126+
127+
// ENTER new elements present in new data.
128+
circles.enter()
129+
.append("circle")
130+
.attr("class", "enter")
131+
.attr("fill", function(d) {return colors[d.continent]; })
132+
.merge(circles)
133+
.transition(t)
134+
.attr("cy", function(d){ return y(d.life_exp); })
135+
.attr("cx", function(d){ return x(d.income) })
136+
.attr("r", function(d){ return Math.sqrt(area(d.population) / Math.PI) });
137+
138+
// Update the time label
139+
timeLabel.text(+(time + 1800))
140+
}

‎D3_example/Hierarchical_Edge_Bundling/css/style.css‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
.node {
2+
font: 300 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
3+
fill: #bbb;
4+
}
5+
6+
.node:hover {
7+
fill: #000;
8+
}
9+
10+
.link {
11+
stroke: steelblue;
12+
stroke-opacity: 0.4;
13+
fill: none;
14+
pointer-events: none;
15+
}
16+
17+
.node:hover,
18+
.node--source,
19+
.node--target {
20+
font-weight: 700;
21+
}
22+
23+
.node--source {
24+
fill: #2ca02c;
25+
}
26+
27+
.node--target {
28+
fill: #d62728;
29+
}
30+
31+
.link--source,
32+
.link--target {
33+
stroke-opacity: 1;
34+
stroke-width: 2px;
35+
}
36+
37+
.link--source {
38+
stroke: #d62728;
39+
}
40+
41+
.link--target {
42+
stroke: #2ca02c;
43+
}

‎D3_example/Hierarchical_Edge_Bundling/data/data.json‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
[{
2+
"name": "iit.mumbai.pub1",
3+
"imports": ["iit.chennai.pub3"]
4+
}, {
5+
"name": "iit.delhi.pub2",
6+
"imports": ["iit.mumbai.pub1"]
7+
}, {
8+
"name": "iit.chennai.pub3",
9+
"imports": ["iit.delhi.pub2"]
10+
}]

0 commit comments

Comments
 (0)