Skip to content

Instantly share code, notes, and snippets.

@codingforpleasure

codingforpleasure/.block

Last active December 17, 2017 11:56
Show Gist options
  • Save codingforpleasure/f177e778200085e9978cccdb6a278bf7 to your computer and use it in GitHub Desktop.
Save codingforpleasure/f177e778200085e9978cccdb6a278bf7 to your computer and use it in GitHub Desktop.
Download ZIP
fresh block
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<script>
var dataArray = [20,40,50,60];
var width = 500;
var height = 500;
var widthScale = d3.scaleLinear()
.domain(d3.extent(dataArray)) //Input
.range([0,width]); //Output
var axis = d3.svg.axis().
scale(widthScale);
var colorScale = d3.scaleLinear()
.domain(d3.extent(dataArray))//Input
.range(["red","blue"]);//Output
var canvas = d3.select("body")
.append("svg")
.attr("width",500)
.attr("height",500)
.append("g")
.attr("transform","translate(50,50)")//used for moving group to the right/down/rotate it
.call(axis);
var bars = canvas.selectAll("rect")
.data(dataArray)
.enter()
.append("rect")
.attr("width",function(d){return widthScale(d)})
.attr("height", 50)
.attr("fill",function(d){return colorScale(d)})
.attr("y", function(d,i){return (i*100)});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment