-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.v3.html
59 lines (59 loc) · 2.62 KB
/
index.v3.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
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Dashboard from loan data analysis.">
<meta name="author" content="Jader Martins">
<title>Flights Visualization</title>
<script src="js/d3.v4.min.js"></script>
<script src="js/dimple.v2.3.0.min.js"></script>
<link href="css/style.css" rel="stylesheet" type="text/css" media="screen">
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Serif&display=swap"
rel="stylesheet">
<script type="text/javascript">
function draw(data) {
// Add title and descriptions about visualizaiton
d3.select("body").append("h2").attr("class","writing")
.text("Cancelled Flights from/to NY in 2000 - 2002");
d3.select("body").append("h3").attr("class","writing")
.text("The impact of terrorist attacks (11-september) on US flights.");
// Create a svg container to recieve the chart
var svg = dimple.newSvg("body", 1200, 550);
// Creates chart and set sizes
var chart = new dimple.chart(svg, data);
chart.setBounds(60, 40, 1050, 350)
// Set column data to each axis.
var x = chart.addCategoryAxis("x", "Date");
x.addOrderRule("Date");
var y1 = chart.addMeasureAxis("y", "Planned");
var y2 = chart.addMeasureAxis("y", "Cancelled");
// Some visual configs
x.fontSize = '14px';
y1.fontSize = '14px';
y2.fontSize = '14px';
chart.customClassList = { axisLine: 'line', barSeries: 'box',
axisLabel: 'writing', legendLabel: 'writing',
axisTitle: 'writing', colorClasses: [
'hatch-1','hatch-2', 'hatch-3']};
// Load data, define the plot type and join y2 to the same category
chart.addSeries(["","Total Planned Flights (Cancelled or Not) by Month"],
dimple.plot.bar, [x, y1]);
chart.addSeries(["","Cancelled Flights by Month"], dimple.plot.line, [x,y2]);
chart.addSeries(["","Cancelled Flights by Month"], dimple.plot.scatter, [x,y2]);
// Add legend
chart.addLegend(70, 10, 510, 20);
// Draw the chart and apply styles to the renderized result.
chart.draw(1000);
svg.selectAll(".dimple-line").style("stroke-dasharray", "3");
svg.selectAll(".dimple-bubble").style("fill", "#ef4b4b");
}
</script>
</head>
<body>
<script type="text/javascript">
// Load data an apply draw function in it.
d3.csv("data/cancelled.csv", draw);
</script>
</body>
</html>