-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
98 lines (87 loc) · 4.96 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
95
96
97
98
<!DOCTYPE html>
<html>
<head>
<title>ChartFudge</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="common.css">
<link rel="stylesheet" type="text/css" href="app.css">
</head>
<body class="initial">
<main>
<h1>ChartFudge</h1>
<div id="squiggle_view">
<canvas width="300" height="200" id="drawaline" class="squiggle"></canvas>
<div id="fudge_button" class="button">Fudge!</div>
<div id="marketing">
<p>ChartFudge lets you quickly and easily make convincing fake line charts. Just draw in the grey box, hit the "Fudge" button, and ChartFudge will do the rest. <a href="about.html">Learn More</a></p>
<p>Created during the <a href="https://www.koding.com/Hackathon">hack.summit() Virtual Hackathon 2016</a> by Carter Sande.</p>
</div>
</div>
<div id="chart_view">
<div id="chart_div"></div>
<div id="chart_controls">
<label for="charttitle">Title: </label>
<input id="charttitle" oninput="drawRealChart();">
<br>
<label for="xaxis">X axis: </label>
<input id="xaxis" oninput="drawRealChart();">
<br>
<label for="xaxismin">X value range: </label>
<input id="xaxismin" type="number" value="0"
onchange="chartDataToFudgedChartData(); drawRealChart();">
-
<input id="xaxismax" type="number" value="100"
onchange="chartDataToFudgedChartData(); drawRealChart();">
<br>
<label for="yaxis">Y axis: </label>
<input id="yaxis" oninput="drawRealChart();">
<br>
<label for="yaxismin">Y value range: </label>
<input id="yaxismin" type="number" value="0"
onchange="chartDataToFudgedChartData(); drawRealChart();">
-
<input id="yaxismax" type="number" value="100"
onchange="chartDataToFudgedChartData(); drawRealChart();">
<br>
<label for="density">Data density: </label>
<input id="density" type="range" min="-2" max="2" step="1" value="0"
onchange="squiggleDataToChartData(); chartDataToFudgedChartData(); drawRealChart();">
<br>
<label for="jitter">Jitter: </label>
<input id="jitter" type="range" min="0" max="0.6" step="0.05" value="0.15"
onchange="chartDataToFudgedChartData(); drawRealChart();">
<br>
<label for="trendline">Trend line: </label>
<select id="trendline" onchange="drawRealChart();">
<option value="none" selected>No trend line</option>
<option value="linear">Line</option>
<option value="exponential">Exponential</option>
<option value="polynomial">Polynomial</option>
</select>
<br>
<label for="theme">Theme: </label>
<select id="theme" onchange="drawRealChart();">
<option value="default">Default</option>
<option value="science">Scientific</option>
</select>
<br>
<a id="dataexport" class="button" onclick="exportData();">Export data</a>
<a id="graphexport" class="button" onclick="exportChart();">Export chart</a>
<div id="downloadlink"></div>
</div>
</div>
</main>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="fudgery.js" async></script>
<canvas id="invisible_svg_rendering_canvas" style="display:none"></canvas>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-48551981-5', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>