2 dimension beeswarm plot for fuzzy roadmapping

###Roadmap Little project given to me by @clementgraphics to turn a roadmap she (painstakingly) made in illustrator to d3. The idea was based around a beeswarm chart where bubbles centred around one dimensional axis. In this visualisation time is the one dimension but projects are also split out into different categories and represent different products.

Inspired by no collision scatterplot graph, this filterable beeswarm chart, and this answer on StackOverflow about select elements of the same category.

<!DOCTYPE html>
<meta charset="utf-8">
<head>
<style>
body {
  font: 12px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: white;
  shape-rendering: crispEdges;
}

.dot {
  stroke: #000;
  stroke-opacity: .7;
  fill-opacity: .4;
}

div.tooltip {	
	position: absolute;			
	text-align: left;
	font-family: sans-serif;			
	white-space: normal;					
	padding: 6px;				
	font-size: 12px;		
	background: #eee;	
	border: 1px solid gray;	
	border-radius: 3px;			
	pointer-events: none;
	cursor: none;
}
</style>

</head>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
// set the canvas
var margin = {top: 100, right: 300, bottom: 70, left: 200},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom,
    padding = 1, // separation between nodes
    radius = 6; // radius of bubbles
	
//parse the date / time
var parseTime = d3.time.format("%d/%m/20%y").parse;
//format the time
var formatTime = d3.time.format("%d-%m-%Y");

//say that the x-axis is a time scale
var x = d3.time.scale()
    .range([0, width]);

//say the y-axis is a categorical scale	
var y = d3.scale.ordinal()
    .rangePoints([0, height])
	
//Tooltip	
var tt = d3.select("body").append("div")	
				.attr("class", "tooltip")				
				.style("opacity", 0);	
	
// use a color scale designed for 10 different categories
var color = d3.scale.category10();

//tell d3 where the axes should go
var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

//Tell d3 to start the canvas	
var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

//read in the csv	
d3.csv("roadmap.csv", function(error, data) {
  var xVar = "StartDate",
      yVar = "category";

//read the start dates
  data.forEach(function(d) {
    d[xVar] = parseTime(d.StartDate);
    //d[yVar] = +d[yVar];
  });

var force = d3.layout.force()
    .nodes(data)
    .size([width, height])
    .on("tick", tick)
    .charge(-8)
    .gravity(0)
    //.chargeDistance(20)
	.start();

// set the axes, looking at the dates/categories, then making the scale fit the dates or the number of different categories	
  x.domain(d3.extent(data, function(d) { return d[xVar]; })).nice();
  y.domain(data.map(function(d) { return d[yVar]; }));

// Set initial positions
  data.forEach(function(d) {
    d.x = x(d[xVar]);
    d.y = y(d[yVar]);
    d.color = color(d.Product); //use as many colours as there are different categories of Product
    d.radius = radius;
  });
//draw the x-axis
  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height*1.05 + ")")
      .call(xAxis)
//draw the y axis
  svg.append("g")
      .attr("class", "y axis")
	  .attr("transform","translate(-100,10)")
      .call(yAxis)

//draw the floating dots
  var node = svg.selectAll(".dot")
      .data(data)
    .enter().append("circle")
      .attr("class", "dot")
      .attr("r", radius)
      .attr("cx", function(d) { return x(d[xVar]); })
      .attr("cy", function(d) { return y(d[yVar]); })
	  .style("fill", function(d) { return d.color; })
	  .call(force.drag); //make them draggable
	  
//This is the tooltip and another function to make the dots of the same product go darker when you hover over them
			d3.selectAll(".dot").on("mousemove", function(d) {
						d3.selectAll(".dot").filter(function(dot){return (dot.Product == d.Product)}).transition().style("fill-opacity",1);
						tt.html("Item: <strong>" + d.Item + "</strong><br>" + "Category: " + d.category +"<br>"+"Product: "+d.Product+"<br>"+"Start Date: "+formatTime(d.StartDate)+"<br>"+"ID: "+d.ExternalID)
							.style('top', d3.event.pageY - 12 + 'px')
							.style('left', d3.event.pageX + 25 + 'px')
							.style("opacity", 0.9);
							}).on("mouseout",function(d){tt.style("opacity",0); 
										     d3.selectAll('.dot')
        										.filter(function(dot){return (dot.Product == d.Product)})
											     .transition()
											     .style("fill-opacity", 0.4);
										    });
//This is the legend
  
  var legend = svg.selectAll(".legend")
      .data(color.domain())
    .enter().append("g")
      .attr("class", "legend")
      .attr("transform", function(d, i) { return "translate(300," + i * 20 + ")"; });

legend.append("rect")
      .attr("x", width - 18)
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", color);

legend.append("text")
      .attr("x", width - 24)
      .attr("y", 9)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .text(function(d) { return d; });

//the force layout stuff
  function tick(e) {
    node.each(moveTowardDataPosition(e.alpha));
    node.each(collide(e.alpha));
    node.attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; });
  }

function moveTowardDataPosition(alpha) {
    return function(d) {
      d.x += (x(d[xVar]) - d.x) * 0.1 * alpha;
      d.y += (y(d[yVar]) - d.y) * 0.1 * alpha;
    };
  }

// Resolve collisions between nodes.
  function collide(alpha) {
    var quadtree = d3.geom.quadtree(data);
    return function(d) {
      var r = d.radius + radius + padding,
          nx1 = d.x - r,
          nx2 = d.x + r,
          ny1 = d.y - r,
          ny2 = d.y + r;
      quadtree.visit(function(quad, x1, y1, x2, y2) {
        if (quad.point && (quad.point !== d)) {
          var x = d.x - quad.point.x,
              y = d.y - quad.point.y,
              l = Math.sqrt(x * x + y * y),
              r = d.radius + quad.point.radius + (d.color !== quad.point.color) * padding;
          if (l < r) {
            l = (l - r) / l * alpha;
            d.x -= x *= l;
            d.y -= y *= l;
            quad.point.x += x;
            quad.point.y += y;
          }
        }
        return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;
      });
    };
  }
});

</script>

Modified http://d3js.org/d3.v3.min.js to a secure url

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