-
Notifications
You must be signed in to change notification settings - Fork 0
/
chart4.html
72 lines (62 loc) · 3.12 KB
/
chart4.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
<!DOCTYPE html>
<html lang="nl">
<head>
<base href="/">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width , initial-scale=1" />
<link href="bar-chart.css" rel="stylesheet" />
<title>D3.js Bar Chart</title>
<meta name="description" content="">
</head>
<body>
<h2>Another Chart drawn from a .tsv file using HTML SVG</h2>
<!-- for the svg marker see https://www.w3.org/TR/svg-markers/images/marker-simulated.svg -->
<svg class="d3-comment__arrow ne" width="50px" height="25px" viewBox="0 0 1500 750">
<!--the ne (north-east) in the class can be replaced by nw, sw, se with JavaScript-->
<!--the viewbox redefines what the coordinates without units mean inside an <svg> element-->
<!--now we can scale the whole image by resetting the with width and height -->
<path d="M 0 25 L 500 25 L 1000 500" fill="none" stroke="black" stroke-width="50"/>
<!--think about that the stroke widht is also included in the second argument of M and L-->
<g transform="translate(1000,500)">
<g transform="rotate(45)">
<g transform="scale(100)">
<g transform="translate(0,-1.5)">
<clipPath id="cp1">
<rect x="-0.5" y="0" width="4" height="3"/>
</clipPath>
<g clip-path="url(#cp1)">
<g transform="scale(.3)">
<g fill="black" stroke="none">
<path d="M 0 0 L 10 5 L 0 10 z"/>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
<h3>Relative frequency of letters in the English language</h3>
<svg class="chart4" width="960" height="500"></svg>
<!-- currently the latest version of d3.js is version 4 -->
<script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
<!-- scripts d3 for dsv - generation (to parse .tsv or .csv files) -->
<script src="https://d3js.org/d3-dsv.v1.min.js"></script>
<!-- scripts d3 for formats - fixing problems with binary floating points and other handy stuff for charts -->
<script src="https://d3js.org/d3-format.v1.min.js"></script>
<!-- scripts d3 for array -->
<script src="https://d3js.org/d3-array.v1.min.js"></script>
<!-- scripts d3 for scale generation -->
<script src="https://d3js.org/d3-collection.v1.min.js"></script>
<script src="https://d3js.org/d3-color.v1.min.js"></script>
<script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src="https://d3js.org/d3-time.v1.min.js"></script>
<script src="https://d3js.org/d3-time-format.v2.min.js"></script>
<script src="https://d3js.org/d3-scale.v1.min.js"></script>
<!-- scripts d3 for axis generation -->
<script src="https://d3js.org/d3-axis.v1.min.js"></script>
<script src="d3-tip.js"></script>
<script src="d3-comment.js"></script>
<script src="chart4.js"></script><!-- after loading d3! -->
</body>
</html>