Skip to content

Instantly share code, notes, and snippets.



Last active Jan 29, 2020
What would you like to do?
license: mit
<!DOCTYPE html>
<meta charset="utf-8">
<script src=""></script>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
.box {border: 5px dotted green}
svg { height: 300px; width: 500px}
<div class="box">
<rect x="50" y="50" width="400" height="200" fill="#eee" stroke="#333" stroke-width="2"></rect>
const data = [10 ,50, 100,200,50,75,333,44]
const rectWidth = 30;
const yscale = d3.scaleLinear([0, 1.05*d3.max(data)],[200,0]);'svg')
.attr('data-d', d=>d)
.attr('data-i', (d,i)=>i)
.attr('x', (d,i) => 50 + 10 + (i-1) * rectWidth)
.attr('y', d=>50+yscale(d))
.attr('width', rectWidth - 5)
.attr('height',d=>200- yscale(d))
.attr('fill', (d,i) => i%2==0 ? '#3bf' : '#456')
.attr('stroke', '#333')
.attr('stroke-width', 2)
const yAxis = d3.axisLeft().scale(yscale).tickFormat(d=>`${d} X`)'svg').append("g")
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.