Old school D3 from simpler times

All examples By author By category About

anojoual

Full window Github gist

ship7

Built with blockbuilder.org

<!DOCTYPE html>
<meta charset="utf-8">
<head>
    <title>Chips and bots</title>
    <style>
        body {
        background: #fcfcfa;
        height: 500px;
        position: relative;
        width: 960px;
        }
        .stroke {
        fill: none;
        stroke: #000;
        stroke-width: 3px;
        }
        .fill {
        fill: #fff;
        }
        .graticule {
        fill: none;
        stroke: #777;
        stroke-width: .5px;
        stroke-opacity: .5;
        }
        .land {
        fill: #222;
        }
        .boundary {
        fill: none;
        stroke: #fff;
        stroke-width: .5px;
        }
        @font-face {
            font-family: 'AquilineTwoRegular';
            src: url('AquilineTwo-webfont.eot');
            src: url('AquilineTwo-webfont.eot?#iefix') format('embedded-opentype'),
                 url('AquilineTwo-webfont.woff') format('woff'),
                 url('AquilineTwo-webfont.ttf') format('truetype'),
                 url('AquilineTwo-webfont.svg#AquilineTwoRegular') format('svg');
            font-weight: normal;
            font-style: normal;
        }
        #projection-menu {
        position: absolute;
        right: 10px;
        top: 10px;
        }
    </style>

<script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://d3js.org/d3-geo-projection.v1.min.js"></script>
    <script src="https://d3js.org/topojson.v2.min.js"></script>
</head>

<body></body>

<select id="projections-menu"></select>
<select id="ships-menu"></select>

<script>
/***** MODIF MATHIS *****/
var options = [
    { name: "Natural Earth",
      projection: d3.geoNaturalEarth()/*
                   .scale(175)
                   .translate([width / 2, height / 2])
                   .precision(.1) */},
    { name: "Aitoff",
      projection: d3.geoAitoff() },
    { name: "Polyconic",
      projection: d3.geoPolyconic ().scale (100) }
] ;
var menu = d3.select ("#projections-menu")
    .on ("change", change) ;
menu.selectAll ("option")
    .data (options)
    .enter ().append ("option")
    .text (function (d) { return d.name ; }) ;

var menu2 = d3.select ("#ships-menu")
    .on ("change", change2) ;
  
menu2.selectAll ("option")
    .data (options2)
    .enter ().append ("option")
    .text (function (d) { return d.name ; }) ;  
  
function change2() {
    for(var i = 0; i < intervals.length; ++i)
    {
        clearInterval(intervals[i]);
    }
    draw(this.selectedIndex);
    
}
  
function change() {
    for(var i = 0; i < intervals.length; ++i)
    {
        clearInterval(intervals[i]);
    }
    update(this.selectedIndex);
    console.log (this.selectedIndex) ;
}
/*function update(option) {
    old_projection = projection ;
    projection = options[option].projection ;
    nb_element = data.length ;
    projections = [] ;
    for(var i = 0; i < nb_element; i++){
        projections.push(projection([data[i].longitude, data[i].latitude]));
    }
    _land = svg.select (".land")
    _lines = svg.selectAll("line").data (projections).transition (500)
	.attr ("x1", function (p) { return p[0] ; })
	.attr ("y1", function (p) { return p[1] ; })
        .attr ("x2", function (p, i) {
	    var euclidian = Math.sqrt(sqr(projections[(i+1)][1]
					  - projections[i][1])
				      + sqr(projections[(i+1)][0]
					    - projections[i][0]));
	    if (i == nb_element - 1 || euclidian > 20)
		return p[0] ;
	    else
		return projections[i+1][0] ; })
    	.attr ("y2", function (p, i) {
	    var euclidian = Math.sqrt(sqr(projections[(i+1)][1]
					  - projections[i][1])
				      + sqr(projections[(i+1)][0]
					    - projections[i][0]));
	    if (i == nb_element - 1 || euclidian > 20)
		return p[1] ;
	    else
		return projections[i+1][1] ; }) ;
    svg.selectAll ("path").transition ().duration (500)
	.attrTween ("d", projectionTween (old_projection, projection)) ;
    //this doesn't work (I think that's because the next part override it):
    icon.transition ().duration (500)
	.attr("transform", "translate("
	      + (projections[nb_element - 1][0] - 10) + ","
	      + (projections[nb_element - 1][1] - 10) + ")");
    /*icon.transition ().duration (500)
	.attrTween ("d", projectionTween (old_projection, projection)) ;*/
//}
function update(option){
    projection = options[option].projection;
    d3.select("svg").remove();
    draw();
}
function projectionTween(projection0, projection1) {
  return function(d) {
    var t = 0;
    var projection = d3.geoProjection(project)
        .scale(1)
        .translate([width / 2, height / 2]);
    var path = d3.geoPath()
        .projection(projection);
    function project(λ, φ) {
      λ *= 180 / Math.PI, φ *= 180 / Math.PI;
      var p0 = projection0([λ, φ]), p1 = projection1([λ, φ]);
      return [(1 - t) * p0[0] + t * p1[0], (1 - t) * -p0[1] + t * -p1[1]];
    }
    return function(_) {
      t = _;
      return path(d);
    };
  };
}
/***** **** ****** *****/
var width = 960,
    height = 500;
var projection = d3.geoNaturalEarth()
                   .scale(175)
                   .translate([width / 2, height / 2])
                   .precision(.1);
var graticule = d3.geoGraticule();
var svg;
var intervals = [];
var toStop = [];
/*var svg = d3.select("body").append("svg")
            .attr("width", width)
            .attr("height", height);
svg.append("defs").append("path")
                  .datum({type: "Sphere"})
                  .attr("id", "sphere")
                  .attr("d", path);
svg.append("use")
   .attr("class", "stroke")
   .attr("xlink:href", "#sphere");
svg.append("use")
   .attr("class", "fill")
   .attr("xlink:href", "#sphere");
svg.append("path")
   .datum(graticule)
   .attr("class", "graticule")
   .attr("d", path);*/
//var data;
var datas = [];
var nb_element;
//var projections = [];
var plane = document.getElementById('plane');
function sqr(a) {
    return a * a;
}
function drawmap(){
    
    d3.json("https://gist.githubusercontent.com/mbostock/4090846/raw/d534aba169207548a8a3d670c9c2cc719ff05c47/world-110m.json", function(error, world) {
        if (error) throw error;
        svg.insert("path", ".graticule")
            .datum(topojson.feature(world, world.objects.land))
            .attr("class", "land")
            .attr("d", path);
    });
    
    var path = d3.geoPath()
             .projection(projection);
    //var graticule = d3.geoGraticule();
    svg = d3.select("body").append("svg")
                .attr("width", width)
                .attr("height", height);
    svg.append("defs").append("path")
                    .datum({type: "Sphere"})
                    .attr("id", "sphere")
                    .attr("d", path);
    svg.append("use")
    .attr("class", "stroke")
    .attr("xlink:href", "#sphere");
    svg.append("use")
    .attr("class", "fill")
    .attr("xlink:href", "#sphere");
    svg.append("path")
    .datum(graticule)
    .attr("class", "graticule")
    .attr("d", path);
}
function drawship(shipname, data){
    var projections = []
    for(var i = 0; i < data.Lon3.length; i++){
            projections.push(projection([data.Lon3[i], data.Lat3[i]]));
    }
    var size = projections.length
    var icon = svg.append("png:image")
        .attr("xlink:href",
	      "https://cdn.pixabay.com/photo/2013/07/12/18/06/sailer-152989_960_720.png")
        .attr("width", 20)
        .attr("height", 20)
        .attr("transform", "translate(" + (projections[0][0] - 10) + ","
	      + (projections[0][1] - 10) + ")")
        .attr("class", "icon");
    var i = 0;
    var animation = setInterval(function(){
        icon.transition()
            .duration(100)
            .attr("transform", "translate(" + (projections[i][0] - 10) + "," + (projections[i][1] - 10) + ")");
        if(i < (size - 1)){
            var euclidian = Math.sqrt(sqr(projections[(i+1)][1] - projections[i][1]) + sqr(projections[(i+1)][0] - projections[i][0]));
            if(euclidian < 20)
            {
                svg.append("line")
                    .attr("x1", projections[i][0])
                    .attr("y1", projections[i][1])
                    .attr("x2", projections[i][0])
                    .attr("y2", projections[i][1])
                    .attr("stroke", "black")
                    .attr("stroke-width", 1)
                    .transition()
                    .duration(100)
                    .attr("x2", function(d){
                        if(i == (size - 1)){
                            return projections[i][0];
                        }
                        else{
                            return projections[(i + 1)][0];
                        }
                    })
                    .attr("y2", function(d){
                        if(i == (size - 1)){
                            return projections[i][1];
                        }
                        else{
                            return projections[(i + 1)][1];
                        }
                    });
            }
        }
        i++;
        if (i == size){
            clearInterval(animation)
        }
    },100);
    
    intervals.push(animation);
}
  var options2 = [
    { name: "Active"},
    { name: "Andaluz"},
    { name: "Astuto"}
] ;
function draw(i){
  var sh = options2[i].name ;
    d3.json("https://raw.githubusercontent.com/Hakkahi/filesDataviz/master/data.json", function(rawData) {
        drawmap();
        datas = rawData
        
        for(element in datas){
          if (sh == datas[element].ShipName)
            drawship(element, datas[element]);
        }
    });
}
draw();
</script>

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

https://d3js.org/d3-geo-projection.v1.min.js

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