Skip to content

Instantly share code, notes, and snippets.

@seemantk

seemantk/README.md

Last active February 19, 2016 07:57
Show Gist options
  • Save seemantk/85d6a60852b0c79da57b to your computer and use it in GitHub Desktop.
Save seemantk/85d6a60852b0c79da57b to your computer and use it in GitHub Desktop.
Download ZIP
fresh block
Raw
README.md
Raw
index.html
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment