Skip to content

Instantly share code, notes, and snippets.

@suneric1

suneric1/index.html

Last active February 8, 2016 23:37
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save suneric1/eccb0b83c4b644fd9b3d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save suneric1/eccb0b83c4b644fd9b3d to your computer and use it in GitHub Desktop.
Download ZIP
Week4: Starter Bars
Raw
index.html
<!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;
cursor: pointer;
}
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: 54%;
}
.table{
width: 39%;
float: right;
}
.barchart{
float: left;
}
.chart{
float: left;
}
.source{
float: left;
font-size: 16px;
margin-top: 30px;
}
#table1 th{
background: #418FC6;
color: #fff;
}
#table1 th:hover{
background: #63B1E8;
color: #fff;
}
#table2 th{
background: #D11F3A;
color: #fff;
}
#table2 th:hover{
background: #F3415C;
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;
}
.barchartTitle{
font-family: 'Roboto', sans-serif;
text-align: left;
margin-bottom: 20px;
}
text{
font-family: 'Roboto', sans-serif;
fill: #444;
font-size: 14px;
}
</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>
<div class="barchart"><div class="barchartTitle" style="color: #D11F3A; padding-left:25px">Audi Sales in 2015</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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stupidtable/0.0.1/stupidtable.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">
var height = 250;
var width = 400;
var widthScale = d3.scale.linear().range([0,width-80]);
var svg = d3.select(".barchart")
.append("svg")
.attr("class", "chart")
.attr("width", width)
.attr("height", height);
//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[2] - b[2];});
audi_data.sort(function(a,b){return a[2] - b[2];});
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");
var colorScale = d3.scale.linear()
.domain(d3.extent(bmw_data, function(d){return d[2];}))
.range(["#A1DFFF", "#63B1E8"]);
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")
.style("background",function(d,i){
if(i === 2){
return colorScale(d);
}})
.text(function(d){return d;});
table = d3.select("#table2").append("table");
thead = table.append("thead").append("tr");
tbody = table.append("tbody");
var colorScale2 = d3.scale.linear()
.domain(d3.extent(audi_data, function(d){return +d[2];}))
.range(["#FFAFAA", "#F3415C"]);
console.log(colorScale2.domain());
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")
.style("background",function(d,i){
if(i === 2){
return colorScale2(d);
}})
.text(function(d){return d;});
d3.selectAll("tr").select("td").attr("class","model");
d3.select("#table1")
.selectAll("th")
.data(["string","int","int","int"])
.attr("data-sort",function(d){return d;});
d3.select("#table2")
.selectAll("th")
.data(["string","int","int","int"])
.attr("data-sort",function(d){return d;});
$("table").stupidtable();
var domainMax = d3.max(audi_data,function(d){
return +d[2];
});
domainMax = Math.round(domainMax/Math.pow(10,String(domainMax).length-1))*Math.pow(10,String(domainMax).length-1);
widthScale.domain([0,domainMax]);
var texts = svg.selectAll("rect")
.data(audi_data)
.enter()
.append("text");
texts.attr("x",45)
.attr("y",function(d,i){
return (i + 1) * 20 + 10;
})
.attr("text-anchor","end")
.text(function(d){
return d[0];
});
svg.append("rect")
.attr("x",48)
.attr("y",12)
.attr("width",2)
.attr("height",(audi_data.length)*20 + 3)
.attr("fill","#999");
svg.append("rect")
.attr("x",370)
.attr("y",12)
.attr("width",2)
.attr("height",(audi_data.length)*20 + 3)
.attr("fill","#999");
svg.selectAll("text.ind")
.data([0,domainMax/4,domainMax/2,domainMax*3/4,domainMax])
.enter()
.append("text")
.text(function(d){
return d;
})
.attr("class","ind")
.attr("text-anchor","middle")
.attr("x",function(d,i){
return 50 + (width-80)*i/4;
})
.attr("y",(audi_data.length+1)*20+10);
svg.selectAll("rect.ind")
.data([domainMax/4,domainMax/2,domainMax*3/4])
.enter()
.append("rect")
.attr("class","ind")
.attr("x",function(d,i){
return 50 + (width-80)*(i+1)/4;
})
.attr("y",15)
.attr("width",1)
.attr("height",(audi_data.length)*20)
.attr("fill","#CCC");
var rects = svg.selectAll("rect.bars")
.data(audi_data)
.enter()
.append("rect")
.attr("class","bars");
rects.attr("x",50)
.attr("y",function(d,i){
return (i + 1) * 20;
})
.attr("width",function(d){
return widthScale(+d[2]);
})
.attr("height", 8)
.attr("fill", function(d){return colorScale2(+d[2])})
.append("title")
.text(function(d){
return "Sales of " + d[0] + " in 2015 is " + d[2];
});
// 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>
Raw
sales_data.csv
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