Old school D3 from simpler times

All examples By author By category About

almccon

Full window Github gist

WWSD #7: d3 mouse interaction

Working with spatial data

Example #7

Simple mouse interaction with d3.js. Mouse over a city and it will nudge all the other cities out of the way.

NOTE: we made this on-the-fly in the Stamen dataviz workshop, so it's pretty rough!

forked from mbostock's block: U.S. Counties TopoJSON

forked from enjalot's block: WWSD #5: d3 + TopoJSON

forked from enjalot's block: WWSD #7: d3 mouse interaction

<!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()
	.scale(width/2/Math.PI)
	.translate([width/2,height/2]);
  
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;
  
  var circleScale = d3.scale.sqrt()
  		.domain([0,30000000])
  		.range([1,30])
  
  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: function(d) { return circleScale(d.properties.pop_max) },
    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 mouseover", d3.select(d));
    d3.select(this)
      .classed("selected",true)
    	.attr("r", 20);
    var currentX =  projection(d.geometry.coordinates)[0];
    var currentY =  projection(d.geometry.coordinates)[1];
    
    svg.selectAll("circle")
    	.filter(function(d) { return !d3.select(this).classed("selected");})
    	//.style("fill","blue")
    	.transition()
    	.attr("cx", function(d) {
      	var x = projection(d.geometry.coordinates)[0]; 
      	// TODO: add cooler math here!
      	if (x < currentX) {
      	  return x -10;
        } else {
          return x +10;
        }
    	})
    	.attr("cy", function(d) {
      	var y = projection(d.geometry.coordinates)[1]; 
      	// TODO: add cooler math here!
      	if (y < currentY) {
      	  return y -10;
        } else {
          return y +10;
        }
    	});
    
    d3.select(this)
    	.attr("cx", function(d) {
        return projection(d.geometry.coordinates)[0];
   	  })
      .attr("cy", function(d) {
        return projection(d.geometry.coordinates)[1];
   	  })
  })
  .on("mouseout", function(d) {
    d3.select(this)
      .classed("selected",false)
    	.transition()
      .attr("r",5);
    
    svg.selectAll("circle")
    	//.filter(function(d) { return !d.classed("selected");})
    	//.style("fill","gray")
    	.transition()
    	.attr("cx", function(d) {
        return projection(d.geometry.coordinates)[0];
    	})
    	.attr("cy", function(d) {
        return projection(d.geometry.coordinates)[1];
   	  })
  })
  
  
  
});
});

</script>

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

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

https://d3js.org/d3.geo.projection.v0.min.js