xxxxxxxxxx<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="https://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&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> Modified http://d3js.org/topojson.v1.min.js to a secure url
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js
https://d3js.org/topojson.v1.min.js