[ Launch: BAR CHART WITH PATH ] 10333132 by roundrobin
[ Launch: BAR CHART ROUNDED CORNERS ] 10328461 by roundrobin
[ Launch: Tributary inlet ] 10328184 by roundrobin
-
-
Save roundrobin/10333132 to your computer and use it in GitHub Desktop.
BAR CHART WITH PATH
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"description":"BAR CHART WITH PATH","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/feqIuhG.png"} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function chart(config) { | |
var width = config.width || 500, // default width | |
height = config.height || 500; // default height | |
var x = config.x || 0; | |
var y = config.y || 0; | |
var data = config.data || []; | |
var margin = {top: 10, left: 10, bottom: 10, right: 10}; | |
var innerHeight = height - margin.top - margin.bottom; | |
var innerWidth = width - margin.left - margin.right; | |
var pad = 0.5; | |
var pad1 = 1 - pad; | |
var pad2 = pad; | |
//Scales | |
var xScale = d3.time.scale(); | |
var yScale = d3.scale.linear(); | |
var rangePoints = d3.scale.ordinal() | |
.domain(d3.range(data.length)) | |
.rangePoints([0, innerWidth], pad1); | |
var o = d3.scale.ordinal().domain(data).rangeBands([0, innerWidth], pad2, 0); | |
var offsetX = 0; | |
var offsetY = 0; | |
var rx = 5; | |
var ry = 5; | |
var borderRadius = 0; | |
var barWidth = (o.rangeBand() - rx*2); | |
var borderRadius = 5; | |
function bar(selection) { | |
// generate chart here, using `width` and `height` | |
//console.log("Initialized", selection.data(), data); | |
var g; | |
if(!config.container){ | |
g = d3.select("svg"); | |
}else{ | |
g = config.container; | |
} | |
g = g.append("g") | |
.attr({ | |
"class" : "chart", | |
"transform" : "translate("+(x+margin.left)+","+(y)+")" | |
}); | |
xScale.domain([0, data.length]).range([0, innerWidth]); | |
yScale.domain([0, d3.max(data)]).range([0, innerHeight - ry]); | |
g.append('line') | |
.attr({ | |
stroke: "white", | |
"stroke-width":0.5, | |
fill: "none", | |
x1: 0, | |
x2: innerWidth, | |
y1: innerHeight, | |
y2: innerHeight | |
}); | |
var barGroup = g.selectAll('.bars') | |
.data(data) | |
.enter() | |
.append("g"); | |
var attrs = { | |
fill: "#2E3C46", | |
stroke: "none", | |
"stroke-width": "1" | |
}; | |
barGroup.append("path") | |
.attr(attrs) | |
.attr({ | |
d: function(d,i){ | |
//console.log("i", i, o.range()[i],innerWidth); | |
var path = "M"+(offsetX+o.range()[i])+","+(offsetY+innerHeight); | |
path += "l"+0+""+(-yScale(d)); | |
path += "s0,"+-borderRadius+" "+rx+" "+-ry; | |
path += "l"+(barWidth)+" "+0; | |
path += "s"+(borderRadius)+" 0 "+rx+" "+ry; | |
path += "l"+0+" "+(yScale(d)); | |
path += "Z"; | |
return path; | |
} | |
}); | |
barGroup.append("text") | |
.attr({ | |
x:function(d,i){ | |
return rangePoints(i) | |
}, | |
y:function(d,i){ | |
return height - yScale(d) - 35; | |
} | |
}) | |
.style({ | |
fill:"#2E3C46", | |
"text-anchor" : "middle" | |
}) | |
.text(function(d,i){ | |
return d+"%"; | |
}); | |
} | |
bar.data = function(value) { | |
if (!arguments.length) return data; | |
data = value; | |
return bar; | |
}; | |
bar.width = function(value) { | |
if (!arguments.length) return width; | |
width = value; | |
return bar; | |
}; | |
bar.height = function(value) { | |
if (!arguments.length) return height; | |
height = value; | |
return bar; | |
}; | |
return bar; | |
} | |
var config = {width: 502,height: 200, y: 50, data: [1, 20, 30, 4, 10, 6]} | |
var barChart = chart(config) | |
g.selectAll(".bars") | |
.call(barChart); | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment