Built with blockbuilder.org
forked from sugeerth's block: fresh block
Built with blockbuilder.org
forked from sugeerth's block: fresh block
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<title>Selection</title> | |
<style> | |
.highlight { | |
stroke: green; | |
stroke-width: 1px | |
} | |
.node rect { | |
cursor: move; | |
fill-opacity: 1; | |
} | |
.node text { | |
pointer-events: none; | |
text-shadow: 0 1px 0 #fff; | |
} | |
.link { | |
fill: none; | |
stroke-opacity: 1; | |
text-shadow: 0 1px 0 #fff; | |
} | |
.link:hover { | |
stroke-opacity: 1; | |
stroke: red; | |
} | |
</style> | |
<body> | |
<p id="chart"> | |
<div id="viz"> | |
<script src="http://d3js.org/d3.v3.js"></script> | |
<script> | |
var dataArray = [10,20,30] | |
var width = 500 | |
var height = 10 | |
var scale = d3.scale.linear() | |
.domain([0,60]) | |
.range([0,width]); | |
var colorScale = d3.scale.linear() | |
.domain([0,40]) | |
.range(["red","blue"]); | |
var axis = d3.svg.axis() | |
.ticks(5) | |
.scale(scale) | |
var canvas = d3.select("body").select("p").append("svg") | |
.attr("width",500) | |
.attr("height",500) | |
.append("g") | |
.attr("transform", "translate(10,30)") | |
var bars = canvas.selectAll("rect") | |
.data(dataArray, function(d) { return d; }) | |
.enter() | |
.append("rect") | |
.attr("width", function(d) { return scale(d)}) | |
.attr("height", function(d) { return height}) | |
.attr("y", function(d,i) { return d * i}) | |
.attr("class",function(d,i) { return "first"+1} ) | |
.attr("id",function(d,i) { return "first"+i} ) | |
.classed("highlighted", function(d) { return d === 30; }) | |
.style("fill", function(d) { return d === 30? "gray" : colorScale(d); }) | |
canvas.append("g") | |
.attr("transform", "translate(0,90)") | |
.attr("width", 30) | |
.call(axis) | |
</script> | |
</body> | |
</html> |