-
Notifications
You must be signed in to change notification settings - Fork 1
/
example.html
94 lines (64 loc) · 2.01 KB
/
example.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
</head>
<head>
<script type="text/javascript">
window.onload = function()
{
d3.text("links.csv", function(unparsedData)
{
var data = d3.csv.parseRows(unparsedData);
console.log(data);
//Create the SVG graph.
var svg = d3.select("body").append("svg").attr("width", "100%").attr("height", "100%");
//Add data to the graph and call enter.
var dataEnter = svg.selectAll("rect").data(data).enter();
//The height of the graph (without text).
var graphHeight = 450;
//The width of each bar.
var barWidth = 80;
//The distance between each bar.
var barSeparation = 10;
//The maximum value of the data.
var maxData = 105;
//The actual horizontal distance from drawing one bar rectangle to drawing the next.
var horizontalBarDistance = barWidth + barSeparation;
//The horizontal and vertical offsets of the text that displays each bar's value.
var textXOffset = horizontalBarDistance / 2 - 12;
var textYOffset = 20;
//The value to multiply each bar's value by to get its height.
var barHeightMultiplier = graphHeight / maxData;
//The actual Y position of every piece of text.
var textYPosition = graphHeight + textYOffset;
//Draw the bars.
dataEnter.append("rect").attr("x", function(d, i)
{
return i * horizontalBarDistance;
}).attr("y", function(d)
{
return graphHeight - d * barHeightMultiplier;
}).attr("width", function(d)
{
return barWidth;
}).attr("height", function(d)
{
return d * barHeightMultiplier;
});
//Draw the text.
dataEnter.append("text").text(function(d)
{
return d;
}).attr("x", function(d, i)
{
return i * horizontalBarDistance + textXOffset;
}).attr("y", textYPosition);
});
}
</script>
</head>
<body>
</body>
</html>