Skip to content

Commit 8bda8f3

Browse files
thisismattmillerthisismattmiller
committed
d3 materials
1 parent f5c3d93 commit 8bda8f3

18 files changed

+10885
-0
lines changed

‎.gitIgnore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.DS_Store

‎d3_viz/bar_chart_simple/index.html

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<title>Barchart simple</title>
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
9+
<script src="../libraries/d3.min.js"></script>
10+
11+
12+
<!-- The styles used in the d3 SVG/HTML -->
13+
<style>
14+
15+
.chart div {
16+
font: 20px sans-serif;
17+
background-color: lightsteelblue;
18+
text-align: right;
19+
padding: 5px;
20+
margin: 3px;
21+
color: black;
22+
overflow: visible;
23+
white-space: nowrap;
24+
25+
}
26+
</style>
27+
28+
29+
<!-- The javascript to build the viz -->
30+
<script>
31+
32+
// load the external data
33+
d3.json("../pre_baked_data/xml_field_count.json", function(error, data) {
34+
35+
if (error){
36+
alert("Error loading json file");
37+
}
38+
39+
40+
//we want to know the total number of fields so we can set the domain the scale
41+
//so loop through the data and add up the total number of fields
42+
var totalFields = 0;
43+
44+
for (var aField in data){
45+
totalFields = totalFields + data[aField]['count'];
46+
}
47+
48+
console.log("There are ", totalFields, "total fields")
49+
50+
//now we can set the domain and range of the bar charts
51+
//the domain is min max of our data (count of fields)
52+
//the range is the translation into a linear value between 0 and x (here we are using 5000)
53+
var linearScaleFunction = d3.scale.linear()
54+
.domain([0, totalFields])
55+
.range([0, 5000]);
56+
57+
d3.select("h1").text("Out of " + totalFields + " elements.")
58+
59+
d3.select(".chart")
60+
.selectAll("div")
61+
.data(data)
62+
.enter().append("div")
63+
.style("width", function(d) { return linearScaleFunction(d.count) + "px"; })
64+
.text(function(d) { return d.tag; });
65+
66+
});
67+
68+
69+
70+
</script>
71+
72+
73+
</head>
74+
<body>
75+
76+
77+
<h1></h1>
78+
79+
<div class="chart"></div>
80+
81+
82+
</body>
83+
</html>

‎d3_viz/bar_chart_svg/index.html

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<title>SVG simple</title>
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
9+
10+
<!-- <link rel="stylesheet" href="css/normalize.css">
11+
<link rel="stylesheet" href="css/main.css">-->
12+
<script src="../libraries/d3.min.js"></script>
13+
14+
15+
<!-- The styles used in the d3 SVG/HTML -->
16+
17+
<style>
18+
19+
rect {
20+
fill: lightsteelblue;
21+
}
22+
23+
text {
24+
fill: black;
25+
font: 10px sans-serif;
26+
text-anchor: start;
27+
}
28+
29+
</style>
30+
31+
32+
<!-- The javascript to build the viz -->
33+
34+
<script>
35+
36+
37+
38+
39+
// load the external data
40+
d3.json("../pre_baked_data/xml_field_per_file_count.json", function(error, data) {
41+
42+
if (error){
43+
alert("Error loading json file");
44+
}
45+
46+
47+
var width = 960,
48+
height = 500,
49+
marginBottom = 100,
50+
marginRight = 100;
51+
52+
53+
var barWidth = width / data.length;
54+
55+
56+
//we need to know the total number of collections(XML files) that were processed
57+
//this could be passed in the data file but it is simpler to just hardcode it here as an example
58+
var totalCollection = 5921;
59+
60+
//now we can set the domain and range of the bar charts
61+
//the domain is min max of our data (number of collections/files)
62+
//the range is the translation into a linear value between 0 and x (here we are using the width defined above)
63+
64+
var linearScaleFunction = d3.scale.linear()
65+
.domain([0, totalCollection])
66+
.range([0, height]);
67+
68+
d3.select("body").append("h1").text("Out of " + totalCollection + " Collections")
69+
70+
71+
var chart = d3.select("body").append("svg")
72+
.attr("width", width+marginRight)
73+
.attr("height", height+marginBottom);
74+
75+
var bar = chart.selectAll("rect")
76+
.data(data)
77+
.enter().append("rect")
78+
.attr("x", function(d,i) { return (barWidth * i); })
79+
.attr("y", function(d) { return height - linearScaleFunction(d.count); })
80+
.attr("height", function(d) { return linearScaleFunction(d.count); })
81+
.attr("title",function(d){return d.count})
82+
.attr("width", barWidth - 1)
83+
.on('mouseover', function(d){
84+
//change color and update the header text
85+
d3.select(this).style({fill:'steelblue'})
86+
d3.select("h1").text("Out of " + totalCollection + " Collections <" + d.tag + "> in " + d.count + " (" + Math.floor(d.count/totalCollection*100) + "%)")
87+
}).on('mouseout', function(d){
88+
d3.select(this).style({fill:'lightsteelblue'})
89+
});
90+
91+
92+
//draw the labels, we'
93+
var labels = chart.selectAll(".labels")
94+
.data(data)
95+
.enter()
96+
.append("g")
97+
.attr("class","labels")
98+
.attr("transform", function(d,i) { return "translate("+((barWidth * i) + 3)+","+ (height+ 10) +"),rotate(45)"})
99+
.append("text")
100+
.text(function(d) { return d.tag + " (" + Math.floor(d.count/totalCollection*100) + "%)"; });
101+
102+
103+
104+
});
105+
106+
</script>
107+
108+
</head>
109+
110+
111+
112+
113+
<body>
114+
115+
116+
</body>
117+
118+
119+
120+
121+
122+
</html>

‎d3_viz/libraries/d3.min.js

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

‎d3_viz/network/index.html

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
2+
<!DOCTYPE html>
3+
<meta charset="utf-8">
4+
<style>
5+
6+
.node {
7+
stroke: #fff;
8+
stroke-width: 1.5px;
9+
}
10+
11+
.link {
12+
stroke: #999;
13+
stroke-opacity: .6;
14+
}
15+
16+
</style>
17+
<body>
18+
<script src="../libraries/d3.min.js"></script>
19+
<script>
20+
21+
var width = 960,
22+
height = 1000;
23+
24+
var color = d3.scale.category20();
25+
26+
var force = d3.layout.force()
27+
.charge(-120)
28+
.linkDistance(30)
29+
.gravity(0.05)
30+
.distance(25)
31+
.linkStrength(0.2)
32+
.size([width, height]);
33+
34+
var svg = d3.select("body").append("svg")
35+
.attr("width", width)
36+
.attr("height", height);
37+
38+
d3.json("../pre_baked_data/d3_network.json", function(error, graph) {
39+
40+
41+
force
42+
.nodes(graph.nodes)
43+
.links(graph.links)
44+
.start();
45+
46+
var link = svg.selectAll(".link")
47+
.data(graph.links)
48+
.enter().append("line")
49+
.attr("class", "link")
50+
.style("stroke-width", function(d) { return Math.sqrt(d.value); });
51+
52+
var node = svg.selectAll(".node")
53+
.data(graph.nodes)
54+
.enter().append("circle")
55+
.attr("class", "node")
56+
.attr("r", 5)
57+
.style("fill", function(d) { return color(d.group); })
58+
.call(force.drag);
59+
60+
node.append("title")
61+
.text(function(d) { return d.name; });
62+
63+
64+
65+
force.on("tick", function() {
66+
link.attr("x1", function(d) { return d.source.x; })
67+
.attr("y1", function(d) { return d.source.y; })
68+
.attr("x2", function(d) { return d.target.x; })
69+
.attr("y2", function(d) { return d.target.y; });
70+
71+
node.attr("cx", function(d) { return d.x; })
72+
.attr("cy", function(d) { return d.y; });
73+
});
74+
75+
76+
77+
});
78+
79+
</script>

0 commit comments

Comments
 (0)