Skip to content

Instantly share code, notes, and snippets.

@asizer
Last active October 5, 2015 13:10
Show Gist options
  • Save asizer/a9644f0183442214a78a to your computer and use it in GitHub Desktop.
Save asizer/a9644f0183442214a78a to your computer and use it in GitHub Desktop.
Knight course Module 2: logging data
make model style year length width height
Honda Civic Sedan 1995 173 66.9 51.7
Honda Civic Sedan 1996 175.1 67.1 54.7
Honda Civic Sedan 1997 175.1 67.1 54.7
Honda Civic Sedan 1998 175.1 67.1 54.7
Honda Civic Sedan 1999 175.1 67.1 54.7
Honda Civic Sedan 2000 175.1 67.1 54.7
Honda Civic Sedan 2001 174.6 67.5 56.7
Honda Civic Sedan 2002 174.6 67.5 56.7
Honda Civic Sedan 2003 174.6 67.5 56.7
Honda Civic Sedan 2004 175.4 67.5 56.7
Honda Civic Sedan 2005 175.4 67.5 56.7
Honda Civic Sedan 2006 176.7 69 56.5
Honda Civic Sedan 2007 176.7 69 56.5
Honda Civic Sedan 2008 176.7 69 56.5
Honda Civic Sedan 2009 177.3 69 56.5
Honda Civic Sedan 2010 177.3 69 56.5
Honda Civic Sedan 2011 177.3 69 56.5
Honda Civic Sedan 2012 177.3 69 56.5
Honda Civic Sedan 2013 179.4 69 56.5
Honda Civic Sedan 2014 179.4 69 56.5
Honda Civic Sedan 2015 179.4 69 56.5
Honda Fit Hatch 2015 160 67 60
Honda Fit Hatch 2013 161.6 66.7 60
Honda Fit Hatch 2012 161.6 66.7 60
Honda Fit Hatch 2011 161.6 66.7 60
Honda Fit Hatch 2010 161.6 66.7 60
Honda Fit Hatch 2009 161.6 66.7 60
Honda Fit Hatch 2008 157.4 66.2 60
Honda Fit Hatch 2007 157.4 66.2 60
Honda Accord Sedan 1995 186.8 70.1 55.3
Honda Accord Sedan 1996 185.6 70.1 55.3
Honda Accord Sedan 1997 185.6 70.1 55.1
Honda Accord Sedan 1998 188.8 70.3 56.9
Honda Accord Sedan 1999 188.8 70.3 56.9
Honda Accord Sedan 2000 188.8 70.3 56.9
Honda Accord Sedan 2001 189.4 70.3 56.9
Honda Accord Sedan 2002 189.4 70.3 56.9
Honda Accord Sedan 2003 189.5 71.5 57.1
Honda Accord Sedan 2004 189.5 71.5 57.1
Honda Accord Sedan 2005 189.5 71.5 57.1
Honda Accord Sedan 2006 191.1 71.6 57.2
Honda Accord Sedan 2007 191.1 71.6 57.2
Honda Accord Sedan 2008 194.1 72.7 58.1
Honda Accord Sedan 2009 194.1 72.7 58.1
Honda Accord Sedan 2010 194.1 72.7 58.1
Honda Accord Sedan 2011 194.1 72.7 58.1
Honda Accord Sedan 2012 194.9 72.7 58.1
Honda Accord Sedan 2013 191.4 72.8 57.7
Honda Accord Sedan 2014 191.4 72.8 57.7
Honda Accord Sedan 2015 191.4 72.8 57.7
Honda Accord Sedan 2016 192.5 72.8 57.7
Toyota Corolla Sedan 1995 171.9 66.3 53.5
Toyota Corolla Sedan 1996 172 66.3 53.5
Toyota Corolla Sedan 1997 172 66.3 53.5
Toyota Corolla Sedan 1998 174 66.7 54.5
Toyota Corolla Sedan 1999 174 66.7 54.5
Toyota Corolla Sedan 2000 174 66.7 54.5
Toyota Corolla Sedan 2001 174 66.7 54.5
Toyota Corolla Sedan 2002 174 66.7 54.5
Toyota Corolla Sedan 2003 178.3 66.9 57.7
Toyota Corolla Sedan 2004 178.3 66.9 58.5
Toyota Corolla Sedan 2005 178.3 66.9 58.5
Toyota Corolla Sedan 2006 178.3 66.9 58.5
Toyota Corolla Sedan 2007 178.3 66.9 58.5
Toyota Corolla Sedan 2008 178.3 66.9 58.5
Toyota Corolla Sedan 2009 178.7 69.3 57.7
Toyota Corolla Sedan 2010 178.7 69.3 57.7
Toyota Corolla Sedan 2011 180 69.4 57.7
Toyota Corolla Sedan 2012 180 69.4 57.7
Toyota Corolla Sedan 2013 180 69.4 57.7
Toyota Corolla Sedan 2014 182.6 69.9 57.3
Toyota Corolla Sedan 2015 182.6 69.9 57.3
Toyota Corolla Sedan 2016 182.6 69.9 57.3
Toyota Camry Sedan 2016 190.9 71.7 57.9
Toyota Camry Sedan 2015 190.9 71.7 57.9
Toyota Camry Sedan 2014 189.2 71.7 57.9
Toyota Camry Sedan 2013 189.2 71.7 57.9
Toyota Camry Sedan 2012 189.2 71.7 57.9
Toyota Camry Sedan 2011 189.2 71.7 57.9
Toyota Camry Sedan 2010 189.2 71.7 57.9
Toyota Camry Sedan 2009 189.2 71.7 57.9
Toyota Camry Sedan 2008 189.2 71.7 57.9
Toyota Camry Sedan 2007 189.2 71.7 57.9
Toyota Camry Sedan 2006 189.2 70.7 58.7
Toyota Camry Sedan 2005 189.2 70.7 58.7
Toyota Camry Sedan 2004 189.2 70.7 57.9
Toyota Camry Sedan 2003 189.2 70.7 57.9
Toyota Camry Sedan 2002 189.2 70.7 57.9
Toyota Camry Sedan 2001 188.5 70.1 55.4
Toyota Camry Sedan 2000 188.5 70.1 55.4
Toyota Camry Sedan 1999 188.5 70.1 55.4
Toyota Camry Sedan 1998 188.5 70.1 55.4
Toyota Camry Sedan 1997 188.5 70.1 55.4
Toyota Camry Sedan 1996 187.8 69.7 55.9
Toyota Camry Sedan 1995 187.8 69.7 54.9
Toyota Avalon Sedan 1995 190.2 70.3 56.1
Toyota Avalon Sedan 1996 190.2 70.3 55.9
Toyota Avalon Sedan 1997 190.2 70.3 55.9
Toyota Avalon Sedan 1998 191.9 70.5 56.7
Toyota Avalon Sedan 1999 191.9 70.5 56.7
Toyota Avalon Sedan 2000 191.9 71.7 57.7
Toyota Avalon Sedan 2001 191.9 71.7 57.7
Toyota Avalon Sedan 2002 191.9 71.7 57.7
Toyota Avalon Sedan 2003 191.9 71.7 57.1
Toyota Avalon Sedan 2004 191.9 71.7 57.1
Toyota Avalon Sedan 2005 197.2 72.8 58.5
Toyota Avalon Sedan 2006 197.2 72.8 58.5
Toyota Avalon Sedan 2007 197.2 72.8 58.5
Toyota Avalon Sedan 2008 197.6 72.8 58.5
Toyota Avalon Sedan 2009 197.6 72.8 58.5
Toyota Avalon Sedan 2010 197.6 72.8 58.5
Toyota Avalon Sedan 2011 197.6 72.8 58.5
Toyota Avalon Sedan 2012 197.6 72.8 58.5
Toyota Avalon Sedan 2013 195.3 72.2 57.5
Toyota Avalon Sedan 2014 195.3 72.2 57.5
Toyota Avalon Sedan 2015 195.3 72.2 57.5
Mazda Three Sedan 2015 180.3 70.7 57.3
Mazda Three Hatch 2015 175.6 70.7 57.3
Mazda Three Sedan 2014 180.3 70.7 57.3
Mazda Three Hatch 2014 175.6 70.7 57.3
Mazda Three Sedan 2013 180.7 69.1 57.9
Mazda Three Hatch 2013 177.4 69.1 57.9
Mazda Three Sedan 2012 180.7 69.1 57.9
Mazda Three Hatch 2012 177.4 69.1 57.9
Mazda Three Sedan 2011 180.7 69.1 57.9
Mazda Three Hatch 2011 177.4 69.1 57.9
Mazda Three Sedan 2010 180.7 69.1 57.9
Mazda Three Hatch 2010 177.4 69.1 57.9
Mazda Three Sedan 2009 177.4 69.1 57.7
Mazda Three Hatch 2009 176.8 69.1 57.7
Mazda Three Sedan 2008 177.4 69.1 57.7
Mazda Three Hatch 2008 176.8 69.1 57.7
Mazda Three Sedan 2007 177.4 69.1 57.7
Mazda Three Hatch 2007 176.8 69.1 57.7
Mazda Three Sedan 2006 178.3 69.1 57.7
Mazda Three Hatch 2006 176.6 69.1 57.7
Mazda Three Sedan 2005 178.3 69.1 57.7
Mazda Three Hatch 2005 176.6 69.1 57.7
Mazda Three Sedan 2004 178.3 69.1 57.7
Mazda Three Hatch 2004 176.6 69.1 57.7
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Module 2: loading data into the page</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<style type="text/css">
body, html {
box-sizing: border-box;
width: 100%;
height: 100%;
margin: 0;
padding: 20px;
font-family: sans-serif;
}
</style>
</head>
<body>
<script>
// text binding
var startingData = [7, 2, 5];
d3.select('body')
.selectAll('p')
.data(startingData)
.enter()
.append('p')
.text(function(d) { return 'hello ' + d;});
// bullseye!
var circleData = [
{
radius: 60,
color: 'red'
}, {
radius: 40,
color: 'yellow'
}, {
radius: 20,
color: 'purple'
}];
var svgContainer = d3.select('body')
.append('svg')
.attr('width', 200)
.attr('height', 200);
var svgBackground = svgContainer.append('rect')
.attr('width', 200)
.attr('height', 200)
.attr('fill', 'none')
.attr('stroke', 'fuchsia')
.attr('stroke-width', '4px');
var circles = svgContainer.selectAll('circle')
.data(circleData)
.enter()
.append('circle');
circles.attr('cx', 50)
.attr('cy', 50)
.attr('r', function(d) { return d.radius; })
.style('fill', function(d) { return d.color; });
// offset circles
var svg2 = d3.select('body')
.append('svg')
.attr('width', 200)
.attr('height', 200);
var svgBackground2 = svg2.append('rect')
.attr('width', 200)
.attr('height', 200)
.attr('fill', 'none')
.attr('stroke', 'lime')
.attr('stroke-width', '4px');
var circleData2 = [
{
offset: 30,
color: 'green'
}, {
offset: 80,
color: 'blue'
}, {
offset: 120,
color: 'gray'
}];
var circles2 = svg2.selectAll('circle')
.data(circleData2)
.enter()
.append('circle');
circles2.attr('cx', function(d) { return d.offset; })
.attr('cy', function(d) { return d.offset; })
.attr('r', 30)
.style('fill', function(d) { return d.color; });
d3.csv('carspecs.csv', function(data) {
console.debug(data);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment