Skip to content

Instantly share code, notes, and snippets.

@jchakko

jchakko/atlanticstorms.csv

Created November 8, 2020 15:57
Show Gist options
  • Save jchakko/32ddb6b5966e9a65d1ac99801ff7bab4 to your computer and use it in GitHub Desktop.
Save jchakko/32ddb6b5966e9a65d1ac99801ff7bab4 to your computer and use it in GitHub Desktop.
Download ZIP
A D3 Multiline graph with data from a CSV file. The graph depicts the number of systems in the Atlantic ocean each year.
Raw
atlanticstorms.csv
name year frequency
Hurricane 1995 11
Tropical Depression 1995 2
Tropical Storm 1995 8
Hurricane 1996 9
Tropical Depression 1996 0
Tropical Storm 1996 4
Hurricane 1997 3
Tropical Depression 1997 1
Tropical Storm 1997 4
Hurricane 1998 10
Tropical Depression 1998 0
Tropical Storm 1998 4
Hurricane 1999 8
Tropical Depression 1999 4
Tropical Storm 1999 4
Hurricane 2000 8
Tropical Depression 2000 4
Tropical Storm 2000 6
Hurricane 2001 9
Tropical Depression 2001 2
Tropical Storm 2001 6
Hurricane 2002 4
Tropical Depression 2002 2
Tropical Storm 2002 8
Hurricane 2003 7
Tropical Depression 2003 5
Tropical Storm 2003 9
Hurricane 2004 9
Tropical Depression 2004 1
Tropical Storm 2004 5
Hurricane 2005 15
Tropical Depression 2005 2
Tropical Storm 2005 12
Hurricane 2006 5
Tropical Depression 2006 0
Tropical Storm 2006 5
Hurricane 2007 6
Tropical Depression 2007 2
Tropical Storm 2007 8
Hurricane 2008 8
Tropical Depression 2008 1
Tropical Storm 2008 8
Hurricane 2009 3
Tropical Depression 2009 2
Tropical Storm 2009 6
Hurricane 2010 12
Tropical Depression 2010 2
Tropical Storm 2010 7
Hurricane 2011 7
Tropical Depression 2011 1
Tropical Storm 2011 12
Hurricane 2012 10
Tropical Depression 2012 0
Tropical Storm 2012 9
Hurricane 2013 2
Tropical Depression 2013 0
Tropical Storm 2013 12
Hurricane 2014 6
Tropical Depression 2014 1
Tropical Storm 2014 2
Hurricane 2015 4
Tropical Depression 2015 1
Tropical Storm 2015 7
Hurricane 2016 7
Tropical Depression 2016 1
Tropical Storm 2016 8
Hurricane 2017 10
Tropical Depression 2017 1
Tropical Storm 2017 7
Hurricane 2018 8
Tropical Depression 2018 1
Tropical Storm 2018 7
Hurricane 2019 6
Tropical Depression 2019 2
Tropical Storm 2019 10
Raw
storms.html
<!DOCTYPE html>
<html lang="en-US">
<meta charset="utf-8">
<head>
<!-- Load in the d3 library -->
<script src="https://d3js.org/d3.v5.min.js"></script>
<style>
html {
font: normal 100%/1.4 Georgia,serif;
}
</style>
</style>
</head>
<body>
<h1 align=center>Atlantic Systems by Severity</h1>
<svg align = center width="1600" height="800">
<!-- Add your SVG elements here -->
</svg>
<script>
<!-- Add your Javascript, D3 code here -->
<!-- Set up the Margin -->
let totalWidth = 900, totalHeight = 600;
let margin = {top: 20, right: 100, bottom: 25, left: 400},
width = totalWidth - margin.right,
height = totalHeight - margin.top - margin.bottom;
<!-- SVG Element -->
let svg = d3.select("svg")
.append("g")
.attr("width", width)
.attr("height",totalHeight)
.attr("transform","translate("+margin.left+","+margin.top+")");
svg.append("g")
.attr("width", width)
.attr("height", height);
let colors = ['orange','deepskyblue','green'];
<!-- Row Converter Function -->
function parseRow(d){
let newRow = {}
newRow.name = d.name;
newRow.frequency = +d.frequency;
newRow.year = d.year;
return newRow;
}
<!-- Retrieve data from CSV -->
d3.csv("atlanticstorms.csv", parseRow).then(
function (data){
<!-- Setup Scales -->
let xScale = d3.scaleLinear()
.domain(d3.extent(data, function(d) { return d.year; }))
.range([0, width]);
let yScale = d3.scaleLinear()
.domain([0, 16])
.range([height, 0]);
<!-- Setup Axis -->
let xAxis = svg.append("g")
.attr("transform","translate(0,"+height+")")
.call(d3.axisBottom(xScale).tickFormat(d3.format('.0f')));
let yAxis = svg.append("g")
.call(d3.axisLeft(yScale));
<!-- Line Generator -->
let lineGenerator = d3.line()
.x(function(d) {
return xScale(d.year);})
.y(function(d) {
return yScale(d.frequency);})
.curve(d3.curveMonotoneX)
let nestedData = d3.nest()
.key(function(d) {return d.name;})
.entries(data);
console.log(nestedData);
let lines = svg.append("g");
lines.selectAll(".line")
.data(nestedData)
.enter()
.append("g")
.append("path")
.attr("class", "line")
.attr("d", function(d,i) {
return lineGenerator(d.values);
})
.style("fill","none")
.style("stroke", function(d,i) {
return colors[i];
})
.style("opacity", .9)
.style("stroke-width",4)
.on("mouseover", function(d, i) {
d3.select(this).style("stroke-width", 6)
})
.on("mouseout", function(d, i) {
d3.select(this).style("stroke-width", 4)
});
lines.selectAll(".labels")
.data(nestedData)
.enter()
.append("g")
.append("text")
.attr("x", function(d, i) {
let hori = d.values[d.values.length-1]["year"];
return xScale(hori) + 5;
})
.attr("y", function(d, i) {
let vert = d.values[d.values.length-1]["frequency"];
return yScale(vert) + 5;
})
.attr("font-size", "25px")
.text(function(d,i) {
console.log(d);
return(d.key);
})
.style("fill", function(d,i) {
return colors[i];
})
.attr("opacity", 1);
}
); //End CSV
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment