D3 Examples

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<html >
<head>
​
<script src="https://d3js.org/d3.v3.min.js"></script>
​
<script src="d3.v3.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/queue.v1.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
​
<style>
​
.oblast {
      font-family: arial;
        font-size: 16px;
        color:black;
      }
.axis {
  font: 10px sans-serif;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
​
.axis .domain {
  fill: none;
  stroke: #000;
  stroke-opacity: .3;
  stroke-width: 10px;
  stroke-linecap: round;
}
​
.axis .halo {
  fill: none;
  stroke: #ddd;
  stroke-width: 8px;
  stroke-linecap: round;
}
​
.slider .handle {
  fill: #fff;
  stroke: #000;
  stroke-opacity: .5;
  stroke-width: 1.25px;
  pointer-events: none;
}   
​
.places,.leg{font-family: Century Gothic; font-size:12px; pointer-events: none;}
.annotation{
position:absolute;
top:250px;
left:500px;
width: 300px;
font-family: Century Gothic; font-size:14px; pointer-events: none;}
​
#tooltip {
  color: #222; 
  background: #fff; 
  padding: .5em; 
  width: 200px;
  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;
      }
</style>
</head>
<body>
<div id="tooltip" class="hidden">
            <span id="what" style="font-size: 14px;" ></span>
</div>
<div id="np" class="annotation">    
За время одностороннего прекращения огня, то есть с 20 по 30 июня, террористы больше 108 раз атаковали силы АТО, которые только защищались, не предпринимая активных действий в ответ. В результате украинцы потеряли 27 человек, 69 - были ранены, о чем вчера сообщил в Тwitter МИД Украины. То есть в условиях “прекращения огня” и всевозможных “всесторонних переговоров” наши солдаты гибли и получали ранения в полтора раза чаще. 
</div>
<span style="font-family:Century Gothic;font-size: 12px; position:absolute;top:100px;left:450px;width: 350px;font-style:italic">Перетягивайте круг, что бы проследить день и место атаки террористов с 20 по 30 июня</span>
​
<span style="font-family:Century Gothic;font-size: 12px; position:absolute;top:480px;left:250px;width: 150px;font-style:italic">Наведите мышкой на круг на карте, что бы увидеть описание атаки</span>
​
<script type="text/javascript">
            //Width and height
            var w = 800;
            var h = 600;
            //Define map projection
            var projection = d3.geo.mercator()
            .center([38.13, 48.57])
            .scale(6000)
            .translate([w/4, h/2]);
            //Define path generator
            var path = d3.geo.path()
                             .projection(projection);
            //Create SVG element
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h);
            //Define quantize scale to sort data values into buckets of color
            var color = d3.scale.quantize()
                                .range(["rgb(237,248,233)","rgb(186,228,179)","rgb(116,196,118)","rgb(49,163,84)","rgb(0,109,44)"]);
                                //Colors taken from colorbrewer.js, included in the D3 download
​
                                
                        
d3.csv("dataset.csv", function(dataset) {
​
        d3.json("ua_topo.json", function(error, ua) {
    
    var color = d3.scale.linear()
    .domain([0, 71])
    .range(["white", "darkblue"])
    .interpolate(d3.interpolateHcl);
​
var subunits = topojson.feature(ua, ua.objects.states);
  svg.append("path")
            .datum(subunits)
            .attr("d", path)            
            .style("fill", "black")
            .attr("opacity", 1);
​
  var obl =  svg.append("g")
            .attr("class", "obl")
            .selectAll("path")
            .data(topojson.feature(ua, ua.objects.states).features)
            .enter().append("path")
            .attr("d", path)
            //.on("mouseover",mouseover)
            //.on("mouseout",mouseout);
            
        obl.style("fill", function (d){if(d.properties.oblname=="Донецкая"||d.properties.oblname=="Луганская")
        {return "#ccc"}
        else {return "#fff"}
        })
            //.style("fill", function (d) {
            //if(d.properties.oblname=="Cherkasy"){return "red"} 
            //else {return "steelblue"}
            //})
            .attr("opacity", 1);
     
            
////////////////////////////////////////////////////////////////////////////
               
//Load in cities data
svg.selectAll(".places")
                           .data(dataset)
                           .enter()
                           .append("text")
                           .attr("class", "places")
                            .attr("x", function(d) {
                               return projection([d.lon, d.lat])[0];
                           })
                           .attr("y", function(d) {
                               return projection([d.lon, d.lat])[1];
                           })
                           .text(function(d) {
                    return d.place});
    
    svg.selectAll(".circles")
                           .data(dataset)
                           .enter()
                           .append("circle")
                           .attr("class", "circles")
                           .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", function (d){if(d.what<20){return 2}
        else {return 4}})
                           .style("fill", function (d){
                           if(d.killed>0)
        {return "#d84b2a"}
        if(d.wounded>0)
        {return "orange"}
        if(d.place=="Донецк"||d.place=="Луганск"||d.place=="Харьков")
        {return "black"}
        else {return "#7aa25c"}
        })
                            .attr ("stroke-width", .5)
                            .attr ("stroke", "black")
                           .attr("opacity", 0)
                           .on("mouseover", function(d,i) {
        d3.select(this).attr ("stroke-width", 2.5)
    .attr ("stroke", "black");
            
    //Update the tooltip position and value
d3.select("#tooltip")
   .style("left", (d3.event.pageX+30) + "px")
     .style("top", (d3.event.pageY-30) + "px")
    .select("#what")
    .text(d.what); 
​
//Show the tooltip
d3.select("#tooltip").classed("hidden", false);
​
​
})
.on("mouseout", function(d,i) {
d3.select("#tooltip").classed("hidden", true);
d3.select(this) 
            .attr ("stroke-width", .5);
});
​
                   
       //svg.selectAll("circle").transition().delay(5000).duration(2000).style("fill", "red")
    
    
});
    
var leg = svg.append("g")
.attr("class","leg");
​
 leg.append("circle")
      .attr("cx",300)
      .attr("cy", 550)
      .attr("r", 4)
      .attr("fill", "#7aa25c");
 
 leg.append("circle")
      .attr("cx",450)
      .attr("cy", 550)
      .attr("r", 4)
      .attr("fill", "orange");
 
 leg.append("circle")
      .attr("cx",600)
      .attr("cy", 550)
      .attr("r", 4)
      .attr("fill", "#d84b2a");
        
  leg.append("text")
      .attr("x", 380)
      .attr("y", 560)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .text("атаки без жертв сил АТО");
      
  leg.append("text")
      .attr("x",510)
      .attr("y", 560)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .text("раненные");
      
  leg.append("text")
      .attr("x",650)
      .attr("y", 560)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .text("убитые");
    /////////////////////////////////////////////////////////////////////////////////////
var margin = {top: 200, right: 50, bottom: 200, left: 20},
    width = 860 - margin.left - margin.right,
    height = 500 - margin.bottom - margin.top;
​
var x = d3.scale.linear()
    .domain([20, 30])
    .range([width/2, width])
    .clamp(true);
/*
    
    svg.selectAll(".rects")
    .data(dataset)
    .enter().append("rect")
    .attr("class","rects")
      .attr("width", 10)
      .attr("x", function(d,i) { return width/2+i*12 })
      .attr("y", function(d,i) { return d.killed*5 })
      .attr("opacity", 0)
      .attr("height",  200)
      .style("fill", "red")
    */  
var brush = d3.svg.brush()
    .x(x)
    .extent([0, 0])
    .on("brush", brushed);
​
​
svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height / 2 + ")")
    .call(d3.svg.axis()
      .scale(x)
      .orient("bottom")
      .tickFormat(function(d) { return d; })
      .tickSize(0)
      .tickPadding(12))
  .select(".domain")
  .select(function() { return this.parentNode.appendChild(this.cloneNode(true)); })
    .attr("class", "halo");
​
var slider = svg.append("g")
    .attr("class", "slider")
    .call(brush);
​
slider.selectAll(".extent,.resize")
    .remove();
​
slider.select(".background")
    .attr("height", height);
​
var handle = slider.append("circle")
    .attr("class", "handle")
    .attr("transform", "translate(0," + height / 2 + ")")
    .attr("r", 9);
​
slider
    .call(brush.event)
  .transition() // gratuitous intro!
  .delay(1000)
    .duration(1750)
    .call(brush.extent([20, 20]))
    .call(brush.event);
​
function brushed() {
  var value = brush.extent()[0];
​
  if (d3.event.sourceEvent) { // not a programmatic event
    value = x.invert(d3.mouse(this)[0]);
    brush.extent([value, value]);
  }
​
  handle.attr("cx", x(value));
  //d3.select("body").style("background-color", d3.hsl(value, .8, .8));
  
  d3.selectAll(".circles").transition().attr("opacity",function(d){if(d.when<value){return 1} else {return 0}})
  //d3.selectAll(".rects").transition().duration(500).attr("opacity",function(d){if(d.when<value){return 1} else {return 0}})
   d3.selectAll(".places").transition().attr("opacity",function(d){if(d.when<value){return 1} else {return 0}})
}
​
​
});
​
​
</script>
<hr noshade size="1" width="750px" align="left">
<p></p>
<div style="font-family:  Century Gothic; font-size: 12px;width: 500px;">На карте отображены только основные сообщения об атаках террористов на украинских силовиков. Места атак указаны приблизительно по населенным пунктам, фигурировавшим в новостях</div> 
<p></p>
<div style="font-family:  Century Gothic; font-size: 10px;font-style:italic ">Данные: По материалам новостной ленты liga.net</div> 
 
</body>
</html>
    