Skip to content

Instantly share code, notes, and snippets.

@lsquaredleland

lsquaredleland/README.md

Last active August 14, 2016 08:50
Show Gist options
  • Save lsquaredleland/a37d633d445fd1956392 to your computer and use it in GitHub Desktop.
Save lsquaredleland/a37d633d445fd1956392 to your computer and use it in GitHub Desktop.
Download ZIP
Rectangles or Trapezoids
Raw
README.md

#Rectangles or Trapezoids

I personnally cannot tell what whether the svgs are rectanges or trapezoids, but the inspector and code says that they are rects...but maybe the transformation does something funny? Who knows....

Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Are these rects?</title>
<script src="https://d3js.org/d3.v3.min.js"></script>
</head>
<body>
<div id="chartArea" style="border:2px dashed black">
</div>
<script src="js.js"></script>
</body>
</html>
Raw
js.js
var svg = d3.select("#chartArea").append("svg")
.attr("width", 600)
.attr("height", 600)
.append('g').attr('transform','translate(300,300)')
var num = 15
var rectWidth = 40 //Make width dependent on num
var barHeight = 190
for(var i = 0; i < num; i++){
svg.append("rect")
.attr({
width: rectWidth,
height: barHeight,
x: 0,
y: num*7.5,
fill: "#9eb6bc",
transform: 'rotate(' + (360/num * i) + ') translate('+ (-rectWidth/2) + ', 0)'
});
svg.append("rect")
.attr({
width: rectWidth/3,
height: Math.random()*barHeight,
x: 0,
y: num*7.5,
fill: "#535651",
transform: 'rotate(' + (360/num * i) + ') translate('+ (-rectWidth/3/2) + ', 0)'
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment