Skip to content

Instantly share code, notes, and snippets.

@fogonwater

fogonwater/.block

Last active February 21, 2019 17:50
Show Gist options
  • Save fogonwater/7f14e701c42596c90797ff57d61d636a to your computer and use it in GitHub Desktop.
Save fogonwater/7f14e701c42596c90797ff57d61d636a to your computer and use it in GitHub Desktop.
Download ZIP
rotate box tests
Raw
.block
license: mit
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<body>
<!--<textarea id="out" rows="35" cols="90"></textarea>-->
<svg width="960" height="960"></svg>
<script>
const svg = d3.select("svg"),
width = +svg.attr("width"),
height= +svg.attr("height"),
data = [{x:400, y:100}, {x:500, y:300}],
r_wide = 100,
r_high = 60
svg.selectAll('.bars1')
.data(data)
.enter().append('rect')
.attr('x', d => d.x)
.attr('y', d => d.y)
.attr('width', r_wide)
.attr('height', r_high)
.attr('opacity', .75)
.style('fill', '#fef8c1')
.style('stroke', '#999')
.attr('transform',
(d) => 'rotate(-20, ' + (r_wide/2 + d.x) +', ' + (r_high/2 + d.y) +')'
)
svg.selectAll('.bars2')
.data(data)
.enter().append('rect')
.attr('x', (d) => d.x)
.attr('y', (d) => d.y)
.attr('width', r_wide)
.attr('height', r_high)
.attr('opacity', .75)
.style('fill', 'none')
.style('stroke', '#444')
svg.append("g")
.attr("transform", "translate(100, 200)")
.append('rect')
.attr({
x: 0,
y: 0,
width: 200,
height: 100,
stroke:'#999',
fill: '#fedcc2'
})
.attr('transform', 'rotate(-25, 100,50)')
svg.append("g")
.attr("transform", "translate(100, 200)")
.append('rect')
.attr({
x: 0,
y: 0,
width: 200,
height: 100,
stroke:'#444',
fill: 'none'
})
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment