-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
94 lines (78 loc) · 2.56 KB
/
index.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">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-94002757-3"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'UA-94002757-3');
</script>
<title>uncertain.io</title>
<link rel="icon" href="https://cdn.shopify.com/s/files/1/1061/1924/products/Thinking_Face_Emoji_large.png?v=1480481060">
</head>
<style type="text/css">
/* 13. Basic Styling with CSS */
/* Style the lines by removing the fill and applying a stroke */
.line {
fill: none;
stroke: #ffab00;
stroke-width: 3;
}
/* Style the dots by assigning a fill and stroke */
.dot {
fill: #ffab00;
stroke: #fff;
}
.center {
margin: auto;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.downloadButton {
margin-top: 30px
}
.footer {
margin-top: 30px;
padding-bottom: 20px;
}
img {
width: 60%;
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
<!-- Body tag is where we will append our SVG and SVG objects-->
<body>
<div class="center">
<h3 class="center">A Tool For Communicating Uncertainty</h3>
<p>Hold the
<strong>control key</strong> to draw. Click the numbers to change them.</p>
</div>
<div id="svgDiv" />
</div>
<div class="center downloadButton">
<button type="button " id="saveImageButton">Download Image</button>
</div>
<p class="center footer ">Made by
<a href="https://markhalo.me/ " target="_blank ">Mark Halonen</a>
<br/>
<a href="https://medium.com/@markhalonen/a-gross-oversimplification-ec1453af615b" target="_blank ">Blog Post</a>
<br />
<a href="https://github.com/markhalonen/uncertain" target="_blank ">Source Code</a>
<br/>
<br/>
<h3 class="center ">Some Example Graphs You Might Draw</h3>
<p class="center footer ">"I think 2 weeks, but could be longer"</p>
<img src="typical.png" alt="Italian Trulli">
<p class="center footer ">"That will be either easy or hard"</p>
<img src="split.png" alt="Italian Trulli">
</p>
</body>
<!-- Load in the d3 library -->
<script src="https://d3js.org/d3.v4.min.js "></script>
<script src="saveSvgAsPng.js "></script>
<script src="index.js "></script>