-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
78 lines (74 loc) · 3.04 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
<html>
<head>
<title></title>
<script src="js/vendor/d3.min.js" type="text/javascript"></script>
<script src="js/vendor/d3.tip.js" type="text/javascript"></script>
<script type="text/javascript" src="js/vendor/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/vendor/jquery-ui.min.js"></script>
<link rel="stylesheet" href="css/vendor/jquery-ui.min.css">
<link rel="stylesheet" href="dataVisualizer.css">
</head>
<body>
X-axis: <select id='x-attr' class='axisselector'></select>
Y-axis: <select id='y-attr' class='axisselector'></select>
Chart: <select id='chart-type'>
<option value='bar'>Bar</option>
<option value='scatter'>Scatter</option>
<option value='line'>Line</option>
<option value='pie'>Pie</option>
</select>
<div id='vis'></div>
</body>
<script type="text/javascript" src='visRenderer.js'></script>
<script type="text/javascript" src='dataTransformer.js'></script>
<script type="text/javascript" src='dataVisualizer.js'></script>
<script type="text/javascript" src='DataProcessor.js'></script>
<script type="text/javascript" src='xScaleGenerator.js'></script>
<script type="text/javascript" src='yScaleGenerator.js'></script>
<script type="text/javascript">
/*
d3.csv("data/cars.csv",function(data){
dataVisualizer.drawBarChart(data,'Type','Width',"#vis",600,400);
})
*/
dataProcessor.processFile("data/cars.csv");
d3.csv("data/cars.csv",function(data){
$('.axisselector').find('option').remove().end();
$(".axisselector").append($("<option></option>").val('').html(''));
$("#encoding-attribute-dropdown").append($("<option></option>").val('').html(''));
var dataAttributes = Object.keys(data[0]);
for(var i in dataAttributes){
var dataAttribute = dataAttributes[i];
$(".axisselector").append($("<option></option>").val(dataAttribute).html(dataAttribute));
}
});
$(".axisselector").change(function(){
updateChart();
});
$("#chart-type").change(function(){
updateChart();
});
var divWidth = 300, divHeight = 600;
function updateChart(){
d3.csv("data/cars.csv",function(data){
// dataProcessor.processList(data);
// console.log(dataProcessor.getAttributeDetails());
// dataVisualizer.drawScatterplot(data,'Type','Cyl',"#vis",1000,700);
// dataVisualizer.drawPieChart(data,'Type','Retail Price',"#vis",600,400);
d3.select("#vis").selectAll("svg").remove();
var chartType = $("#chart-type").val();
var xAttr = $("#x-attr").val();
var yAttr = $("#y-attr").val();
if(chartType=="bar"){
dataVisualizer.drawBarChart(data,xAttr,yAttr,"#vis",divWidth,divHeight);
}else if (chartType=="scatter"){
dataVisualizer.drawScatterplot(data,xAttr,yAttr,"#vis",divWidth,divHeight);
}else if (chartType=="pie"){
dataVisualizer.drawPieChart(data,xAttr,yAttr,"#vis",divWidth,divHeight);
}else if(chartType=="line"){
dataVisualizer.drawLineChart(data,xAttr,yAttr,"#vis",divWidth,divHeight);
}
})
}
</script>
</html>