Skip to content

Instantly share code, notes, and snippets.

@dankronstal

dankronstal/index.html

Last active February 5, 2016 22:02
Show Gist options
  • Save dankronstal/707da197ede46755b5cc to your computer and use it in GitHub Desktop.
Save dankronstal/707da197ede46755b5cc to your computer and use it in GitHub Desktop.
Download ZIP
Wings
Raw
readme.md

I wasn't quite sure what sort of handle to hang on this one. It's basically just a horizontal bar chart, but I wanted to play with drawing svg paths, so tarted it up a little. If I was less lazy I'd use two data sets, one for each side.

Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<title>Wing Chart</title>
</head>
<style>
.YlGnBu .q0-5{fill:rgb(255,255,204)} .YlGnBu .q1-5{fill:rgb(161,218,180)} .YlGnBu .q2-5{fill:rgb(65,182,196)} .YlGnBu .q3-5{fill:rgb(44,127,184)} .YlGnBu .q4-5{fill:rgb(37,52,148)}
</style>
<body>
<div class="content"></div>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var size = 20, size2 = 10;
var offset = 2;
var radiusSmall = 5;
var radiusLarge = 20;
var cut = -30;
var length = 200;
var colors1 = ['rgb(255,255,217)','rgb(237,248,177)','rgb(199,233,180)','rgb(127,205,187)','rgb(65,182,196)','rgb(29,145,192)','rgb(34,94,168)','rgb(37,52,148)','rgb(8,29,88)'];
var colors2 = ['rgb(255,255,204)','rgb(255,237,160)','rgb(254,217,118)','rgb(254,178,76)','rgb(253,141,60)','rgb(252,78,42)','rgb(227,26,28)','rgb(189,0,38)','rgb(128,0,38)']
//var data = [{value:100, color:"gray"}, {value:90, color:"green"}, {value:70, color:"blue"}, {value:65, color:"red"}, {value:20, color:"yellow"}];
var data = [
{name:"first", value:364.5},
{name:"second", value:364.5},
{name:"third", value:338},
{name:"fourth", value:312.5},
{name:"fifth", value:220.5},
{name:"sixth", value:144.5},
{name:"seventh", value:128},
{name:"eighth", value:112.5},
{name:"ninth", value:84.5},
{name:"tenth", value:72},
{name:"eleventh", value:18},
{name:"twelfth", value:18}];
var colors3 = d3.scale.category20c();
var svg1 = d3.select(".content").append("svg")//.attr("viewBox",function(){ return "0 0 "+length+" "+data.length * size; });
.attr("width",function(){ return (data.length-1) * size + radiusLarge * data.length + radiusSmall + length + size2 + 1; })
.attr("height", function(){ return 500+(size * data.length + radiusSmall + radiusLarge+1); });
var path1 = svg1.selectAll("path").data(data).enter()
.append("path")
.attr("d", function(d, i){
var valueAdj = d.value - (i > 0 && d.value == data[i-1].value ? 6 : 0);
var zero = ((i) * size);
var zeroInv = (data.length * offset + (data.length-i) * size);
var lengthTop = valueAdj+zeroInv;
var lengthBottom = -1 * (lengthTop + size + cut * (data.length-i));
return "M "+zero+" 0 l "+size+" 0 l 0 "+(radiusSmall)+" a "+radiusLarge+" "+radiusLarge+", 1, 0, 0, "+radiusLarge+" "+radiusLarge+" l "+lengthTop+" 0 l "+(cut*(data.length-i))+" "+(size2*(data.length-i))+" l "+(lengthBottom)+" 0 a "+radiusLarge+" "+radiusLarge+", 0, 0, 1, "+(-1 * size)+" "+(-1 * size)+" l 0 "+(-1*(radiusSmall+size+size*(data.length-i)));
})
.attr("stroke", "#333")
.style("fill",function(d,i){ /*return colors1[data.length-i]*/ return colors3(i); })
.attr("opacity","1")
.on("mouseover", function(d, i){
d3.select(this).style("fill",function(){return d3.rgb(d3.select(this).style("fill")).darker();})
})
.on("mouseout", function(d, i){
d3.select(this).style("fill",function(){return d3.rgb(d3.select(this).style("fill")).brighter();})
});
var svg2 = d3.select(".content").append("svg")
//.attr("width",function(){ return data.length * size + radiusLarge * data.length + radiusSmall + length + size + 1; })
.attr("width",function(){ return data[0].value+(-1*cut*(data.length-1)); })
.attr("height", function(){ return 500+(size * data.length + radiusSmall + radiusLarge+1); });
var path2 = svg2.selectAll("path").data(data).enter()
.append("path")
.attr("d", function(d, i){
var valueAdj = d.value - (i > 0 && d.value == data[i-1].value ? 6 : 0);
var zero = (data.length * offset + (i) * size);
var zeroInv = (data.length * offset + (data.length-i) * size);
var lengthTop = valueAdj+zeroInv;
var lengthBottom = -1 * (lengthTop + size + cut * (data.length-i));
var farEnd = svg2.attr("width");
return "m "+(farEnd/2-valueAdj+size)+" "+(size+radiusSmall)+" l "+lengthTop+" 0 a "+radiusLarge+" "+radiusLarge+", 0, 0, 0, "+radiusLarge+" "+(-1*radiusLarge)+" l "+size+" 0 l 0 "+(size2*(data.length-i))+" a "+((-1)*radiusLarge)+" "+(radiusLarge)+", 0, 0, 1, "+(-1*size)+" 20 l "+lengthBottom+" 0 l "+(cut*(data.length-i))+" "+(-1*(data.length-i)*size2);
})
.attr("stroke", "#333")
.style("fill",function(d,i){ return colors3(data.length-i); })
.attr("opacity",function(d, i){return "1";/*return i == data.length-1 ? "1" : "0";*/})
.on("mouseover", function(d, i){
d3.select(this).style("fill",function(){return d3.rgb(d3.select(this).style("fill")).darker();})
})
.on("mouseout", function(d, i){
d3.select(this).style("fill",function(){return d3.rgb(d3.select(this).style("fill")).brighter();})
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment