Last active
September 15, 2015 06:05
-
-
Save jbants/0a5c0bb7198396b23762 to your computer and use it in GitHub Desktop.
bulletish chart
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var dataFlag = 1 | |
var data = [{"name":"A","value":0.15}, | |
{"name":"B","value":-0.025}, | |
{"name":"C","value":-0.35}, | |
]; | |
var data1 = [{"name":"A","value":0.012}, | |
{"name":"B","value":-0.15}, | |
{"name":"C","value":0.25}, | |
]; | |
var margin = { | |
top: 20, | |
right: 20, | |
bottom: 30, | |
left: 40 | |
}, | |
width = 150 - margin.left - margin.right, | |
height = 300 - margin.top - margin.bottom; | |
var x = d3.scale.ordinal() | |
.rangeRoundBands([0, width], .1); | |
var y = d3.scale.linear() | |
.range([height, 0]); | |
var xAxis = d3.svg.axis() | |
.scale(x) | |
.orient("bottom"); | |
var yAxis = d3.svg.axis() | |
.scale(y) | |
.orient("left"); | |
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 + ")"); | |
function init(data_val){ | |
var data = data_val | |
svg.selectAll('g').remove() | |
x.domain(data.map(function(d) { | |
return d.name; | |
})); | |
x.domain("A"); | |
y.domain(d3.extent(data, function(d) { | |
return d.value; // sets extent of graph | |
})); | |
svg.append("g") | |
.attr("class", "x axis") | |
.attr("transform", "translate(0," + height + ")") | |
.call(xAxis); | |
// zero line | |
svg.select("g") | |
.attr("class", "x axis") | |
.attr("transform", "translate(0," + y(0) + ")") | |
.call((xAxis).tickFormat("").tickSize(0)); | |
svg.append("g") | |
.attr("class", "y axis") | |
.call(yAxis) | |
.append("text") | |
.attr("transform", "rotate(-90)") | |
.attr("y", 6) | |
.attr("dy", ".71em") | |
.style("text-anchor", "end") | |
.text("m3"); | |
bar = svg.selectAll(".bar") | |
.data(data) | |
.enter() | |
.append("g") | |
.on("mouseover", mouseover) | |
.on("mousemove", function(d){ | |
div.html(d.name +"</br>"+ d.value+" m<sup>3</sup>") | |
.style("left", (d3.event.pageX) + "px") | |
.style("top", (d3.event.pageY) + "px"); | |
}) | |
.on("mouseout", mouseout); | |
var div = d3.select("body").append("div") | |
.attr("class", "tooltip") | |
.style("opacity", 1e-6); | |
function mouseover() { | |
div.transition() | |
.duration(300) | |
.style("opacity", 1); | |
} | |
function mouseout() { | |
div.transition() | |
.duration(300) | |
.style("opacity", 1e-6); | |
} | |
/* Add one rectangle for each object in the JSON dictionary. | |
* Query the object by the name field and style accordingly. | |
* TODO: change order of drawings so that overall will be on top. | |
*/ | |
bar | |
.append("rect") | |
.attr("id","avaialble") | |
.attr("class", "bar") | |
.attr("x", 25) | |
.attr("width", x.rangeBand() -30 ) | |
.attr("y", function(d) {if (d.name == "A") return y(Math.max(0,d.value));}) | |
.attr("height", function(d) {if (d.name == "A") return Math.abs(y(d.value) - y(0))}); | |
bar | |
.append("rect") | |
.attr("id","used") | |
.attr("class", "bar2") | |
.attr("x", 25) | |
.attr("width", x.rangeBand() - 30) | |
.attr("y", function(d) {if (d.name == "B") return y(Math.max(0,d.value));}) | |
.attr("height", function(d) {if (d.name == "B") return Math.abs(y(d.value) - y(0))}); | |
bar //produced water | |
.append("rect") | |
.attr("id","produced") | |
.attr("class", "bar3") | |
.attr("x", 40) | |
.attr("width", x.rangeBand()-60) | |
.attr("y", function(d) {if (d.name == "C") return y(Math.max(0,d.value));}) | |
.attr("height", function(d) {if (d.name == "C") return Math.abs(y(d.value) - y(0))}); | |
} | |
function updateData(){ | |
if (dataFlag == 1){ | |
init(data1) | |
dataFlag = 2 | |
} | |
else { | |
init(data) | |
dataFlag = 1 | |
} | |
} | |
init(data) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
div.tooltip { | |
position: absolute; | |
text-align: center; | |
width: 60px; | |
height: 20px; | |
padding: 8px; | |
font: 12px sans-serif; | |
background: white; | |
border: solid 1px #aaa; | |
border-radius: 8px; | |
pointer-events: none; | |
} | |
.bar { | |
fill: #bdc9e1; | |
opacity: 0.5; | |
} | |
.bar2 { | |
fill: #74a9cf; | |
opacity: 0.5; | |
} | |
.bar3 { | |
fill: #0570b0; | |
opacity: 0.5; | |
} | |
.bar:hover { | |
fill: brown; | |
} | |
.bars { | |
fill: red; | |
opacity: 0.2; | |
} | |
.axis { | |
font: 10px sans-serif; | |
} | |
.axis path, | |
.axis line { | |
fill: none; | |
stroke: #000; | |
shape-rendering: crispEdges; | |
} | |
/* .x.axis path { | |
display: none; | |
} */ | |
</style> | |
<body> | |
<div id="tooltip"></div> | |
<div id="option"> | |
<input name="updateButton" | |
type="button" | |
value="Update" | |
onclick="updateData()" /> | |
</div> | |
</body> | |
</html> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> | |
<script src="app.js"></script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment