Skip to content

Instantly share code, notes, and snippets.

@sdbernard

sdbernard/index.html

Last active November 12, 2015 10:48
Show Gist options
  • Save sdbernard/3864ea6c1e27674edb14 to your computer and use it in GitHub Desktop.
Save sdbernard/3864ea6c1e27674edb14 to your computer and use it in GitHub Desktop.
Download ZIP
d3 module 3
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>How far does Isis’ influence extend?</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Raleway:100normal,200normal,300normal,400normal,500normal,600normal,700normal,800normal,900normal|Open+Sans:400normal|Lato:400normal|Roboto:400normal|Oswald:400normal|Droid+Sans:400normal|Droid+Serif:400normal|Lobster:400normal|PT+Sans:400normal|Ubuntu:400normal|Playfair+Display:400normal&amp;subset=all" rel="stylesheet" type="text/css">
<style type="text/css">
body {
background-color: #fff1e0;
margin-top: 3em;
font-family: 'Raleway', sans-serif;
font-weight: 400;
}
svg {
background-color: #ecf8fe;
}
h1 {
font-weight: 300;
font-size: 36px;
color: #333333;
margin-top: 0;
margin-bottom: 0;
margin-left: -2px;
}
h6 {
font-size: 12px;
margin-bottom: 0.2em;
margin-top: 6px;
font-weight: 800;
text-transform: uppercase;
color: #af516c;
}
.mapholder {
background: #fff9f1;
padding: 20px 20px 14px;
width: 900px;
box-sizing: border-box;
margin: 0 auto;
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
}
.boundary {
stroke: #7d827d;
fill: none;
stroke-width: 1px;
stroke-dasharray: 1, 2;
}
.support {
fill: #c59b95;
}
.control {
fill: #8a4954;
}
.disputed {
fill: #efedea;
}
.subjectCountry{
font-weight: 700;
font-size: 1.5em;
fill: #706F6F;
letter-spacing: 2px;
}
.place-label {
font-size: 12px;
text-transform: uppercase;
text-anchor: middle;
}
.legendLabel {
font-size: 14px;
}
</style>
</head>
<body>
<div class="mapholder">
<h6>Conflict in the Middle East</h6>
<h1>How far does Isis’ influence extend?</h1>
<p>Since The Islamic State of Iraq and the Levant proclaimed itself to be a worldwide caliphate in June 2014, it has steadily increased its presence over Syria and Iraq. But just how far does it's influence spread to?</p>
</div>
<script type="text/javascript">
//Width and height
var w = 860;
var h = 520;
//Define map projection
var projection = d3.geo.mercator()
.center([41, 34.9 ])
.translate([ w/2, h/2 ])
.scale([ w * 5.1 ]);
//Define path generator
var path = d3.geo.path()
.projection(projection);
//Create SVG
var svg = d3.select('.mapholder')
.append('svg')
.attr('width', w)
.attr('height', h)
.attr('opacity', 0)
//Load in GeoJSON data
d3.json('isis.json', function(isis) {
// //Bind data and create one path per GeoJSON feature
var disputedFills = svg.append('g');
var countryFills = svg.append('g');
var isisSupport = svg.append('g');
var isisControl = svg.append('g');
var boundaryLines = svg.append('g');
var countryNames = svg.append('g');
var subjectCountries = svg.append('g');
var legend = svg.append('g');
countryFills.selectAll('path')
.data(topojson.feature(isis, isis.objects.countries).features)
.enter()
.append('path')
.attr({
'd': path,
'id': function(d) { return d['ISO_A3']; },
'class': 'country',
'fill': function(d) { if(d.properties.name === 'Syria' || d.properties.name === 'Iraq') { return '#f8f7f4'} else { return '#efedea'; }},
'stroke': function(d) { if(d.properties.name === 'Syria' || d.properties.name === 'Iraq') { return '#7d827d'} else { return '#a7a592'; }},
'stroke-width': function(d) { if(d.properties.name === 'Syria' || d.properties.name === 'Iraq') { return 2} else { return 1; }}
});
console.log(isis);
disputedFills.selectAll('path')
.data(topojson.feature(isis, isis.objects.disputed).features)
.enter()
.append('path')
.attr('d', path)
.attr('class', 'disputed')
isisSupport.selectAll('path')
.data(topojson.feature(isis, isis.objects.support).features)
.enter()
.append('path')
.attr('d', path)
.attr('class', 'support')
.attr('opacity', 0)
.transition().delay(2000).duration(1000).attr('opacity', 0.8);
isisControl.selectAll('path')
.data(topojson.feature(isis, isis.objects.control).features)
.enter()
.append('path')
.attr('d', path)
.attr('class', 'control')
.attr('opacity', 0)
.transition().delay(1000).duration(1000).attr('opacity', 1);
boundaryLines.selectAll('path')
.data(topojson.feature(isis, isis.objects.boundaries).features)
.enter()
.append('path')
.attr('d', path)
.attr('class', 'boundary')
countryNames.selectAll('.place-label')
.data(topojson.feature(isis, isis.objects.countrynames).features)
.enter().append('text')
.attr('class', 'place-label')
.attr('transform', function(d) { return 'translate(' + projection(d.geometry.coordinates) + ')'; })
.text(function(d) { return d.properties.name; });
subjectCountries.append('text')
.attr('class', 'subjectCountry')
.attr('x', 230)
.attr('y', 220)
.text('SYRIA')
subjectCountries.append('text')
.attr('class', 'subjectCountry')
.attr('x', 560)
.attr('y', 300)
.text('IRAQ')
legend.attr('transform', 'translate(' + 10 + ',' + 10 + ')')
legend.append('rect')
.attr({
'width': 130,
'height': 50,
'fill': '#ffffff',
'opacity': 0
})
.transition().delay(1000).duration(500).attr('opacity', 1);
legend.append('rect')
.attr('transform', 'translate(' + 10 + ',' + 10 + ')')
.attr({
'width': 20,
'height': 10,
'class': 'legend control',
'opacity': 0
})
.transition().delay(1000).duration(1000).attr('opacity', 1);
legend.append('rect')
.attr('transform', 'translate(' + 10 + ',' + 30 + ')')
.attr({
'width': 20,
'height': 10,
'class': 'legend support',
'opacity': 0
})
.transition().delay(2000).duration(1000).attr('opacity', 0.8);
legend.append('text')
.attr('transform', 'translate(' + 35 + ',' + 20 + ')')
.attr('class', 'legendLabel')
.attr('opacity', 0)
.text('Isis control')
.transition().delay(1000).duration(1000).attr('opacity', 1);
legend.append('text')
.attr('transform', 'translate(' + 35 + ',' + 40 + ')')
.attr('class', 'legendLabel')
.attr('opacity', 0)
.text('Isis support')
.transition().delay(2000).duration(1000).attr('opacity', 1);
/* transitions*/
svg.transition().delay(200).duration(800).attr('opacity', 1);
});
</script>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
isis.json
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment