Old school D3 from simpler times

All examples By author By category About

espinielli

Full window Github gist

European FIRs

Visualization of European FIRs (those starting w/ 'E', 'L' or 'UK', 'UG', 'UD', 'BK', 'GC'.

Click on FIR to zoom in/out.

Geometries from the Network Manager and available in this repo.

Built with blockbuilder.org

<!DOCTYPE html>
<meta charset="utf-8">

<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js" type="text/javascript"></script>
<link href="fir.css" rel="stylesheet">

<script src="firs.js"></script>

<div id="tooltip" class="hidden">
    <p id="countryname"></p>
</div><div id="chart"></div>

<script type="text/javascript">
(function () {

// general design from
  // https://www.jeromecukier.net/blog/2013/11/20/getting-beyond-hello-world-with-d3/
  var params = {
    refresh: false, // REMOVE, i.e. `false`, for production
  	width: 960,
  	height:500,
  	scale: 470,
    centerLat:65.4,
    centerLon: 0,
    topo: "euctrl-firs.json",
  	world: "world-110m.json",
  	worldnames: "world-country-names.tsv"
  };

var query = window.location.search.substring(1);
  var vars = query.split("&");
  vars.forEach(function(v) {
      var p = v.split("=");
      params[p[0]] = p[1];
  })
  console.log("params: " + JSON.stringify(params));
  vis.init(params);
}());
</script>

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
​
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js" type="text/javascript"></script>
<link href="fir.css" rel="stylesheet">
​
<script src="firs.js"></script>
​
<div id="tooltip" class="hidden">
    <p id="countryname"></p>
</div><div id="chart"></div>
​
<script type="text/javascript">
(function () {
​
  // general design from
  // https://www.jeromecukier.net/blog/2013/11/20/getting-beyond-hello-world-with-d3/
  var params = {
    refresh: false, // REMOVE, i.e. `false`, for production
    width: 960,
    height:500,
    scale: 470,
    centerLat:65.4,
    centerLon: 0,
    topo: "euctrl-firs.json",
    world: "world-110m.json",
    worldnames: "world-country-names.tsv"
  };
​
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  vars.forEach(function(v) {
      var p = v.split("=");
      params[p[0]] = p[1];
  })
  console.log("params: " + JSON.stringify(params));
  vis.init(params);
}());
</script>
​
    

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/topojson.v1.min.js to a secure url

https://d3js.org/d3.v3.min.js

https://d3js.org/topojson.v1.min.js

https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js

https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js