Skip to content

Instantly share code, notes, and snippets.

@jeffersonrpn

jeffersonrpn/index.html

Last active November 27, 2017 18:31
Show Gist options
  • Save jeffersonrpn/9ad40d063e24a024630e8d9f295244bb to your computer and use it in GitHub Desktop.
Save jeffersonrpn/9ad40d063e24a024630e8d9f295244bb to your computer and use it in GitHub Desktop.
Download ZIP
SVG relative rotate
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SVG relative rotate</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.2/d3.js"></script>
<style media="screen">
body,
html {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="chart"></div>
<script>
var data = [
[23,25,70,79,71,59,63,55,45,41,54,74,66,1,36,67,35,32,29,78,22,72,44,42,6,24,26,33,53,48,9,27,50,80,28,81,16,5,19,77,56,40,17,68,49,65,21,75,10,46,14,11,4,64,13,43,12,18,34,47,51,60,76,73,39,3,15,30,58,7,52,31,69,37,62,8,20,38,2,61,57,82,110,120,118,86,100,103,96,84,98,105,108,88,92,94,113,109,106,116,93,117,112,99,89,115,97,90,101,85,114,119,102,83,91,107,95,104,87,111],
[23,25,55,45,41,54,1,36,35,32,29,22,44,42,6,24,26,33,53,48,9,27,50,28,16,5,19,56,40,17,49,21,10,46,14,11,4,13,43,12,18,34,47,51,39,3,15,30,7,52,31,37,8,20,38,2,57,71,59,78,68,60,76,73,74,65,72,75,58,66,80,63,69,81,62,70,64,67,79,61,77,82,110,120,118,86,100,103,96,84,98,105,108,88,92,94,113,109,106,116,93,117,112,99,89,115,97,90,101,85,114,119,102,83,91,107,95,104,87,111],
[1,2,3,4,5,6,7,8,10,14,11,13,12,9,15,16,17,19,18,20,24,22,23,21,25,35,32,56,40,29,49,45,44,46,42,41,54,26,43,33,53,34,47,51,39,48,55,30,27,52,31,37,50,28,38,36,57,71,59,78,68,60,76,73,74,65,72,75,58,66,80,63,69,81,62,70,64,67,79,61,77,82,110,120,118,86,100,103,96,84,98,105,108,88,92,94,113,109,106,116,93,117,112,99,89,115,97,90,101,85,114,119,102,83,91,107,95,104,87,111],
[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,24,22,23,21,25,35,32,56,40,29,49,45,44,46,42,41,54,26,43,33,53,34,47,51,39,48,55,30,27,52,31,37,50,28,38,36,57,71,59,78,68,60,76,73,74,65,72,75,58,66,80,63,69,81,62,70,64,67,79,61,77,82,110,120,118,86,100,103,96,84,98,105,108,88,92,94,113,109,106,116,93,117,112,99,89,115,97,90,101,85,114,119,102,83,91,107,95,104,87,111],
[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,33,32,34,35,36,54,40,43,56,53,49,47,51,39,48,55,45,44,52,46,37,50,42,38,41,57,71,59,78,68,60,76,73,74,65,72,75,58,66,80,63,69,81,62,70,64,67,79,61,77,82,110,120,118,86,100,103,96,84,98,105,108,88,92,94,113,109,106,116,93,117,112,99,89,115,97,90,101,85,114,119,102,83,91,107,95,104,87,111],
[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,75,73,74,76,72,77,78,79,80,81,82,110,120,118,86,100,103,96,84,98,105,108,88,92,94,113,109,106,116,93,117,112,99,89,115,97,90,101,85,114,119,102,83,91,107,95,104,87,111],
[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,76,75,77,78,79,80,81,82,110,120,118,86,100,103,96,84,98,105,108,88,92,94,113,109,106,116,93,117,112,99,89,115,97,90,101,85,114,119,102,83,91,107,95,104,87,111],
[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,108,99,110,97,98,101,100,102,103,105,107,109,104,106,111,119,118,120,115,116,113,117,112,114],
[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120]
];
var
margin = 20,
lineHeight = 10,
strokeWidth = 0.7,
groupMargin = 2,
lines = data.length;
var
width = 240 - (margin * 2),
height = (lines*(lineHeight+groupMargin)) - margin,
realwidth = 800,
realheight = 300,
min = 1,
max = 120,
minO = -130,
maxO = -45;
var x = d3.scaleLinear().domain([min, max]).range([0, width]);
var angle = d3.scaleLinear().domain([min, max]).range([minO, maxO]);
var color = d3.scaleSequential(d3.interpolateCool).domain([min, max]);
var svg = d3.select('#chart').append('svg')
.attr('version', '1.1')
.attr('viewBox', '0 0 '+(width + (margin*2))+' '+(height + (margin*2)))
.attr('width', '100%');
var group = svg.append('g')
.classed('group', true)
.attr("transform", "translate(" + margin + "," + margin + ")");
group.selectAll('.lines')
.data(data)
.enter().append('g')
.attr('class', function(d, i) { return 'group-'+i; })
.attr('transform', function(d, i) { return 'translate(0, '+((lineHeight+groupMargin)*i)+')'; })
.selectAll('line')
.data(function(d) { return d; })
.enter().append('line')
.attr('x1', function(d, i) { return x(i); })
.attr('y1', 0)
.attr('x2', function(d, i) { return x(i)+lineHeight; })
.attr('y2', 0)
.attr('transform', function(d, i) { return 'rotate('+angle(d)+' '+x(i)+' 0)'; } )
.style('stroke-width', strokeWidth)
.style('stroke-linecap', 'round')
.style('stroke', function(d, i) { return color(d); });
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment