lsquaredleland/README.md

## README.md

      
    Raw
  

              README.md
            
          
    #Hexbin Wallpaper
Try playing around changing the colours and sizing, then screenshot to use as wallpaper. Or for svg use this

  
## d3.hexbin.min.js
!function(){d3.hexbin=function(){function u(n){var r={};return n.forEach(function(n,t){var a=s.call(u,n,t)/o,e=Math.round(a),c=h.call(u,n,t)/i-(1&e?.5:0),f=Math.round(c),l=a-e;if(3*Math.abs(l)>1){var v=c-f,g=f+(f>c?-1:1)/2,m=e+(e>a?-1:1),M=c-g,d=a-m;v*v+l*l>M*M+d*d&&(f=g+(1&e?1:-1)/2,e=m)}var j=f+"-"+e,p=r[j];p?p.push(n):(p=r[j]=[n],p.i=f,p.j=e,p.x=(f+(1&e?.5:0))*i,p.y=e*o)}),d3.values(r)}function a(r){var t=0,u=0;return n.map(function(n){var a=Math.sin(n)*r,e=-Math.cos(n)*r,i=a-t,o=e-u;return t=a,u=e,[i,o]})}var e,i,o,c=1,f=1,h=r,s=t;return u.x=function(n){return arguments.length?(h=n,u):h},u.y=function(n){return arguments.length?(s=n,u):s},u.hexagon=function(n){return arguments.length<1&&(n=e),"m"+a(n).join("l")+"z"},u.centers=function(){for(var n=[],r=0,t=!1,u=0;f+e>r;r+=o,t=!t,++u)for(var a=t?i/2:0,h=0;c+i/2>a;a+=i,++h){var s=[a,r];s.i=h,s.j=u,n.push(s)}return n},u.mesh=function(){var n=a(e).slice(0,4).join("l");return u.centers().map(function(r){return"M"+r+"m"+n}).join("")},u.size=function(n){return arguments.length?(c=+n[0],f=+n[1],u):[c,f]},u.radius=function(n){return arguments.length?(e=+n,i=2*e*Math.sin(Math.PI/3),o=1.5*e,u):e},u.radius(1)};var n=d3.range(0,2*Math.PI,Math.PI/3),r=function(n){return n[0]},t=function(n){return n[1]}}();

## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Hexbin Wallpaper 1</title>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
		<script src="d3.hexbin.min.js"></script>
  </head>

	<body>
		<div id="chartArea"></div>
		<script src="js.js"></script>
	</body>

	<style>
		.hexagon {
		  fill: none;
		  stroke: #000;
		  stroke-width: .5px;
		}
	</style>

</html>

## js.js
var height = 800;
var width = 1200;
var radius = 50;


var points_lattice = [];
//vertical align is perfect....
//Horizontal align is slightly off
var xSpacing = 51.96*radius/30;
var ySpacing = 45*radius/30;
for (x = 0; x < width; x+=xSpacing) {
    var alt = false;
    for (y = 0; y < height; y+=ySpacing) {
        if (alt) {
            points_lattice.push([x+xSpacing/2,y]);
        } else {
            points_lattice.push([x,y]);
        }
        alt = !alt
    }
}

var color = d3.scale.linear()
    .domain([0, 20])
    .range(["white", "#6EA241"])
    .interpolate(d3.interpolateLab);

var hexbin = d3.hexbin()
    .size([width, height])
    .radius(radius);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)

svg.selectAll(".hexagon")
    .data(hexbin(points_lattice))
  .enter().append("path")
    .attr("class", "hexagon")
    .attr("d", hexbin.hexagon())
    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
    .style("fill", function(d) { return color(d.length); })
    .each(function(d) {
        svg.append('circle')
            .attr("cx", d.x + Math.sin(Math.PI/3)*radius)
            .attr("cy", d.y - Math.cos(Math.PI/3)*radius)
            .attr("r", 2.9)
            .style('fill', 'grey')
            .style('stroke', 'lightgreen')
        svg.append('circle')
            .attr("cx", d.x + Math.sin(Math.PI/3)*radius)
            .attr("cy", d.y + Math.cos(Math.PI/3)*radius)
            .attr("r", 2.9)
            .style('fill', 'pink')
            .style('stroke', 'lightgreen')
        svg.append('circle')
            .attr("cx", d.x)
            .attr("cy", d.y)
            .attr("r", 30) //Math.sin(Math.PI/3)*radius -> touches edge perfectly
            .style('fill', 'black')
    })

//Drawing original points
svg.selectAll('circle.data')
    .data(points_lattice)
  .enter().append('circle')
    .attr("cx", function(d) {return d[0]; })
    .attr("cy", function(d) {return d[1]; })
    .style('r', 28)
    .style('fill', 'maroon')
    .style('border-radius', 1)
    .style('stroke', 'orange')

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Hexbin Wallpaper 1</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
	<script src="d3.hexbin.min.js"></script>
	</head>

	<body>
	<div id="chartArea"></div>
	<script src="js.js"></script>
	</body>

	<style>
	.hexagon {
	fill: none;
	stroke: #000;
	stroke-width: .5px;
	}
	</style>

	</html>
	var height = 800;
	var width = 1200;
	var radius = 50;


	var points_lattice = [];
	//vertical align is perfect....
	//Horizontal align is slightly off
	var xSpacing = 51.96*radius/30;
	var ySpacing = 45*radius/30;
	for (x = 0; x < width; x+=xSpacing) {
	var alt = false;
	for (y = 0; y < height; y+=ySpacing) {
	if (alt) {
	points_lattice.push([x+xSpacing/2,y]);
	} else {
	points_lattice.push([x,y]);
	}
	alt = !alt
	}
	}

	var color = d3.scale.linear()
	.domain([0, 20])
	.range(["white", "#6EA241"])
	.interpolate(d3.interpolateLab);

	var hexbin = d3.hexbin()
	.size([width, height])
	.radius(radius);

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height)

	svg.selectAll(".hexagon")
	.data(hexbin(points_lattice))
	.enter().append("path")
	.attr("class", "hexagon")
	.attr("d", hexbin.hexagon())
	.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
	.style("fill", function(d) { return color(d.length); })
	.each(function(d) {
	svg.append('circle')
	.attr("cx", d.x + Math.sin(Math.PI/3)*radius)
	.attr("cy", d.y - Math.cos(Math.PI/3)*radius)
	.attr("r", 2.9)
	.style('fill', 'grey')
	.style('stroke', 'lightgreen')
	svg.append('circle')
	.attr("cx", d.x + Math.sin(Math.PI/3)*radius)
	.attr("cy", d.y + Math.cos(Math.PI/3)*radius)
	.attr("r", 2.9)
	.style('fill', 'pink')
	.style('stroke', 'lightgreen')
	svg.append('circle')
	.attr("cx", d.x)
	.attr("cy", d.y)
	.attr("r", 30) //Math.sin(Math.PI/3)*radius -> touches edge perfectly
	.style('fill', 'black')
	})

	//Drawing original points
	svg.selectAll('circle.data')
	.data(points_lattice)
	.enter().append('circle')
	.attr("cx", function(d) {return d[0]; })
	.attr("cy", function(d) {return d[1]; })
	.style('r', 28)
	.style('fill', 'maroon')
	.style('border-radius', 1)
	.style('stroke', 'orange')