Hexagons

by nancynancy

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-hexbin.v0.2.min.js"></script>
<pre id="data">
myX,myY
1,2
2,4
3,6
4,7
5,4
6,9
7,2
8,2
9,3
</pre>

CSS

.axis text {
  font: 10px sans-serif;
}

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

.hexagon {
  fill: white;
  stroke: white;
  stroke-width: 1px;
}

pre {
  display:none;
  }

JavaScript

/* The goal is to show how hexbins work by juxtaposing two figures:
One a scatterplot of diverse sparsity, and the corresponding 
hexbins scaled by concentration of points.*/

var margin = {top: 20, right: 20, bottom: 20, left: 20};        
var width = 400 - margin.left - margin.right;
var height = 400 - margin.top - margin.bottom;
var x = d3.scaleLinear().range([0, width])
var y = d3.scaleLinear().range([height, 0])
var xAxis = d3.axisBottom(x).ticks(10);
var yAxis = d3.axisLeft(y).ticks(10);
var mydata = d3.csvParse(d3.select("pre#data").text());
mydata.forEach(function(d){
     d.myX = +d.myX;
     d.myY = +d.myY;
});

x.domain([0, 20]);
y.domain([0, 20]);

//Function to call when you mouseover a node
function mover(d) {
	var el = d3.select(this)
		.transition()
		.duration(10)		  
		.style("fill-opacity", 0.5);
}

//Mouseout function
function mout(d) { 
	var el = d3.select(this)
	   .transition()
	   .duration(500)
	   .style("fill-opacity", 1);
};


function delclick(d){
	var el = d3.select(this)
  		.style("fill", function(d){
 				if(color(d) != color(d.y*d.x)){return color(d.y*d.x)}
        else{return "green"}
      })
};
////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////
var color = d3.scaleLinear()
    .domain([0, 50000])
    .range(["pink", "#CA3211"])
    .interpolate(d3.interpolateLab);

var panel = 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 + ")");
 
 panel.append("rect")
    .attr("width", width)
    .attr("height", height) 
    .style('opacity', 0.7)
    .style('fill', '#E6E6E6');
  
/*panel.append("g")
    .attr("class", "y axis")
    .call(yAxis);

panel.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis); */
   ...