[ Launch: koopa ] 5833476 by enjalot
-
-
Save enjalot/5833476 to your computer and use it in GitHub Desktop.
koopa
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":"koopa","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":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/3TIL9U4.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
var xScaler = d3.scale.ordinal() | |
.range([0, 300]) | |
var yScaler = d3.scale.linear() | |
.domain([0, 40]) | |
.range([0, 300]) | |
// Build the area chart | |
var area = d3.svg.area() | |
.x(function (d, i) { return xScaler(d.title) }) | |
.y0(this.height) | |
.y1(function (d) { return yScaler(d.value) }) | |
// Build the line chart | |
var line = d3.svg.line() | |
.x(function (d, i) { | |
console.log("HI", xScaler(d.title)) | |
return xScaler(d.title) })//console.log(largestSet[i]); | |
.y(function (d, i, foo) { | |
return yScaler(d.value) | |
}) | |
var draw = function (selection) { | |
selection.each(function (data) { | |
var dgroup = d3.select(this).selectAll('.data-group').data(data) | |
dgroup.enter().append('g') | |
.attr('class', function(d, i) { | |
return 'data-group data-group-' + i; | |
}); | |
var plot = dgroup.selectAll('path') | |
.data(function (d) { return [d] }) | |
plot.enter() | |
.append('path') | |
.attr('class', 'area') | |
plot.attr('d', function(d) { console.log("D", d);return line(d.datapoints); }) | |
}) | |
return draw | |
} | |
draw.area = function (a) { | |
if (!arguments.length) { return area } | |
area = a | |
return draw | |
} | |
draw.line = function (l) { | |
if (!arguments.length) { return line } | |
line = l | |
return draw | |
} | |
draw.fill = function (f) { | |
if (!arguments.length) { return fill } | |
fill = f | |
return draw | |
} | |
// Add the SVG, which is a D3 object | |
var svg = d3.select('svg') | |
.append('g') | |
.attr('class', 'line-chart-group') | |
var data = [{"datapoints":[{"value":12,"title":"2008"},{"value":2,"title":"2009"},{"value":27.9,"title":"2011"},{"value":45,"title":"2012"}],"title":"X-Cola!"},{"datapoints":[{"value":18.4,"title":"2008"},{"value":20.1,"title":"2009"},{"value":24.8,"title":"2010"},{"value":26.1,"title":"2011"},{"value":29,"title":"2012"}],"title":"Y-Cola"}] | |
, container = svg.data([data]) | |
// Add the datasets | |
draw.area(area) | |
draw.line(line) | |
container.call(draw) | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment