Skip to content

Instantly share code, notes, and snippets.

@sugeerth

sugeerth/README.md

Last active February 19, 2016 21:30
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 sugeerth/ebcf02eb69f5bedd86d8 to your computer and use it in GitHub Desktop.
Save sugeerth/ebcf02eb69f5bedd86d8 to your computer and use it in GitHub Desktop.
Download ZIP
fresh block
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>Selection</title>
<style>
.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(15)
.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)
.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("fill", function(d) { return colorScale(d)})
.attr("class",function(d,i) { return "first"+1} )
.attr("id",function(d,i) { return "first"+i} )
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