Skip to content

Instantly share code, notes, and snippets.

@suneric1

suneric1/index.html

Last active February 23, 2016 06:26
Show Gist options

  • Select an option

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

Select an option

Learn more about clone URLs
Save suneric1/4cb0f5e1dc25ffcb622a to your computer and use it in GitHub Desktop.
Download ZIP
Week 6: Line Plot.
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 slowly 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{
text-align: justify;
}
.para.left{
float: left;
width: 54%;
}
.para.center{
float: left;
width: 70%;
margin-top: 50px;
padding-left: 15%;
}
.table{
width: 39%;
float: right;
padding-left: 7%;
}
.barChart{
}
.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;
}
.title{
font-family: 'Roboto', sans-serif;
margin-bottom: 20px;
}
.tableTitle{
text-align: right;
}
.barChartTitle{
text-align: left;
}
.lineChartTitle{
float: left;
margin-top: 30px;
}
#lineChart{
margin: auto;
width: 700px;
}
.axis text{
font-family: 'Roboto', sans-serif;
fill: #444;
font-size: 14px;
}
.y.axis path{
fill: none;
stroke: none;
shape-rendering: crispEdges;
}
.axis line {
fill: none;
stroke: #999;
shape-rendering: crispEdges;
}
.x.axis path{
fill: none;
stroke: none;
}
.bars:hover{
fill: #E3314C;
}
.value{
font-size: 12px;
color: #444;
}
path.line{
fill: none;
stroke-width: 1.5px;
transition: 0.1s;
}
g.bmw path.line{
stroke: #418FC6;
}
g.audi path.line{
stroke: #E3314C;
}
g.bmw circle{
fill: #418FC6;
transition: 0.1s;
}
g.audi circle{
fill: #E3314C;
transition: 0.1s;
}
g.line{
opacity: 0.5;
}
g.line.unfocused{
opacity: 0.1;
}
g.line.focused{
opacity: 1;
}
g.line.compared{
opacity: 0.8;
}
g.line.unfocused path.line{
stroke-width: 1px;
}
g.line.unfocused text{
opacity: 0.4;
}
g.line.focused path.line{
stroke-width: 3px;
}
g.line.compared path.line{
stroke-width: 2px;
}
g.line text.label{
font-family: 'Roboto', sans-serif;
font-size: 12px;
font-weight: bold;
}
g.line.bmw text{
fill: #418FC6;
}
g.line.audi text{
fill: #E3314C;
}
g.line text.hide{
display: none;
}
text.dotVal{
font-family: 'Open Sans', sans-serif;
font-size: 12px;
font-weight: bold;
}
.tick text{
text-anchor: end;
}
.lineChart .y .tick line{
stroke-dasharray: 2,5;
}
.lineChart .y .tick:first-child line, .lineChart .y .tick:nth-last-child(2) line{
stroke-dasharray: 5,0;
}
.barChart .x .tick line{
stroke-dasharray: 2,5;
}
.barChart .x .tick:first-child line, .barChart .x .tick:nth-last-child(2) line{
stroke-dasharray: 5,0;
}
.tooltip{
position: absolute;
z-index: 10;
}
.tooltip p{
border-radius: 5px;
background: #eee;
padding: 7px;
font-size: 12px;
opacity: 0.5;
}
</style>
</head>
<body>
<h1><span style="color:#D11F3A">Audi</span> is slowly 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 left">
<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 title" style="color: #418FC6; padding-right:15px">BMW Sales in 2014 & 2015</div>
<div id="table1"></div>
<div class="tableTitle title" style="color: #D11F3A; padding-right:15px">Audi Sales in 2014 & 2015</div>
<div id="table2"></div>
</div>
<div class="barChart"><div class="barChartTitle title" style="color: #D11F3A; padding-left:40px">Audi Sales in 2015</div></div>
<div class="para center">
<p>As is shown in the graphics below, Audi’s core models are majorly in their later years of the generation lifecy- cle, except for the A3. This can be a reason that A4 sells unsatisfactorily. The all new A4 would be available next year, so we expect to see an increase on its sales. The Q7 is also going to be refreshed in 2016. However, it’s sales even increased this year, though it’s still behind BMW’s X5.</p>
</div>
<div id="lineChart"><div class="lineChartTitle title" style="color: #D11F3A; padding-left:80px">Audi & BMW Sales (thousand vehicles, 2011-2015)</div></div>
<div class="para center">
<p>“As we head into the final sales month, we are on track to achieve our sixth-consecutive record year and exceed 200,000 annual sales for the first time,” said Mark Del Rosso, Executive Vice President and Chief Oper- ating Officer, Audi of America. “We expect this strong momentum will continue into 2016 as we refresh some of our most popular models, such as the Audi Q7, A4 and R8.”</p>
</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 fullHeight = 250;
var fullWidth = 400;
var margin = {top:12, bottom:20, left:40, right:40};
var height = fullHeight - margin.top - margin.bottom;
var width = fullWidth - margin.left - margin.right;
var xScale = d3.scale.linear().range([0,width]);
var yScale = d3.scale.ordinal().rangeRoundBands([0,height],0.4);
var svg = d3.select(".barChart")
.append("svg")
.attr("class", "chart")
.attr("width", fullWidth)
.attr("height", fullHeight)
.append("g")
.attr("transform","translate(" + margin.left + "," + margin.top +")");
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("top")
.ticks(5)
.tickPadding([-height-15])
.tickSize([height]);
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.tickSize([0]);
//Load in contents of CSV file, and do things to the data.
d3.csv("salesInYears.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[2015] - d[2014]) / d[2014] * 100).toFixed(2);
if(i<9)
bmw_data.push([d.model, d[2014], d[2015], d.salesChange]);
else
audi_data.push([d.model, d[2014], d[2015], 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 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();
//--Barcharts!
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);
xScale.domain([0,domainMax]);
yScale.domain(audi_data.map(function(d){return d[0]}));
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
var rects = svg.selectAll("rect.bars")
.data(audi_data)
.enter()
.append("rect")
.attr("class","bars");
rects.attr("x", 0)
.attr("y",function(d){
return yScale(d[0]);
})
.attr("width",function(d){
return xScale(+d[2]);
})
.attr("height", yScale.rangeBand())
.attr("fill", function(d){return colorScale2(+d[2]);})
.append("title")
.text(function(d){
return "Sales of " + d[0] + " in 2015 is " + d[2];
});
svg.selectAll("text.value")
.data(audi_data)
.enter()
.append("text")
.text(function(d){return d3.format(",")(+d[2]);})
.classed("value","true")
.attr("x",function(d){return xScale(+d[2]);})
.attr("y",function(d){return yScale(d[0]);})
.attr("dx",5)
.attr("dy",11);
// 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!
});
//Line Chart!
var fullHeightLine = 350;
var fullWidthLine = 700;
var marginLine = {top:12, bottom:40, left:80, right:80};
var heightLine = fullHeightLine - marginLine.top - marginLine.bottom;
var widthLine = fullWidthLine - marginLine.left - marginLine.right;
xScaleLine = d3.time.scale().range([0,widthLine]);
yScaleLine = d3.scale.linear().range([0,heightLine]);
var svgLine = d3.select("#lineChart")
.append("svg")
.attr("class","lineChart")
.attr("width",fullWidthLine)
.attr("height",fullHeightLine)
.append("g")
.attr("transform","translate(" + marginLine.left + "," + marginLine.top + ")");
showlegend();
var xAxisLine = d3.svg.axis()
.scale(xScaleLine)
.orient("bottom")
.tickFormat(function(d){return d3.time.format("%Y")(d);})
.ticks(5)
.tickPadding([8])
.tickSize([5]);
var yAxisLine = d3.svg.axis()
.scale(yScaleLine)
.orient("right")
.ticks(5)
.tickPadding([-widthLine-7])
.tickSize([widthLine]);
var line = d3.svg.line()
.x(function(d){
return xScaleLine(d3.time.format("%Y").parse(d.year));
})
.y(function(d){
return yScaleLine(+d.amount);
});
d3.csv("salesInYears.csv", function(error, data) {
if (error) {
console.log("Had an error loading file.");
}
var years = d3.keys(data[0]).slice(0,5);
var dataset = [];
data.forEach(function(d,i){
var vehicleSales = [];
years.forEach(function(y){
if(d[y]){
vehicleSales.push({
model: d.model,
year: y,
amount: d[y]/1000
});
}
});
dataset.push({
model: d.model,
sales: vehicleSales
});
});
xScaleLine.domain(d3.extent(years, function(d){
return d3.time.format("%Y").parse(d);
}));
yScaleLine.domain([d3.max(dataset, function(d){
return d3.max(d.sales, function(d){
return +d.amount;
});
})*1.2, 0]);
var groups = svgLine.selectAll("g")
.data(dataset)
.enter()
.append("g")
.attr("class",function(d,i){
if(i<9)return "bmw line";
else return "audi line";
});
//groups.append("title").text(function(d){ return d.model;});
groups.selectAll("path")
.data(function(d){return [d.sales];})
.enter()
.append("path")
.attr("class","line")
.attr("d",line);
svgLine.append("g")
.call(xAxisLine)
.attr("class","x axis lineChart")
.attr("transform","translate(0," + heightLine + ")");
svgLine.append("g")
.call(yAxisLine)
.attr("class","y axis lineChart")
.selectAll("text")
.style("text-anchor","end");
groups.selectAll("circle")
.data(function(d){return d.sales;})
.enter()
.append("circle")
.attr("cx",function(d){return xScaleLine(d3.time.format("%Y").parse(d.year));})
.attr("cy",function(d){return yScaleLine(+d.amount);})
.attr("r",1.5);
groups.selectAll("text.dotVal")
.data(function(d){return d.sales;})
.enter()
.append("text")
.attr("class","dotVal hide")
.attr("x",function(d){return xScaleLine(d3.time.format("%Y").parse(d.year));})
.attr("y",function(d){return yScaleLine(+d.amount);})
.attr("dy", -10)
.style("text-anchor", "middle")
.text(function(d){
return d3.format(",")(parseInt(d.amount*1000));
});
var textYs = [];
groups.append("text")
.datum(function(d){return {model: d.model, lastSales: d.sales[d.sales.length - 1].amount, enoughSpace: true};})
.attr("x", widthLine)
.attr("y", function(d,i){
if(textYs.length > 0){
for(var i=0;i<textYs.length;i++){
if(Math.abs(textYs[i] - yScaleLine(+d.lastSales)) < 10){
d.enoughSpace = false;
break;
}
d.enoughSpace = true;
}
}
if(d.enoughSpace){
textYs.push(yScaleLine(+d.lastSales));
}
return yScaleLine(+d.lastSales);
})
.text(function(d){
return d.model;
})
.attr("class", function(d){
if(!d.enoughSpace){
return "hide label";
}
else
return "label";
})
.style("text-anchor","start")
.attr("dx",8)
.attr("dy",4);
groups
.on("mouseover",mouseOverFunc)
.on("mousemove",mouseMoveFunc)
.on("mouseout",mouseOutFunc);
});
var tooltip = d3.select("body").append("div").attr("class","tooltip");
function mouseOverFunc(d){
tooltip
.style("display", "block")
.html("<p>Model: " + d.model + "</p>");
var ind = $("g.line").index(this);
d3.selectAll("g.line")
.classed("focused", function(d,i){
if(i == ind) return true;
});
d3.selectAll("g.line")
.classed("compared", function(d,i){
if(i == ind+9 || i == ind-9) return true;
});
d3.selectAll("g.line")
.classed("unfocused", function(d,i){
if(i != ind+9 && i != ind-9 && i != ind) return true;
});
d3.selectAll("g.line.focused").selectAll("circle").attr("r",3);
d3.selectAll("g.line.compared").selectAll("circle").attr("r",2);
d3.selectAll("g.line.unfocused").selectAll("circle").attr("r",1);
d3.selectAll("g.line.compared").selectAll("text.label").style("display", "block");
d3.select(this).selectAll("text").style("display", "block");
}
function mouseMoveFunc(d){
console.log("events", window.event, d3.event);
tooltip
.style("top", (d3.event.pageY - 40) + "px")
.style("left", (d3.event.pageX + 10) + "px");
}
function mouseOutFunc(d){
tooltip.style("display", "none");
d3.selectAll("g.line")
.classed("unfocused",false)
.classed("focused",false)
.classed("compared",false)
.selectAll("circle").attr("r",1.5);
d3.selectAll("g.line").selectAll("text").style("display", null);
}
function showlegend(){
svgLine.append("circle")
.style("fill","#418FC6")
.attr("cx",30)
.attr("cy",30)
.attr("r",2);
svgLine.append("circle")
.style("fill","#418FC6")
.attr("cx",50)
.attr("cy",30)
.attr("r",2);
svgLine.append("line")
.style("stroke","#418FC6")
.style("stroke-width","2px")
.attr("x1",30)
.attr("y1",30)
.attr("x2",50)
.attr("y2",30);
svgLine.append("text")
.text("BMW")
.style("font-size","12px")
.attr("x",55)
.attr("y",34);
svgLine.append("circle")
.style("fill","#E3314C")
.attr("cx",30)
.attr("cy",45)
.attr("r",2);
svgLine.append("circle")
.style("fill","#E3314C")
.attr("cx",50)
.attr("cy",45)
.attr("r",2);
svgLine.append("line")
.style("stroke","#E3314C")
.style("stroke-width","2px")
.attr("x1",30)
.attr("y1",45)
.attr("x2",50)
.attr("y2",45);
svgLine.append("text")
.text("Audi")
.style("font-size","12px")
.attr("x",55)
.attr("y",49);
}
</script>
</html>
Raw
salesInYears.csv
model 2011 2012 2013 2014 2015 startingPrice
1/2 Series 7915 6932 6181 6621 10877 32850
3 Series 85882 88857 102784 87451 89265 33150
4 Series 35583 40481 41650
5 Series 46604 48413 48761 47187 41177 50200
6 Series 3180 7171 8684 7757 6685 77300
7 Series 10080 9676 9813 8648 8026 81300
X1 6141 23771 20217 12651 34800
X3 24261 30011 26916 31029 28798 38950
X5 34540 38723 37865 40933 48747 53900
A3 5926 6808 857 19560 32732 30900
A4 31512 34724 33201 30796 25841 35900
A5 14112 15568 17280 15328 11934 40500
A6 9269 17123 19742 20996 20394 46200
A7 5383 7672 7539 7609 6880 68300
A8 5022 5102 5582 5172 4566 81500
Q3 2753 11728 33700
Q5 22571 25045 35561 37869 45949 40900
Q7 8079 9515 13699 16589 17806 54800
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment