TheMcMurder/index.html

## readme.md

      
    Raw
  

              readme.md
            
          
    This is something I built as a concept of randomizing art for my wife. It is brute force and perhaps later I will revisit it and optimize it.

  
## index.html
<!DOCTYPE html>
<html>
	<head>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
  		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
		<title>Random Bars</title>
	</head>
	<body>
		<div id='vis'></div>
		<script type="text/javascript" src='randombars.js'></script>
	</body>
</html>

## randombars.js
//**********************************************************************************
// This is something I built as a concept of randomizing art for my wife.
//	It is brute force and perhaps later I will revisit it and optimize it.
//**********************************************************************************

var win_width = $(window).width(), win_height = $(window).height();

var max_height = 300
var min_height = 30
var number_of_entries = 1000
var columns = 30
var svg_width = win_width
var svg_height = win_height
var color = get_color_scale()
var colorscale_length = color.length
var bar_width = svg_width/columns;


if (max_height > svg_height){
	max_height = svg_height
}

//bar height array
var dataset = new Array();

for (var i = 0; i < number_of_entries; i++){
	dataset.push(randomFromInterval(min_height, max_height))
}

//Create SVG element
var svg = d3.select('#vis')
			.append('svg')
			.attr('width', svg_width)
			.attr('height', svg_height);

var bars = svg.selectAll('.bars')
	.data(dataset)

//**********************************************************************************
// Enter
//**********************************************************************************
bars.enter()
	.append('rect');

//**********************************************************************************
// Update (merge)
//**********************************************************************************
bars.attr('width', bar_width)
	.attr('height', function(d){return d})
	.attr('class', 'bars')
	.style('fill', function(d,i){
		return color[randomFromInterval(0, color.length-1)]
	})
	.attr('id', function(d,i){
		return 'Individual_Rectangle'+i
	})
	.attr('x', function (d,i){
		return ((i%columns) * bar_width)

	})
	.attr('y', function (d,i){
		var bar_number = +d3.select(this).attr('id').replace('Individual_Rectangle', '')
		var bar_above = bar_number - columns;

		if (bar_above < 0){
			return 0;
		}
		else{
			var temp_rect = d3.select('#Individual_Rectangle' + bar_above)
			return temp_rect.node().getBBox().height + temp_rect.node().getBBox().y
		}
	});

//**********************************************************************************
// exit
//**********************************************************************************
bars.exit()
	.remove();
function randomFromInterval(from,to)
{
	return Math.floor(Math.random()*(to-from+1)+from);
}
function get_color_scale(){
	return ['#000000','#555555','#999999','#BEBEBE','#D3D3D3','#F0F0F0','#F5F5F5']
	// return ['#D9EBFD','#B7DAF5','#90c4e4','#73B0D7','#4E8CBA','#31689B']
}
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<title>Random Bars</title>
	</head>
	<body>
	<div id='vis'></div>
	<script type="text/javascript" src='randombars.js'></script>
	</body>
	</html>
	//**********************************************************************************
	// This is something I built as a concept of randomizing art for my wife.
	// It is brute force and perhaps later I will revisit it and optimize it.
	//**********************************************************************************

	var win_width = $(window).width(), win_height = $(window).height();

	var max_height = 300
	var min_height = 30
	var number_of_entries = 1000
	var columns = 30
	var svg_width = win_width
	var svg_height = win_height
	var color = get_color_scale()
	var colorscale_length = color.length
	var bar_width = svg_width/columns;


	if (max_height > svg_height){
	max_height = svg_height
	}

	//bar height array
	var dataset = new Array();

	for (var i = 0; i < number_of_entries; i++){
	dataset.push(randomFromInterval(min_height, max_height))
	}

	//Create SVG element
	var svg = d3.select('#vis')
	.append('svg')
	.attr('width', svg_width)
	.attr('height', svg_height);

	var bars = svg.selectAll('.bars')
	.data(dataset)

	//**********************************************************************************
	// Enter
	//**********************************************************************************
	bars.enter()
	.append('rect');

	//**********************************************************************************
	// Update (merge)
	//**********************************************************************************
	bars.attr('width', bar_width)
	.attr('height', function(d){return d})
	.attr('class', 'bars')
	.style('fill', function(d,i){
	return color[randomFromInterval(0, color.length-1)]
	})
	.attr('id', function(d,i){
	return 'Individual_Rectangle'+i
	})
	.attr('x', function (d,i){
	return ((i%columns) * bar_width)

	})
	.attr('y', function (d,i){
	var bar_number = +d3.select(this).attr('id').replace('Individual_Rectangle', '')
	var bar_above = bar_number - columns;

	if (bar_above < 0){
	return 0;
	}
	else{
	var temp_rect = d3.select('#Individual_Rectangle' + bar_above)
	return temp_rect.node().getBBox().height + temp_rect.node().getBBox().y
	}
	});

	//**********************************************************************************
	// exit
	//**********************************************************************************
	bars.exit()
	.remove();
	function randomFromInterval(from,to)
	{
	return Math.floor(Math.random()*(to-from+1)+from);
	}
	function get_color_scale(){
	return ['#000000','#555555','#999999','#BEBEBE','#D3D3D3','#F0F0F0','#F5F5F5']
	// return ['#D9EBFD','#B7DAF5','#90c4e4','#73B0D7','#4E8CBA','#31689B']
	}