lsquaredleland/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="https://d3js.org/d3.v4.js"></script>
		<script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>
  </head>

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

</html>

## main_donut.js
const divH = window.innerHeight;
const divW = window.innerWidth;

const margin = {top: 10, right: 10, bottom: 10, left: 10};
const width = divW - margin.left - margin.right;
const height = divH - margin.top - margin.bottom;
const smallestDim = height < width ? height : width;

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

const data = [];
const strokeSmall = '.1px'
const strokeLarge = '5px'
const baseColour = "maroon"

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

var pie = d3.pie()
	.value((d) => 10)
  .padAngle(.010);

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

var svg = d3.select("#chartArea").append("svg")
    .attrs({width, height})
  .append("g")
    .attr("transform", `translate(${width/2},${height/2})`);

const coordinates = pie(data).map((d) => Object.create({
		alpha: (d.startAngle + d.endAngle)/2,
   	l: innerRadius + d.data
	})
)

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(getRandomLines(), strokeSmall);
	})


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

function drawVerticals(coordinates, stroke, group){
	coordinates = coordinates.sort((a, b) => a.alpha - b.alpha);

	svg.selectAll("line")
		.data(coordinates)
		.enter().append('line')
    .style("stroke-width", strokeSmall)
    .style("stroke", stroke)
    .classed("v-lines", true)
    .attrs({
			x1: (d, i) => i%2 ? d.l * Math.sin(d.alpha) : null,
			x2: (d, i) => (i+1)%2 ? innerRadius * Math.sin(d.alpha) : null,
			y1: (d, i) => (i+1)%2 ? -1 * d.l * Math.cos(d.alpha) : null,
			y2: (d, i) => i%2 ? -1 * innerRadius * Math.cos(d.alpha): null
    })
    .on('mouseover', function() {
    	styleChange(d3.select(this), strokeSmall)
    });
}

const getRandomLines = () => d3.selectAll(".v-lines")
	.filter((d, i) => i % parseInt(Math.random()*100 + 50) === 0);

const styleChange = (toChange, strokeOriginal) => {
	toChange
		.styles({"stroke-width": strokeLarge, stroke: 'lime'})
		.transition()
    	.duration(1000)
    	.ease(d3.easeLinear)
    	.styles({"stroke-width": strokeOriginal, stroke: baseColour});
}

// // Use some sort of timer to randomly select items to apply style changes
d3.interval(function() {
	styleChange(getRandomLines(), strokeSmall);
	styleChange(d3.select('circle'), "2.5px");
}, 1000);

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Art - Lines</title>
	<script src="https://d3js.org/d3.v4.js"></script>
	<script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>
	</head>

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

	</html>
	const divH = window.innerHeight;
	const divW = window.innerWidth;

	const margin = {top: 10, right: 10, bottom: 10, left: 10};
	const width = divW - margin.left - margin.right;
	const height = divH - margin.top - margin.bottom;
	const smallestDim = height < width ? height : width;

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

	const data = [];
	const strokeSmall = '.1px'
	const strokeLarge = '5px'
	const baseColour = "maroon"

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

	var pie = d3.pie()
	.value((d) => 10)
	.padAngle(.010);

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

	var svg = d3.select("#chartArea").append("svg")
	.attrs({width, height})
	.append("g")
	.attr("transform", `translate(${width/2},${height/2})`);

	const coordinates = pie(data).map((d) => Object.create({
	alpha: (d.startAngle + d.endAngle)/2,
	l: innerRadius + d.data
	})
	)

	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(getRandomLines(), strokeSmall);
	})


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

	function drawVerticals(coordinates, stroke, group){
	coordinates = coordinates.sort((a, b) => a.alpha - b.alpha);

	svg.selectAll("line")
	.data(coordinates)
	.enter().append('line')
	.style("stroke-width", strokeSmall)
	.style("stroke", stroke)
	.classed("v-lines", true)
	.attrs({
	x1: (d, i) => i%2 ? d.l * Math.sin(d.alpha) : null,
	x2: (d, i) => (i+1)%2 ? innerRadius * Math.sin(d.alpha) : null,
	y1: (d, i) => (i+1)%2 ? -1 * d.l * Math.cos(d.alpha) : null,
	y2: (d, i) => i%2 ? -1 * innerRadius * Math.cos(d.alpha): null
	})
	.on('mouseover', function() {
	styleChange(d3.select(this), strokeSmall)
	});
	}

	const getRandomLines = () => d3.selectAll(".v-lines")
	.filter((d, i) => i % parseInt(Math.random()*100 + 50) === 0);

	const styleChange = (toChange, strokeOriginal) => {
	toChange
	.styles({"stroke-width": strokeLarge, stroke: 'lime'})
	.transition()
	.duration(1000)
	.ease(d3.easeLinear)
	.styles({"stroke-width": strokeOriginal, stroke: baseColour});
	}

	// // Use some sort of timer to randomly select items to apply style changes
	d3.interval(function() {
	styleChange(getRandomLines(), strokeSmall);
	styleChange(d3.select('circle'), "2.5px");
	}, 1000);