nikhilkabbin/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
forked from vikkya's block: positive negative bar v4

  
## data.csv

          
            name
            value

            
              A
              -15

            
              B
              -20

            
              C
              -22

            
              D
              -18

            
              E
              2

            
              F
              6

            
              G
              26

            
              H
              18

## iconarray.js
(function (global, factory) {
	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('d3-scale')) :
	typeof define === 'function' && define.amd ? define(['exports', 'd3-scale'], factory) :
	(factory((global.d3_iconarray = global.d3_iconarray || {}),global.d3));
}(this, function (exports,d3) { 'use strict';

	function iconArrayLayout() {
		var width = undefined;
		var height = undefined;
		var widthFirst = true;
		var maxDimension = undefined;

		function layout(data){
			//work our missing height, width stuff

			setDimensions(data.length);

			return data.map(function(d,i){
				return {
					data:d,
					position:position(i)
				};
			});
		}

		function position(i){
			if(isNaN(width) || isNaN(height)){
				console.log('Warning: width/height undefined')
				return 0;
			}
			if(widthFirst){
				return {
					x: i % width,
					y: Math.floor( i/width )
				};
			}else{
				return {
					x: Math.floor( i/height ),
					y: i % height
				};
			}
		}

		function setDimensions(l){
			//neither width or height is defined
			if(isNaN(width) && isNaN(height)){
				console.log('no width or height');
				if(widthFirst){
					width = Math.ceil( Math.sqrt(l) );
					height = Math.ceil( l / width );
				}else{
					height = Math.ceil( Math.sqrt(l) );
					width = Math.ceil( l / height );
				}
			}else if(isNaN(width)){	//width undefined
				width = Math.ceil( l / height );
			}else if(isNaN(height)){ //height undefined
				height = Math.ceil( l / width );
			}
		}

		layout.maxDimension = function(x){
			var itemPosition = position(x);
			if(widthFirst){
				var x = Math.max(itemPosition.x, width);
				return Math.max(x, itemPosition.y);
			}
			var y = Math.max(itemPosition.y, height);
			return Math.max(y, itemPosition.x);

		}

		layout.position = function(x){
			return position(x);
		}

		layout.width = function(x){
			if(x === undefined) return width;
			width = x;
			return layout;
		};

		layout.height = function(x){
			if(x === undefined) return height;
			height = x;
			return layout;
		};

		layout.widthFirst = function(b){
			if(b === undefined) return widthFirst;
			widthFirst = b;
			return layout;
		};

		return layout;
	};

	function iconArrayScale(){

		var domain = [0,100];
		var range = [0,100];
		var gapInterval = 10;
		var gapSize = 0; //default no change
		var notionalScale = d3.scaleLinear()
								.domain(domain)
								.range(range);

		function scale(domainValue){
			var rangeValue = 20;
			var adjustedDomainValue = domainValue + Math.floor(domainValue/gapInterval)*gapSize;
			//console.log(notionalScale.domain());
			return rangeValue = notionalScale(adjustedDomainValue);
		}

		function rescale(){
			//calculate an adjusted domain
			var domainLength = (domain[1] - domain[0]) * gapSize;
			var gaps = Math.ceil( domainLength/ gapInterval );
			var adjustedDomain = [ domain[0], domain[1] + gaps ];

			//calculate an adjusted range

			notionalScale.domain(adjustedDomain)
					.range(range);
		}

		scale.gapInterval = function(x){
			if(!x) return gapInterval;
			gapInterval = x;
			rescale();
			return scale;
		};

		scale.gapSize = function(x){
			if(isNaN(x)) return gapSize;
			gapSize = x;
			rescale();
			return scale;
		}

		scale.domain = function(array){
			if(!array) return domain;
			domain = array;
			rescale();
			return scale;
		};

		scale.range = function(array){
			if(!array) return range;
			range = array;
			rescale();
			return scale;
		};

		rescale();
		return scale;
	}

	var version = "0.0.1";

	exports.version = version;
	exports.layout = iconArrayLayout;
	exports.scale = iconArrayScale;

}));

## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }

.bar--positive {
  fill: #E7F1D3;
}

.bar--negative {
  fill: #FAE9EB;
}

.axis text {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

  </style>
</head>

<body>
  <div id="viz"></div>
  <script>
    var respondents = [
      {"category": "A", "resp": 100},
      {"category": "B", "resp": 30},
      {"category": "C", "resp": 90},
      {"category": "D", "resp": 16},
      {"category": "E", "resp": 50},
      {"category": "F", "resp": 75},
      {"category": "G", "resp": 34},
      {"category": "H", "resp": 14}
    ]
var margin = {top: 20, right: 30, bottom: 40, left: 30},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
var svg = d3.select('#viz').append('svg')
    .attr('width', width + margin.left + margin.right)
    .attr('height', height + margin.top + margin.bottom);

var xScale = d3.scaleLinear()
    .range([0, width])
		.domain([-30,30])

var yScale = d3.scaleBand()
    .range([0, height])
		.domain(['A','B','C','D','E','F','G','H'])
		.padding(0.1)
		.paddingOuter(0.5)
var xAxis = d3.axisBottom().tickSize(0).scale(xScale);
var yAxis = d3.axisLeft().tickSize(0).scale(yScale);
var g = svg.append('g')
    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

d3.csv("data.csv", function(error, data) {
// console.log(data)
  var bars = svg.selectAll(".bar")
      .data(data)
    .enter().append("rect")
      .attr("class", function(d) { return "bar bar--" + (d.value < 0 ? "negative" : "positive"); })
  .attr('id', function(d){ return d.name })
      .attr("x", function(d) { return xScale(Math.min(0, d.value)); })
      .attr("y", function(d) { return yScale(d.name); })
      .attr("width", function(d) { return Math.abs(xScale(d.value) - xScale(0)); })
      .attr("height", yScale.bandwidth());

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(20," + (height - 20) + ")")
      .call(xAxis)
  		.call(g => g.select(".domain").remove())

  svg.append("g")
      .attr("class", "y axis")
      .attr("transform", "translate("+ 20+",0)")
      .call(yAxis)
  		.call(g => g.select(".domain").remove())
 var foo = [
   {category: "A", value: 20, senti:-15},
   {category: "B", value: 30, senti:-22},
   {category: "C", value: 19, senti:-20},
   {category: "D", value: 10,senti:-18},
   {category: "E", value: 10,senti:2},
   {category: "F", value: 10,senti:6},
   {category: "G", value: 10,senti:26},
   {category: "H", value: 10,senti:18}
 ]
//  var arr = [1,2,3,4,5,6,7,8,9,10]
//  arr.map(function(d,i){
//    bars.select("circle")
//   	.data(data)
//   	.enter().append('circle')
// //   	.attr('cx', function(d){ return xScale(d.value)})
//   	.attr('cx', function(d){
// return d.value < 0 ? xScale(-i): xScale(i)})
//   	.attr('cy', function(d){ return yScale(d.name)})
// //   	.attr('dy', function(d){console.log(Math.abs(xScale(d.value) - xScale(0)));return yScale.bandwidth()/2})
//   	.attr('r', 2)
//  })
 var numofcircles = 0;
 function createCirlces(obj){
   var arr = []
   d3.range(obj.value).forEach(function(d){
     arr.push({value: d, senti: obj.senti, cat: d.category})
   })
   return arr
 }
 var gc = svg.selectAll('circles')
 	.data(foo)
 .enter()
 .append('g')
 .attr('class', 'lastCirlce')
 .attr('transform', function(d){
   return `translate(${xScale(0)}, ${yScale(d.category)})`
 })
 .selectAll('g')
 .data(function(d){
   return createCirlces(d)
 })
 .enter().append('circle')
 .attr('class', 'currCircle')
 .attr('cx', function(d, i){
   numofcircles = Math.floor((Math.abs(xScale(d.senti) - xScale(0))) / 11.45)
   console.log(i < numofcircles, d.cat)
//    console.log(i, numofcircles, Math.abs(xScale(d.senti) - xScale(0)), yScale.bandwidth());
   return d.senti < 0 ? -d.value * 12 : d.value * 12})
//  .attr('cy', function(d){return yScale(d.category)})
 .attr('r', function(d){ return 5})
//  console.log(gc._groups[0])
// gc._groups[0].forEach(function(d){
//   console.log(d)
//   d3.select(d)
//   .

});
  </script>
</body>
	(function (global, factory) {
	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('d3-scale')) :
	typeof define === 'function' && define.amd ? define(['exports', 'd3-scale'], factory) :
	(factory((global.d3_iconarray = global.d3_iconarray \|\| {}),global.d3));
	}(this, function (exports,d3) { 'use strict';

	function iconArrayLayout() {
	var width = undefined;
	var height = undefined;
	var widthFirst = true;
	var maxDimension = undefined;

	function layout(data){
	//work our missing height, width stuff

	setDimensions(data.length);

	return data.map(function(d,i){
	return {
	data:d,
	position:position(i)
	};
	});
	}

	function position(i){
	if(isNaN(width) \|\| isNaN(height)){
	console.log('Warning: width/height undefined')
	return 0;
	}
	if(widthFirst){
	return {
	x: i % width,
	y: Math.floor( i/width )
	};
	}else{
	return {
	x: Math.floor( i/height ),
	y: i % height
	};
	}
	}

	function setDimensions(l){
	//neither width or height is defined
	if(isNaN(width) && isNaN(height)){
	console.log('no width or height');
	if(widthFirst){
	width = Math.ceil( Math.sqrt(l) );
	height = Math.ceil( l / width );
	}else{
	height = Math.ceil( Math.sqrt(l) );
	width = Math.ceil( l / height );
	}
	}else if(isNaN(width)){ //width undefined
	width = Math.ceil( l / height );
	}else if(isNaN(height)){ //height undefined
	height = Math.ceil( l / width );
	}
	}

	layout.maxDimension = function(x){
	var itemPosition = position(x);
	if(widthFirst){
	var x = Math.max(itemPosition.x, width);
	return Math.max(x, itemPosition.y);
	}
	var y = Math.max(itemPosition.y, height);
	return Math.max(y, itemPosition.x);

	}

	layout.position = function(x){
	return position(x);
	}

	layout.width = function(x){
	if(x === undefined) return width;
	width = x;
	return layout;
	};

	layout.height = function(x){
	if(x === undefined) return height;
	height = x;
	return layout;
	};

	layout.widthFirst = function(b){
	if(b === undefined) return widthFirst;
	widthFirst = b;
	return layout;
	};

	return layout;
	};

	function iconArrayScale(){

	var domain = [0,100];
	var range = [0,100];
	var gapInterval = 10;
	var gapSize = 0; //default no change
	var notionalScale = d3.scaleLinear()
	.domain(domain)
	.range(range);

	function scale(domainValue){
	var rangeValue = 20;
	var adjustedDomainValue = domainValue + Math.floor(domainValue/gapInterval)*gapSize;
	//console.log(notionalScale.domain());
	return rangeValue = notionalScale(adjustedDomainValue);
	}

	function rescale(){
	//calculate an adjusted domain
	var domainLength = (domain[1] - domain[0]) * gapSize;
	var gaps = Math.ceil( domainLength/ gapInterval );
	var adjustedDomain = [ domain[0], domain[1] + gaps ];

	//calculate an adjusted range

	notionalScale.domain(adjustedDomain)
	.range(range);
	}

	scale.gapInterval = function(x){
	if(!x) return gapInterval;
	gapInterval = x;
	rescale();
	return scale;
	};

	scale.gapSize = function(x){
	if(isNaN(x)) return gapSize;
	gapSize = x;
	rescale();
	return scale;
	}

	scale.domain = function(array){
	if(!array) return domain;
	domain = array;
	rescale();
	return scale;
	};

	scale.range = function(array){
	if(!array) return range;
	range = array;
	rescale();
	return scale;
	};

	rescale();
	return scale;
	}

	var version = "0.0.1";

	exports.version = version;
	exports.layout = iconArrayLayout;
	exports.scale = iconArrayScale;

	}));
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }

	.bar--positive {
	fill: #E7F1D3;
	}

	.bar--negative {
	fill: #FAE9EB;
	}

	.axis text {
	font: 10px sans-serif;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	</style>
	</head>

	<body>
	<div id="viz"></div>
	<script>
	var respondents = [
	{"category": "A", "resp": 100},
	{"category": "B", "resp": 30},
	{"category": "C", "resp": 90},
	{"category": "D", "resp": 16},
	{"category": "E", "resp": 50},
	{"category": "F", "resp": 75},
	{"category": "G", "resp": 34},
	{"category": "H", "resp": 14}
	]
	var margin = {top: 20, right: 30, bottom: 40, left: 30},
	width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;
	var svg = d3.select('#viz').append('svg')
	.attr('width', width + margin.left + margin.right)
	.attr('height', height + margin.top + margin.bottom);

	var xScale = d3.scaleLinear()
	.range([0, width])
	.domain([-30,30])

	var yScale = d3.scaleBand()
	.range([0, height])
	.domain(['A','B','C','D','E','F','G','H'])
	.padding(0.1)
	.paddingOuter(0.5)
	var xAxis = d3.axisBottom().tickSize(0).scale(xScale);
	var yAxis = d3.axisLeft().tickSize(0).scale(yScale);
	var g = svg.append('g')
	.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

	d3.csv("data.csv", function(error, data) {
	// console.log(data)
	var bars = svg.selectAll(".bar")
	.data(data)
	.enter().append("rect")
	.attr("class", function(d) { return "bar bar--" + (d.value < 0 ? "negative" : "positive"); })
	.attr('id', function(d){ return d.name })
	.attr("x", function(d) { return xScale(Math.min(0, d.value)); })
	.attr("y", function(d) { return yScale(d.name); })
	.attr("width", function(d) { return Math.abs(xScale(d.value) - xScale(0)); })
	.attr("height", yScale.bandwidth());

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(20," + (height - 20) + ")")
	.call(xAxis)
	.call(g => g.select(".domain").remove())

	svg.append("g")
	.attr("class", "y axis")
	.attr("transform", "translate("+ 20+",0)")
	.call(yAxis)
	.call(g => g.select(".domain").remove())
	var foo = [
	{category: "A", value: 20, senti:-15},
	{category: "B", value: 30, senti:-22},
	{category: "C", value: 19, senti:-20},
	{category: "D", value: 10,senti:-18},
	{category: "E", value: 10,senti:2},
	{category: "F", value: 10,senti:6},
	{category: "G", value: 10,senti:26},
	{category: "H", value: 10,senti:18}
	]
	// var arr = [1,2,3,4,5,6,7,8,9,10]
	// arr.map(function(d,i){
	// bars.select("circle")
	// .data(data)
	// .enter().append('circle')
	// // .attr('cx', function(d){ return xScale(d.value)})
	// .attr('cx', function(d){
	// return d.value < 0 ? xScale(-i): xScale(i)})
	// .attr('cy', function(d){ return yScale(d.name)})
	// // .attr('dy', function(d){console.log(Math.abs(xScale(d.value) - xScale(0)));return yScale.bandwidth()/2})
	// .attr('r', 2)
	// })
	var numofcircles = 0;
	function createCirlces(obj){
	var arr = []
	d3.range(obj.value).forEach(function(d){
	arr.push({value: d, senti: obj.senti, cat: d.category})
	})
	return arr
	}
	var gc = svg.selectAll('circles')
	.data(foo)
	.enter()
	.append('g')
	.attr('class', 'lastCirlce')
	.attr('transform', function(d){
	return `translate(${xScale(0)}, ${yScale(d.category)})`
	})
	.selectAll('g')
	.data(function(d){
	return createCirlces(d)
	})
	.enter().append('circle')
	.attr('class', 'currCircle')
	.attr('cx', function(d, i){
	numofcircles = Math.floor((Math.abs(xScale(d.senti) - xScale(0))) / 11.45)
	console.log(i < numofcircles, d.cat)
	// console.log(i, numofcircles, Math.abs(xScale(d.senti) - xScale(0)), yScale.bandwidth());
	return d.senti < 0 ? -d.value * 12 : d.value * 12})
	// .attr('cy', function(d){return yScale(d.category)})
	.attr('r', function(d){ return 5})
	// console.log(gc._groups[0])
	// gc._groups[0].forEach(function(d){
	// console.log(d)
	// d3.select(d)
	// .

	});
	</script>
	</body>