lsquaredleland/README.md

## README.md

      
    Raw
  

              README.md
            
          
    #Art Maybe?
To create this 'visualisation' I started with a donut chart, where that outerRadius's would not be consistant. Meaning that they had different values as seen in the foreground. From there, using the angle of the bar relative to the x-axis and the length of the outer radius, I calculated the x and y coordinates of bar's end. Which was then used to create an svg line.

  
## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Art</title>
		<script src="https://d3js.org/d3.v3.min.js"></script>
		<link rel="stylesheet" href="style.css">
  </head>

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

</html>

## main_donut.js
create();
function create(){
	data = [];
	for(var x = 0; x < 80; x ++){
		data.push(Math.random()*200 + 150 )
	}
	generateDonut(data)//data is used to generate height of invisible bars
}

function generateDonut(data){
	var divH = parseInt( d3.select("#chartArea").style("height") );
	var divW = parseInt( d3.select("#chartArea").style("width") );

	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 / 4.5,
	    innerRadius = outerRadius / 2;

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

	var arc = d3.svg.arc()
	    .padRadius(outerRadius)
	    .innerRadius(innerRadius);

	var lines = [];
	var lines2 = [];
	var valueline = d3.svg.line()
		.interpolate("step-after")  //step-after looks cool
	  .x(function(d) { return d[0]; })
	  .y(function(d) { return d[1]; });

	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;

	    	//for the lines
	    	var alpha = (d.startAngle + d.endAngle)/2;
	    	var l = d.outerRadius > outerRadius ? d.outerRadius + 20 : d.outerRadius - 20
	    	lines.push([alpha, l])
	    	lines2.push([alpha, l - 200])
	    })
	    .attr("d", arc)
	    .style('fill', 'rgba(128,0,0,.2') //change this value to see where the bars should be
	    .style('stroke', 'none');

	drawLines(lines);
	drawLines(lines2);

	function drawLines(points){
		points = points.sort(function(a, b){
			return a[0] - b[0];
		})

		for(i in points){
			var alpha = points[i][0];
			var l = points[i][1];
			var x = l * Math.sin(alpha)
			var y = l * Math.cos(alpha)
			points[i] = [x,-y]
		}
		svg.append("path")
	    .attr("class", "line")
	    .style("fill", "none")
	    .style("stroke-width", "2.5px")
	    .style("stroke", "black")
	    .attr("d", valueline(points));
	}
}

## style.css
body{
	background-color: rgba(235, 232, 193, 0.24902);
}

#chartArea {
	border: 2px dashed black;
	height: 1000px;
	width: 1000px;
}

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Art</title>
	<script src="https://d3js.org/d3.v3.min.js"></script>
	<link rel="stylesheet" href="style.css">
	</head>

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

	</html>
	create();
	function create(){
	data = [];
	for(var x = 0; x < 80; x ++){
	data.push(Math.random()*200 + 150 )
	}
	generateDonut(data)//data is used to generate height of invisible bars
	}

	function generateDonut(data){
	var divH = parseInt( d3.select("#chartArea").style("height") );
	var divW = parseInt( d3.select("#chartArea").style("width") );

	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 / 4.5,
	innerRadius = outerRadius / 2;

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

	var arc = d3.svg.arc()
	.padRadius(outerRadius)
	.innerRadius(innerRadius);

	var lines = [];
	var lines2 = [];
	var valueline = d3.svg.line()
	.interpolate("step-after") //step-after looks cool
	.x(function(d) { return d[0]; })
	.y(function(d) { return d[1]; });

	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;

	//for the lines
	var alpha = (d.startAngle + d.endAngle)/2;
	var l = d.outerRadius > outerRadius ? d.outerRadius + 20 : d.outerRadius - 20
	lines.push([alpha, l])
	lines2.push([alpha, l - 200])
	})
	.attr("d", arc)
	.style('fill', 'rgba(128,0,0,.2') //change this value to see where the bars should be
	.style('stroke', 'none');

	drawLines(lines);
	drawLines(lines2);

	function drawLines(points){
	points = points.sort(function(a, b){
	return a[0] - b[0];
	})

	for(i in points){
	var alpha = points[i][0];
	var l = points[i][1];
	var x = l * Math.sin(alpha)
	var y = l * Math.cos(alpha)
	points[i] = [x,-y]
	}
	svg.append("path")
	.attr("class", "line")
	.style("fill", "none")
	.style("stroke-width", "2.5px")
	.style("stroke", "black")
	.attr("d", valueline(points));
	}
	}
	body{
	background-color: rgba(235, 232, 193, 0.24902);
	}

	#chartArea {
	border: 2px dashed black;
	height: 1000px;
	width: 1000px;
	}