Skip to content

Instantly share code, notes, and snippets.

@hobbes7878

hobbes7878/data.js

Last active December 29, 2015 02:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save hobbes7878/7603691 to your computer and use it in GitHub Desktop.
Save hobbes7878/7603691 to your computer and use it in GitHub Desktop.
Download ZIP
Horizontal Bar Chart
Raw
data.js
var dataset = {
data1 :
{ chem:"Amitriptyline",
data : [
{"value":.8244,"name":"Least"},
{"value":.7776,"name":"Less"},
{"value":.4922,"name":"More"},
{"value":.4567,"name":"Most"}
]
},
data2 :
{ chem:"Chlordiazepoxide",
data : [
{"value":2.4612,"name":"Least"},
{"value":1.7757,"name":"Less"},
{"value":2.1758,"name":"More"},
{"value":1.6227,"name":"Most"}
]
},
data3 :
{ chem:"Citalopram",
data : [
{"value":.8233,"name":"Least"},
{"value":.7527,"name":"Less"},
{"value":.6630,"name":"More"},
{"value":.6009,"name":"Most"}
]
},
data4 :
{ chem:"Clomipramine",
data : [
{"value":.4244,"name":"Least"},
{"value":.4755,"name":"Less"},
{"value":.3365,"name":"More"},
{"value":.0572,"name":"Most"}
]
},
data5 :
{ chem:"Clonazepam",
data : [
{"value":-.0347,"name":"Least"},
{"value":.0652,"name":"Less"},
{"value":-.0561,"name":"More"},
{"value":-.2712,"name":"Most"}
]
},
data6 :
{ chem:"Codeine",
data : [
{"value":-.2784,"name":"Least"},
{"value":-.3838,"name":"Less"},
{"value":-.5201,"name":"More"},
{"value":-.5216,"name":"Most"}
]
},
data7 :
{ chem:"Diamorphine",
data : [
{"value":.7328,"name":"Least"},
{"value":.4939,"name":"Less"},
{"value":.5070,"name":"More"},
{"value":.1090,"name":"Most"}
]
},
data8 :
{ chem:"Diazepam",
data : [
{"value":3.9737,"name":"Least"},
{"value":3.0211,"name":"Less"},
{"value":3.5334,"name":"More"},
{"value":2.2732,"name":"Most"}
]
},
data9 :
{ chem:"Dihydrocodeine",
data : [
{"value":.1729,"name":"Least"},
{"value":-.1650,"name":"Less"},
{"value":-.2543,"name":"More"},
{"value":-.3342,"name":"Most"}
]
},
data10 :
{ chem:"Dosulepin",
data : [
{"value":.6950,"name":"Least"},
{"value":.8666,"name":"Less"},
{"value":.7762,"name":"More"},
{"value":.6478,"name":"Most"}
]
},
data11 :
{ chem:"Duloxetine",
data : [
{"value":1.8047,"name":"Least"},
{"value":1.4235,"name":"Less"},
{"value":1.0066,"name":"More"},
{"value":.6370,"name":"Most"}
]
},
data12 :
{ chem:"Escitalopram",
data : [
{"value":2.6973,"name":"Least"},
{"value":2.4430,"name":"Less"},
{"value":2.1885,"name":"More"},
{"value":.9907,"name":"Most"}
]
},
data13 :
{ chem:"Fentanyl",
data : [
{"value":2.0435,"name":"Least"},
{"value":1.6067,"name":"Less"},
{"value":.9642,"name":"More"},
{"value":.3947,"name":"Most"}
]
},
data14 :
{ chem:"Fluoxetine",
data : [
{"value":1.7537,"name":"Least"},
{"value":1.3515,"name":"Less"},
{"value":1.0267,"name":"More"},
{"value":1.3098,"name":"Most"}
]
},
data15 :
{ chem:"Fluvoxamine",
data : [
{"value":1.1208,"name":"Least"},
{"value":.9691,"name":"Less"},
{"value":.3515,"name":"More"},
{"value":.0999,"name":"Most"}
]
},
data16 :
{ chem:"Imipramine",
data : [
{"value":1.0628,"name":"Least"},
{"value":.5309,"name":"Less"},
{"value":.3724,"name":"More"},
{"value":-.1753,"name":"Most"}
]
},
data17 :
{ chem:"Lofepramine",
data : [
{"value":.2387,"name":"Least"},
{"value":.6471,"name":"Less"},
{"value":.3891,"name":"More"},
{"value":.2462,"name":"Most"}
]
},
data18 :
{ chem:"Loprazolam",
data : [
{"value":.6819,"name":"Least"},
{"value":.7483,"name":"Less"},
{"value":.7897,"name":"More"},
{"value":-.1708,"name":"Most"}
]
},
data19 :
{ chem:"Lorazepam",
data : [
{"value":.3479,"name":"Least"},
{"value":.4738,"name":"Less"},
{"value":.1191,"name":"More"},
{"value":-.1302,"name":"Most"}
]
},
data20 :
{ chem:"Lormetazepam",
data : [
{"value":1.3249,"name":"Least"},
{"value":1.3574,"name":"Less"},
{"value":1.9809,"name":"More"},
{"value":.0037,"name":"Most"}
]
},
data21 :
{ chem:"Midazolam",
data : [
{"value":.6635,"name":"Least"},
{"value":1.1505,"name":"Less"},
{"value":1.1657,"name":"More"},
{"value":.4597,"name":"Most"}
]
},
data22 :
{ chem:"Moclobemide",
data : [
{"value":.9300,"name":"Least"},
{"value":.7468,"name":"Less"},
{"value":.4626,"name":"More"},
{"value":-.0621,"name":"Most"}
]
},
data23 :
{ chem:"Nitrazepam",
data : [
{"value":1.6746,"name":"Least"},
{"value":1.0775,"name":"Less"},
{"value":1.1045,"name":"More"},
{"value":.4565,"name":"Most"}
]
},
data24 :
{ chem:"Nortriptyline",
data : [
{"value":.0716,"name":"Least"},
{"value":.0252,"name":"Less"},
{"value":-.0182,"name":"More"},
{"value":-.5223,"name":"Most"}
]
},
data25 :
{ chem:"Oxazepam",
data : [
{"value":.9286,"name":"Least"},
{"value":1.7845,"name":"Less"},
{"value":2.3820,"name":"More"},
{"value":.3179,"name":"Most"}
]
},
data26 :
{ chem:"Oxycodone",
data : [
{"value":1.6959,"name":"Least"},
{"value":1.2570,"name":"Less"},
{"value":1.1806,"name":"More"},
{"value":.4422,"name":"Most"}
]
},
data27 :
{ chem:"Paracetamol",
data : [
{"value":.1245,"name":"Least"},
{"value":.1448,"name":"Less"},
{"value":.0360,"name":"More"},
{"value":-.0642,"name":"Most"}
]
},
data28 :
{ chem:"Paroxetine",
data : [
{"value":.6087,"name":"Least"},
{"value":.5560,"name":"Less"},
{"value":.3368,"name":"More"},
{"value":.4178,"name":"Most"}
]
},
data29 :
{ chem:"Pethidine",
data : [
{"value":-.0322,"name":"Least"},
{"value":.6920,"name":"Less"},
{"value":-.0047,"name":"More"},
{"value":.3203,"name":"Most"}
]
},
data30 :
{ chem:"Phenelzine",
data : [
{"value":1.0138,"name":"Least"},
{"value":.5961,"name":"Less"},
{"value":1.6852,"name":"More"},
{"value":.2048,"name":"Most"}
]
},
data31 :
{ chem:"Sertraline",
data : [
{"value":1.5307,"name":"Least"},
{"value":1.3492,"name":"Less"},
{"value":1.1818,"name":"More"},
{"value":.8405,"name":"Most"}
]
},
data32 :
{ chem:"Temazepam",
data : [
{"value":5.4255,"name":"Least"},
{"value":4.3842,"name":"Less"},
{"value":4.5546,"name":"More"},
{"value":3.5195,"name":"Most"}
]
},
data33 :
{ chem:"Tramadol",
data : [
{"value":-.2073,"name":"Least"},
{"value":-.4565,"name":"Less"},
{"value":-.5104,"name":"More"},
{"value":-.6482,"name":"Most"}
]
},
data34 :
{ chem:"Venlafaxine",
data : [
{"value":3.6215,"name":"Least"},
{"value":3.1085,"name":"Less"},
{"value":2.6869,"name":"More"},
{"value":2.5475,"name":"Most"}
]
},
data35 :
{ chem:"Zaleplon",
data : [
{"value":.5936,"name":"Least"},
{"value":-.2935,"name":"Less"},
{"value":.0395,"name":"More"},
{"value":-.1700,"name":"Most"}
]
},
data36 :
{ chem:"Zolpidem",
data : [
{"value":6.9583,"name":"Least"},
{"value":4.6562,"name":"Less"},
{"value":3.8212,"name":"More"},
{"value":2.5546,"name":"Most"}
]
},
data37 :
{ chem:"Zopiclone",
data : [
{"value":1.7301,"name":"Least"},
{"value":1.5217,"name":"Less"},
{"value":1.5264,"name":"More"},
{"value":.6235,"name":"Most"}
]
},
};
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://underscorejs.org/underscore.js"></script>
<script src="js/data.js" type="text/javascript" charset="utf-8"></script>
<style>
.bar.positive {
stroke:black;
stroke-width:1;
stroke-right-width:4;
border-left-width: 0;
}
.bar.negative {
stroke:black;
stroke-width:1;
border-right-width: 0;
}
.bar:hover{
stroke:orange;
stroke-width:2;
}
.axis text {
font: 14px Garamond, serif;
}
.axis path,
.axis line {
fill: none;
stroke:black;
stroke-width:1px;
shape-rendering: crispEdges;
}
.x.axis line{
stroke: #000;
}
.y.axis line{
stroke:black;
}
.title {
font: bold 24px monospace;
}
.enter {
}
.update {
fill: #333;
}
.exit {
fill: brown;
}
.tip{
font: 26px monospace, Garamond, serif;
opacity:0;
}
.lab{
font: 16px Garamond, serif;
}
.ENG{
font: 12px Garamond, serif;
}
.instruct{
font: 12px Arial, sans-serif;
font-style: italic;
}
.pointer{
stroke:red;
stroke-width:2px;
opacity:0;
fill:red;
}
.pause{
stroke:grey;
stroke-width:3px;
fill:white;
opacity: 0;
}
.play{
stroke:grey;
stroke-width:3px;
fill:white;
opacity:0;
}
</style>
</head>
<title>Bar Chart with Negative Values</title>
<body>
<script>
var margin = {top: 70, right: 45, bottom: 10, left: 10},
width = 400 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
var x = d3.scale.linear()
.range([0, width])
var y = d3.scale.ordinal()
.rangeRoundBands([0, height], .2);
var xAxis = d3.svg.axis()
.scale(x)
.ticks(6)
.orient("top");
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
//Format ticks
var percent = d3.format("+1%");
xAxis.tickFormat(percent);
function update(data) {
//Make sure 0 is in the domain if both numbers are positive or negative.
var x_extent = d3.extent(data.data, function(d) { return +d.value ; });
if(x_extent[0]*x_extent[1]<0){
//opposite signs
x.domain(x_extent).nice();
}else if(x_extent[0]<0){
//both negative
x.domain([_.min(x_extent),0])
}else{
//both positive
x.domain([0,_.max(x_extent)])
};
y.domain(data.data.map(function(d) { return d.name; }));
var titles = svg.selectAll(".title")
.data(data.chem.split(""),function(d,i){return d+i;});
//update
titles.attr("class","title update")
.transition()
.duration(750)
.attr("x", function(d, i) { return i * 16; });
//enter
titles.enter().append("text")
.attr("class","title enter")
.attr("y", -50)
.attr("x", function(d, i) { return i * 16; })
.style("fill-opacity", 1e-6)
.text(function(d) { return d; })
.transition()
.duration(750)
.attr("y", -35)
.style("fill-opacity", 1);
titles.exit()
.attr("class", "title exit")
.transition()
.duration(750)
.attr("y", -20)
.style("fill-opacity", 1e-6)
.remove();
var labs = svg.selectAll(".lab")
.data(data.data);
labs.enter().append("text").attr("class","lab");
labs
.text( function(d){return d.name;} )
.attr("transform",function(d){ return "translate("+(width+10)+","+ (y(d.name)+ (y.rangeBand()/2)+(this.getComputedTextLength()/2) )+")rotate(-35)";});
labs.exit()
.remove();
var ENG = svg.selectAll(".ENG")
.data(data.data);
ENG.enter()
.append("text")
.attr("class","ENG")
.attr("x",0)
.attr("y",height+10);
ENG
.text("ENG")
.transition().duration(1000)
.attr("x",x(0)-11.5);
ENG.exit()
.remove();
var bars = svg.selectAll(".bar")
.data(data.data);
bars.enter().append("rect")
.attr("width",0)
.attr("cursor","pointer")
.attr("x", function(d) { return d.value < 0 ? x(0) : x(Math.min(0, d.value)); })
.on("click",
function(){
onclick();
if(clicker == 1)
{
clearInterval(interval),
clicker = 0,
pausing.transition().duration(600)
.style("opacity",1)
.transition().duration(600)
.style("opacity",0);
}
else
{
update(eval("dataset.data".concat(i)));
if(i < 4){i=i+1}else{i=1};
interval = setInterval(cycle,5000) ,
clicker=1,
playing.transition().duration(600)
.style("opacity",1)
.transition().duration(600)
.style("opacity",0);
};
}
)
.on("mouseover",function(d){
svg.select(".tip."+ d.name)
.style("opacity","1")
.style("fill","black");
svg.select(".pointer."+ d.name)
.style("opacity","1");
svg.selectAll(".instruct")
.transition().duration(700)
.style("opacity",1);
})
.on("mouseout",function(d){
svg.select(".tip."+ d.name)
.style("fill","grey")
.transition().duration(100)
.style("opacity","0");
svg.select(".pointer."+ d.name)
.style("opacity","0");
svg.selectAll(".instruct")
.transition().duration(700)
.style("opacity",0);
})
;
bars
.transition().duration(1000)
.attr("class", function(d) { return d.value < 0 ? "bar negative" : "bar positive"; })
.attr("y", function(d) { return y(d.name); })
.attr("height", y.rangeBand())
.style("fill", function(d) { return d.value < 0 ? "steelblue" : "#800000"; })
.attr("x", function(d) { return x(Math.min(0, d.value)); })
.attr("width", function(d) { return Math.abs(x(d.value) - x(0)); });
bars.exit()
.remove();
var onclick = function(){
var bar = d3.selectAll(".bar");
bar
.transition().duration(60)
.attr("height",y.rangeBand()-4)
.attr("y", function(d) { return y(d.name)+2; })
.attr("width", function(d) { return Math.abs(x(d.value) - x(0)-4); })
.attr("x", function(d) { return x(Math.min(0, d.value))+2; })
.transition().duration(60)
.attr("height",y.rangeBand())
.attr("y", function(d) { return y(d.name); })
.attr("width", function(d) { return Math.abs(x(d.value) - x(0)); })
.attr("x", function(d) { return x(Math.min(0, d.value)); });
};
var tips = svg.selectAll(".tip")
.data(data.data);
tips.enter().append("text").attr("class",function(d){return "tip "+d.name;})
.attr("y",-33)
.attr("x",width-50);
tips
.text(function(d){ return percent(d.value) ;});
tips.exit()
.remove();
//Update x-axis
svg.select(".x.axis")
.transition()
.duration(1000)
.call(xAxis);
svg.selectAll(".y.axis")
.transition()
.duration(1000)
.attr("x1", x(0))
.attr("x2", x(0));
var pointers = svg.selectAll(".pointer")
.data(data.data);
pointers.enter().append("polygon")
.attr("class",function(d){return "pointer "+d.name;});
pointers
.transition()
.duration(1000)
.attr("points",function(d){ return x(d.value)+",-2 "+(x(d.value)-5)+",-10 "+(x(d.value)+5)+",-10";});
pointers.exit().remove();
};
svg.append("g")
.attr("class", "x axis")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.append("line")
.attr("class", "y axis")
.attr("y2", height)
.attr("x1", 0)
.attr("x2", 0);
var i = 1,
clicker = 1;
update(eval("dataset.data".concat(i)));
if(i < 4){i=i+1}else{i=1};
var cycle = function(){update(eval("dataset.data".concat(i)));if(i < 37){i=i+1}else{i=1};};
var interval = setInterval(cycle,5000);
svg.append("polygon")
.attr("class", "play")
.attr("points",(width/2+20)+","+(height/2)+" "+(width/2-20)+","+(height/2-20)+" "+(width/2-20)+","+(height/2+20));;
console.log(eval("dataset.data".concat(i,".value")));
// Play/Pause Instructions
svg.append("rect")
.attr("class","instruct")
.attr("x",-10)
.attr("y",height-5)
.attr("height",18)
.attr("width",113)
.style("fill", "white")
.style("opacity",0);
svg.append("text")
.attr("class","instruct")
.text("Click to pause/play.")
.attr("x",-5)
.attr("y",height+8)
.style("opacity",0);
// Play/Pause button
svg.append("rect")
.attr("class", "pause")
.attr("width",13)
.attr("height",40)
.attr("x", width/2 - (10))
.attr("y", height/2 - (40/2));
svg.append("rect")
.attr("class", "pause")
.attr("width",13)
.attr("height",40)
.attr("x", width/2 + (10))
.attr("y", height/2 - (40/2));
svg.append("polygon")
.attr("class", "play")
.attr("points",(width/2+20)+","+(height/2)+" "+(width/2-20)+","+(height/2-20)+" "+(width/2-20)+","+(height/2+20));
var pausing = svg.selectAll(".pause");
var playing = svg.selectAll(".play");
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment