D3 Examples

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<html >
<head>
​
<script src="https://d3js.org/d3.v3.min.js"></script>
​
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/d3.hexbin.v0.min.js"></script>
<script src="https://d3js.org/queue.v1.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
​
<style>
path {
  fill: none;
  stroke-linejoin: round;
}
​
.land {
  fill: #ddd;
}
​
.states {
  stroke: #fff;
}
.hexagons path {
  stroke: lightsteelblue;
}
​
#tooltip {
  color: #222; 
  background: #fff; 
  text-shadow: #f5f5f5 0 2px 0;
  border-radius: 2px; 
  box-shadow: 0px 0px 4px 0px #a6a6a6; 
  opacity: 1; 
  position: absolute;
  text-align:  center;
      }
      #tooltip.hidden {
        display: none;
      }
      #tooltip {
              font-family: Century Gothic; font-size:14px;
      }
     
.oblast {
      font-family: arial;
        font-size: 16px;
        color:black;
      }
.places,.leg{font-family: Century Gothic; font-size:11px; pointer-events: none;}
 #vis{
      position:absolute;
top:50px;}
</style>
</head>
<body>
<span style="font-family:Century Gothic;font-size: 12px; position:absolute;top:15px;left:0px;opacity:.8;">ОПУБЛИКОВАНО 4 ИЮЛЯ</span>
<div id="vis" class=""></div>
<span style="font-family:Century Gothic;font-size: 12px; position:absolute;top:55px;left:670px;width: 150px;"><span style="font-weight: bold;">Освобождены: </span> Группа "Информационное сопротивление" и командование сил АТО сообщают, что за последние три дня, с момента возобновления АТО, были освобождены от террористов пять населенных пунктов - Райгородок, Резниковка, Рай-Александровка, Старый Караван и Брусовка, также взят под контроль пропускной пункт на границе Изварино. На карте видно, что благодаря этому Славянск окружен и взят в полную блокаду.</span>
​
<span style="font-family:Century Gothic;font-size: 12px; position:absolute;top:450px;left:670px;width: 150px;"><span style="font-weight: bold;">В процессе: </span> По состоянию на вечер 3 июля, шли бои за Металлист под Луганском и поселок Николаевка под Славянском</span>
​
<span style="font-family:Century Gothic;font-size: 12px; position:absolute;top:630px;left:550px;width: 150px;font-style:italic;background-color: #FFFACD;">Наведите мышкой на рамки красных и оранжевых квадратов на карте, что бы увидеть название города или села</span>
​
<div id="tooltip" class="hidden">
            <span id="place" style="font-size: 14px;" ></span>
</div>
​
<script type="text/javascript">
            //Width and height
            var w = 700;
            var h = 550;
            //Define map projection
            var projection = d3.geo.mercator()
            .center([36.3, 48.45])
            .scale(6400)
            .translate([w /4.3, h / 2]);
            //Define path generator
            var path = d3.geo.path()
                             .projection(projection);
            //Create SVG element
            var svg = d3.select("#vis")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h);
        
var cities = [
{"place":"Донецк","lon": 37.791673,"lat":47.999148},
{"place":"Луганск","lon":39.304206,"lat":48.549134},
{"place":"Днепропетровск","lon":35.040869,"lat":48.444310},
{"place":"Мариуполь","lon":37.555183,"lat":47.105072},
{"place":"Славянск","lon": 37.592468,"lat":48.847769},
{"place":"Харьков","lon": 36.231038,"lat":49.982604},
{"place":"Запорожье","lon": 35.156918,"lat":47.859264},
{"place":"Ростов-на-Дону","lon": 39.714616,"lat":47.261507},
{"place":"Изюм","lon":  37.268309,"lat":49.203501}
];
    
var cities_free = [
{"place":"Старий Караван","cat":1,"lon":37.783200,"lat":48.919460},
{"place":"Брусовка","cat":1,"lon":37.787406,"lat":48.907615},
{"place":"Райгородок","cat":1,"lon":37.723184,"lat":48.897414},
{"place":"Рай-Александровка","cat":1,"lon":37.843566,"lat":48.813892},
{"place":"Металлист","cat":2,"lon":39.277377,"lat":48.619163},
{"place":"Закотное","cat":1,"lon":37.964139,"lat":48.898029},
{"place":"Резниковка","cat":1,"lon":38.008941,"lat":48.836809},
{"place":"Изварино","cat":1,"lon":39.912457,"lat":48.290446},
{"place":"Николаевка","cat":2,"lon":37.774263,"lat":48.849167},
];
    
    var hexbin = d3.hexbin()
    .size([w, h])
    .radius(16);
    
    var radius = d3.scale.sqrt()
    .domain([0, 8])
    .range([0, 8]);
    
queue()
    .defer(d3.json, "ua_topo.json")
    .defer(d3.csv, "dataset.csv")
    .await(ready);
    
function ready(error, ua, walmarts) {
  walmarts.forEach(function(d) {
    var p = projection(d);
    d[0] = p[0], d[1] = p[1];
   // d.date = parseDate(d.date);
  });
​
 
            
  svg.append("path")
      .datum(topojson.feature(ua, ua.objects.states))
      .attr("class", "land")
      .attr("d", path);
​
  svg.append("path")
  .attr("clip-path", "url(#chart-area)") 
      .datum(topojson.feature(ua, ua.objects.states).features)
      .attr("class", "states")
      .attr("d", path);
​
  svg.append("clipPath") 
    .attr("id", "chart-area")  
    .append("rect")
.attr("class", "clipPath")
.attr("x", 0)
.attr("y", 0)
    .attr("width", 630)
    .attr("height", 800);
  
​
        svg.append("image")
    .attr("clip-path", "url(#chart-area)") 
    //    .attr("clip-path", function(d,i){ return "url(#clipper_"+i+")"; })
        .attr("xlink:href", "https://i.pixs.ru/storage/7/4/8/Bezimyanni_2645030_12822748.png")
        .attr("x", -72)
        .attr("y", -155)
        .attr("width", 800)
        .attr("height",800)
        .attr("opacity", .9)
        .style("pointer-events", "none");
        
        
        
    svg.append("g")
      .attr("class", "hexagons")
    .selectAll("path")
      .data(hexbin(walmarts).sort(function(a, b) { return b.length - a.length; }))
    .enter().append("path")
    .attr("opacity", 1)
      .attr("d", function(d) { return hexbin.hexagon(); })
    //  .attr("d", function(d) { return hexbin.hexagon(radius(d.length)); })
     // .attr("d", function(d) { return hexbin.hexagon(radius(d3.median(d, function(d) { return +d.dobkin*100; }))); })
        .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
        .style("fill", "lightsteelblue")
      //.style("fill", function(d) { return color(d3.median(d, function(d) { return +d.dobkin; })); });
​
​
               
    ///////////////////////////////////////////////////////////        
    
    svg.selectAll(".circle")
                           .data(cities)
                           .enter()
                           .append("circle")
                           .attr("class", "circle")
                           .attr("cx", function(d) {
                               return projection([d.lon, d.lat])[0];
                           })
                           .attr("cy", function(d) {
                               return projection([d.lon, d.lat])[1];
                           })
                           //.attr("r", function(d) {
                         //       return Math.sqrt(parseInt(d.value) * 0.004);
                          // })
                          .attr("r", 3)
                           .style("fill", "black")
                           .style("opacity", 1)
                            .append("title");
               
    //Load in cities data
svg.selectAll(".places")
                           .data(cities)
                           .enter()
                           .append("text")
                           .attr("class", "places")
                            .attr("x", function(d) {
                               return projection([d.lon, d.lat])[0]+3;
                           })
                           .attr("y", function(d) {
                           if(d.place=="Славянск") { return projection([d.lon, d.lat])[1]-15;}
                           if(d.place=="Луганск") { return projection([d.lon, d.lat])[1]+9;}
                             else {  return projection([d.lon, d.lat])[1];}
                           })
                           .text(function(d) {
                    return d.place});
               
    ////////////////////////////////////////////////////////           
    svg.selectAll(".cities_free")
                            .data(cities_free)
                            .enter()
                            .append("rect")
                            .attr("class", "cities_free")
                            .attr("x", function(d) {
                               return projection([d.lon, d.lat])[0];
                           })
                            .attr("width", 10)
                            .attr("y",  function(d) {
                               return projection([d.lon, d.lat])[1];
                           })
                            .attr("height", 10)
                            .attr("stroke-width", 2)
                            .attr("stroke", function (d){if (d.cat==1){return "red"} else {return "orange"}})
                            .style("fill", "none")  
                            .attr("opacity", .9)
                            .on("mouseover", function(d,i) {
                    
    //Update the tooltip position and value
d3.select("#tooltip")
   .style("left", (d3.event.pageX+30) + "px")
     .style("top", (d3.event.pageY-30) + "px")
    .select("#place")
    .text(d.place); 
​
//Show the tooltip
d3.select("#tooltip").classed("hidden", false);
​
​
})
.on("mouseout", function(d,i) {
d3.select("#tooltip").classed("hidden", true);
});
    
    
}
​
///////////////////////////////////////////////////////////////////////////////////////////////////////
​
var leg = svg.append("g")
.attr("class","leg");
​
​
      
 leg.append("rect")
      .attr("x",645)
      .attr("y", 10)
      .attr("width", 10)
      .attr("height", 10)
      .attr("stroke", "red")
      .style("fill", "none")  
      .attr("opacity", 1);
 
 leg.append("rect")
      .attr("x",645)
      .attr("y", 405)
      .attr("width", 10)
      .attr("height", 10)
      .attr("stroke", "orange")
      .style("fill", "none")  
      .attr("opacity", 1);
      
  
    /*
    svg.append("defs").append("path")
    .attr("id", "s3")
    .attr("d", "M 10,90 Q 100,15 200,70 Q 340,140 400,30");
​
var thing = svg.append("g")
    .attr("id", "thing")
    .style("fill", "navy");
    thing.append("use")
    .attr("xlink:href", "#s3")
    .style("stroke", "black")
    .style("fill", "none");
    */
//Load in cities data
/*
    
    
*/
</script>
<hr style="font-family:Century Gothic;font-size: 12px; position:absolute;top:750px;opacity:.8;" noshade size="1" width="800px" align="left">
<div style="font-family:  Century Gothic; font-size: 12px;width:  500px;opacity:.8;position:absolute;top:630px;"><span style="font-weight: bold;background-color: lightsteelblue;color:white;">Светлосиним  </span>цветом отмечена площадь зоны АТО или территория, контролируемая террористами. Источник данных для нее - более 100 сообщений о столкновениях за последние несколько недель. "Соты" помечены только на тех территориях, на которых зафиксированы атаки террористов на силы АТО, подрывы или диверсии инфраструктуры и т. п. Список в открытом доступе, его ведет в он-лайне сайт <a href="https://texty.org.ua/pg/blog/infoviz/read/54313/Karta_bojovyh_dij_detalnyj_opys_togo_jak?a_offset=">texty.org.ua</a> (открывать в новом окне).
 </div> 
​
</body>
</html>
    