D3 Examples - WWSD #7: d3 mouse interaction

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
path {
  fill: #ccc;
  stroke: #fff;
  stroke-width: .5px;
}
  
circle {
  fill: #fff;
  fill-opacity: 0.4;
  stroke: #111;
}
  
circle.selected {
    fill:red;
  }
  
path.active {
  fill: #ff7f7f;
}
  circle.active {
    fill: #f00;
  }
​
​
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
  <script src="//d3js.org/d3.geo.projection.v0.min.js"></script>
<script>
​
var width = 960,
    height = 500;
​
var projection = d3.geo.winkel3();
  
var path = d3.geo.path()
  .projection(projection)
​
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
​
var url = "https://enjalot.github.io/wwsd/data/world/world-110m.geojson";
var url2 = "https://enjalot.github.io/wwsd/data/world/ne_50m_populated_places_simple.geojson"
d3.json(url, function(error, countries) {
d3.json(url2, function(error, places) {
  if (error) throw error;
  
  console.log("geojson", countries, places);
 
  svg.selectAll("path")
    .data(countries.features)
  .enter().append("path")
    .attr("d", path)
  
  
  svg.selectAll("circle")
  .data(places.features)
  .enter().append("circle")
  .attr({
    r: 5,
    cx: function(d) { return projection(d.geometry.coordinates)[0]},
    cy: function(d) { return projection(d.geometry.coordinates)[1]}
  })
  .on("mouseover",function(d) {
    console.log("just had a mouse over", d);
    d3.select(this).classed("selected", true);
    svg.selectAll ("circle")
    //.filter(function(d) { return !d.classed("selected");})
    .style("fill","blue")
    .attr("cx", function(d) {
      var x= projection(d.geometry.coordinates) [0]+10;
      if (x<currentX) {
    return x -10;
      }  else
        {return x+10;
        }
  });
    
    d3.select(this)
    .attr("cx", function(d) {
      return projection(d.geometry.coordinates) [0];
    })
  
  .on("mouseout", function(d) {
    d3.select(this).classed("selected", false);
  })
  
   })
​
  });
​
</script>
​
    
WWSD #7: d3 mouse interaction

Working with spatial data

Example #7
