Skip to content

Instantly share code, notes, and snippets.

@orb

orb/.block

Last active January 29, 2020 17:46
Show Gist options
  • Save orb/9ad0bf04c5888d39d26a87217f14f164 to your computer and use it in GitHub Desktop.
Save orb/9ad0bf04c5888d39d26a87217f14f164 to your computer and use it in GitHub Desktop.
Download ZIP
chart
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v5.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
.box {border: 5px dotted green}
svg { height: 300px; width: 500px}
</style>
</head>
<body>
<div class="box">
<svg>
<g>
<rect x="50" y="50" width="400" height="200" fill="#eee" stroke="#333" stroke-width="2"></rect>
<g>
</svg>
</div>
<script>
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]);
d3.select('svg')
.selectAll('rect')
.data(data)
.enter().append('rect')
.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`)
d3.select('svg').append("g")
.attr('transform','translate(40,50)')
.call(yAxis)
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment