README.md

## README.md

      
          Raw
        
        
              README.md
            
          
    Art Maybe?

What started out as a donut chart has become something else entirely....

  
## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Art - Lines</title>
		<script src="http://d3js.org/d3.v3.min.js"></script>
  </head>

	<body>
		<div id="chartArea" style="border:2px dashed black">
		</div>
		<script src="main_donut.js"></script>
	</body>

</html>

## main_donut.js
generateDonut()

function generateDonut(){
	var divH = window.innerHeight;
	var divW = window.innerWidth;

	var margin = {top: 10, right: 10, bottom: 10, left: 10};
	var w = divW - margin.left - margin.right;
	h = divH - margin.top - margin.bottom;
	smallestDim = h < w ? h : w;

	var outerRadius = smallestDim / 3.5
	var innerRadius = outerRadius / 1.5;

	var data = [];
	var numberOfBars = 3000;
	var strokeSmall = '.1px'
	var strokeNotSmall = '5px'
	var baseColour = "maroon"

	for(var x = 0; x < numberOfBars; x ++){
		if(Math.random()*4 > 1){
			data.push(Math.random()*250 + 50)
		} else{
			data.push(-1 * Math.random()*100)
		}
	}

	var pie = d3.layout.pie()
		.value(function(d){ return 10; })
	  .padAngle(.010);

	var arc = d3.svg.arc()
	    .padRadius(outerRadius) //is this line even necessary???

	var coordinates = [];

	var svg = d3.select("#chartArea").append("svg")
	    .attr("width", w)
	    .attr("height", h)
	  .append("g")
	    .attr("transform", "translate(" + w / 2 + "," + (h) / 2 + ")");

	svg.selectAll("path")
	    .data(pie(data))
	  .enter().append("path")
	    .each(function(d) {
	    	d.outerRadius = innerRadius + d.data

	    	coordinates.push({
	    		alpha: (d.startAngle + d.endAngle)/2,
	    		l: d.outerRadius
	    	})
	    })
	    .attr("d", arc)
	    .style('fill-opacity', 0)

	svg.append('circle')
		.attr("r", innerRadius)
		.style("stroke", baseColour)
		.style("stroke-width", "2.5px")
		.style("fill", 'none')
		.on('mouseover', function() {
			styleChange(d3.select(this), "2.5px")

			styleChange(d3.selectAll(".v-lines").filter(function(d, i) {
				return i % parseInt(Math.random()*100 + 50) === 0
			}), strokeSmall)
		})


	drawVerticals(coordinates, baseColour, 'v-lines');

	function drawVerticals(coordinates, colour, group){
		coordinates = coordinates.sort(function(a, b){
			return a.alpha - b.alpha;
		})
			svg.selectAll("line") //data is bound to each line
			.data(coordinates)
			.enter().append('line')
	    .style("stroke-width", strokeSmall)
	    .style("stroke", colour)
	    .classed("v-lines", true)
	    .attr({
	    	//Try experimenting with commenting random returns -> beautiful results
				x1: function(d, i){ //this and/or
					if(i%2)
						return d.l * Math.sin(d.alpha)
				},
				x2: function(d, i){
					if((i+1)%2)
						return innerRadius * Math.sin(d.alpha)
				},
				y1: function(d,i){
					if((i+1)%2)
						return -1 * d.l * Math.cos(d.alpha)
				},
				y2: function(d, i){//this and/or
					if(i%2)
						return -1 * innerRadius * Math.cos(d.alpha)
				}
	    })
	    .on('mouseover', function(){
	    	styleChange(d3.select(this), strokeSmall)
	    })
	}
	function styleChange(toChange, strokeOriginal){
		toChange
			.style("stroke", 'lime')
    		.style("stroke-width", strokeNotSmall)
  		.transition()
	    	.duration(1000)
	    	.ease('linear')
	    	.style("stroke-width", strokeOriginal)
	    	.style("stroke", baseColour)
	}
}


## thumbnail.png

      
          Raw
        
        
              thumbnail.png