Last active
February 1, 2016 22:27
-
-
Save suneric1/ed0b2ddcde5c55549ef8 to your computer and use it in GitHub Desktop.
Week 3: D3 Table.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> | |
<link href='https://fonts.googleapis.com/css?family=Roboto:900' rel='stylesheet' type='text/css'> | |
<title>Audi is catching up with BMW in the U.S.</title> | |
<style> | |
body{ | |
font-family: 'Open Sans', sans-serif; | |
} | |
h1{ | |
font-family: 'Roboto', sans-serif; | |
text-align: center; | |
margin: 40px; | |
} | |
table{ | |
font-size: 14px; | |
text-align: right; | |
margin: auto; | |
margin-bottom: 50px; | |
border-collapse: collapse; | |
} | |
th{ | |
font-family: 'Roboto', sans-serif; | |
width: 100px; | |
padding: 5px; | |
} | |
td{ | |
border: 1px solid #fff; | |
padding: 5px; | |
background: #eee; | |
} | |
tr:first-child th:first-child { border-top-left-radius: 10px; } | |
tr:first-child th:last-child { border-top-right-radius: 10px; } | |
tr:last-child td:first-child { border-bottom-left-radius: 10px; } | |
tr:last-child td:last-child { border-bottom-right-radius: 10px; } | |
p{ | |
margin: auto; | |
margin-bottom: 50px; | |
} | |
.main{ | |
margin: auto; | |
width: 70%; | |
} | |
.para{ | |
float: left; | |
width: 44%; | |
} | |
.table{ | |
width: 49%; | |
float: right; | |
} | |
.source{ | |
float: left; | |
font-size: 16px; | |
margin-top: 30px; | |
} | |
#table1 th{ | |
background: #418FC6; | |
color: #fff; | |
} | |
#table2 th{ | |
background: #D11F3A; | |
color: #fff; | |
} | |
.subti{ | |
font-family: 'Roboto', sans-serif; | |
margin-bottom: 20px; | |
} | |
a:link, a:visited{ | |
text-decoration: none; | |
color: #418FC6; | |
} | |
.model{ | |
font-family: 'Roboto', sans-serif; | |
color: #444; | |
} | |
.tableTitle{ | |
font-family: 'Roboto', sans-serif; | |
text-align: right; | |
margin-bottom: 20px; | |
} | |
</style> | |
</head> | |
<body> | |
<h1><span style="color:#D11F3A">Audi</span> is catching up with BMW in the U.S.</h1> | |
<div class="main"> | |
<p style="text-align:center">By <span style="font-style:italic">Zhiming Sun</span></p> | |
<div class="para"> | |
<p class="subti">HIGHLIGHTED MODELS</p> | |
<p>The most of BMW’s sales are contributed by 3 Series. Compared with the 3 Series, its competi- tor, Audi A4, wasn’t selling that well, probably because of its upcoming next generation in 2016. Audi only sold 25,841 units of A4. The number for the 3 series is 89,265.</p> | |
<p>However, Audi overwhelms BMW in terms of smaller car, the A3, competing with 1/2 Series of BMW in a sense. The A3 began a boost on its sales in 2014 when the current generation was first available in the U.S. It produced the sales of 32,732 in Nov. ‘15 YTD, making it the sec- ond-best seller for the brand, while BMW sold only 10,877 units of 1/2 Series.</p> | |
<p>The best seller for Audi has been Q5 for 3 years. Even this is already the 8th year in the current generation, the sales of Q5 in 2015 increased 8,080 to 45,949 from 2014. The competitor, BMW X3, is 2 years “younger” though, only achieved sales of 28,798.</p></div> | |
<div class="table"> | |
<div class="tableTitle" style="color: #418FC6; padding-right:15px">BMW Sales in 2014 & 2015</div> | |
<div id="table1"></div> | |
<div class="tableTitle" style="color: #D11F3A; padding-right:15px">Audi Sales in 2014 & 2015</div> | |
<div id="table2"></div> | |
</div> | |
<p class="source"><span style="font-family: 'Roboto', sans-serif; font-size:18px;">Source</span></br><a href="https://www.audiusa.com/newsroom/news">Audi U.S. Press Release 2015</a></br><a href="https://www.press.bmwgroup.com">BMW Group U.S. Reports 2015</a></p> | |
</div> | |
</body> | |
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script> | |
<!-- load the function file you need before you call it... --> | |
<!-- script type="text/javascript" src="js/tabulate.js"></script --> | |
<script type="text/javascript"> | |
//Load in contents of CSV file, and do things to the data. | |
d3.csv("sales_data.csv", function(error, data) { | |
if (error) { | |
console.log("Had an error loading file."); | |
} | |
var bmw_data = [], audi_data = []; | |
data.forEach(function(d, i){ | |
// now we add another data object value, a calculated value. | |
d.salesChange = ((d.salesIn2015 - d.salesIn2014) / d.salesIn2014 * 100).toFixed(2); | |
if(i<9) | |
bmw_data.push([d.model, d.salesIn2014, d.salesIn2015, d.salesChange]); | |
else | |
audi_data.push([d.model, d.salesIn2014, d.salesIn2015, d.salesChange]); | |
}); | |
console.log(data); | |
bmw_data.sort(function(a,b){return a[3] - b[3];}); | |
audi_data.sort(function(a,b){return a[3] - b[3];}); | |
bmw_data.forEach(function(d, i){ | |
d[3] += "%"; | |
}); | |
audi_data.forEach(function(d, i){ | |
d[3] += "%"; | |
}); | |
// the tabulate function wants the second argument to be your columns in your data that will be in the table. | |
// third argument is the element to put it into on the page | |
/*var regionTable = tabulate(data, | |
["name", "year1990", "year2015", "difference"], | |
"#table");*/ | |
var table = d3.select("#table1").append("table"); | |
var thead = table.append("thead").append("tr"); | |
var tbody = table.append("tbody"); | |
thead | |
.selectAll("th") | |
.data(["Model","Sales In 2014","Sales In 2015","Sales Change"]) | |
.enter() | |
.append("th") | |
.text(function(d){ | |
return d; | |
}); | |
rows = tbody | |
.selectAll("tr") | |
.data(bmw_data) | |
.enter() | |
.append("tr"); | |
cells = rows | |
.selectAll("td") | |
.data(function(d){return d;}) | |
.enter() | |
.append("td") | |
.text(function(d){return d;}); | |
table = d3.select("#table2").append("table"); | |
thead = table.append("thead").append("tr"); | |
tbody = table.append("tbody"); | |
thead | |
.selectAll("th") | |
.data(["Model","Sales In 2014","Sales In 2015","Sales Change"]) | |
.enter() | |
.append("th") | |
.text(function(d){ | |
return d; | |
}); | |
rows = tbody | |
.selectAll("tr") | |
.data(audi_data) | |
.enter() | |
.append("tr"); | |
cells = rows | |
.selectAll("td") | |
.data(function(d){return d;}) | |
.enter() | |
.append("td") | |
.text(function(d){return d;}); | |
d3.selectAll("tr").select("td").attr("class","model"); | |
// Excercises for you if you want: Fix the names in the data and table so they look nicer. | |
// Sort the data by whatever you think is most interesting. What problem does that cause? | |
// Add a style sheet to make this table look nice! | |
}); | |
</script> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
model | salesIn2014 | salesIn2015 | startingPrice | |
---|---|---|---|---|
1/2 Series | 6621 | 10877 | 32850 | |
3 Series | 87451 | 89265 | 33150 | |
4 Series | 35583 | 40481 | 41650 | |
5 Series | 47187 | 41177 | 50200 | |
6 Series | 7757 | 6685 | 77300 | |
7 Series | 8648 | 8026 | 81300 | |
X1 | 20217 | 12651 | 34800 | |
X3 | 31029 | 28798 | 38950 | |
X5 | 40933 | 48747 | 53900 | |
A3 | 19560 | 32732 | 30900 | |
A4 | 30796 | 25841 | 35900 | |
A5 | 15328 | 11934 | 40500 | |
A6 | 20996 | 20394 | 46200 | |
A7 | 7609 | 6880 | 68300 | |
A8 | 5172 | 4566 | 81500 | |
Q3 | 2753 | 11728 | 33700 | |
Q5 | 37869 | 45949 | 40900 | |
Q7 | 16589 | 17806 | 54800 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment