Skip to content

Instantly share code, notes, and snippets.

@nikhilkabbin
Last active July 23, 2019 20:42
Show Gist options
  • Save nikhilkabbin/41df436f67dbe6bbdf1f0c8728e0e405 to your computer and use it in GitHub Desktop.
Save nikhilkabbin/41df436f67dbe6bbdf1f0c8728e0e405 to your computer and use it in GitHub Desktop.
positive negative bar v4
license: mit
name value
A -15
B -20
C -22
D -18
E 2
F 6
G 26
H 18
(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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment