[ Launch: linechart by domemaster ] 5470637 by enjalot
-
-
Save enjalot/5470637 to your computer and use it in GitHub Desktop.
linechart by domemaster
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":"linechart by domemaster","endpoint":"","display":"div","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/KRX40D0.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 foobar = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]; | |
var svg = d3.select("#display"); | |
var graph = svg.append("div") | |
graph.datum( foobar ).call( linechart() ); | |
/* | |
* TODO: move to utils file. | |
*/ | |
function svg_translate( x, y ){ | |
var out = "translate(" + x; | |
if( arguments.length == 2 ) | |
out += "," + y; | |
out += ")"; | |
return out; | |
} | |
function linechart(){ | |
// default arguments | |
var width = 500, height = 500; | |
var margin = { left: 40, top: 10, right: 10, bottom: 20 }; | |
// function to extract y coordinate from data | |
var extract_y = function( d ){ return d }; | |
/* Generate the chart into each element */ | |
function chart( selection ){ | |
selection.each( function( data ) { | |
var svgdim = { | |
width: width + margin.left + margin.right, | |
height: height + margin.top + margin.bottom | |
}; | |
// convert data to array. | |
data = data.map( function( d, i ){ | |
return extract_y.call( data, d, i ); | |
}); | |
// generate scales | |
var scale = { | |
x: d3.scale.linear() | |
.domain( [ 0, data.length ] ) | |
.range( [ 0, width ] ), | |
y: d3.scale.linear() | |
.domain( [ 0, d3.max( data ) ] ) | |
.range( [ height, 0 ] ) | |
}; | |
// create path generator. | |
var line = d3.svg.line() | |
.x( function( d, i ){ return scale.x(i); } ) | |
.y( function( d, i ){ return scale.y(d); } ); | |
// select svg if it exists | |
var svg = d3.select(this).selectAll("svg") | |
.data( [data] ); | |
// create if it didn't exist | |
var g = svg.enter().append("svg").append("g"); | |
// set viewport | |
svg.attr( "width", svgdim.width ) | |
.attr( "height", svgdim.height ); | |
// make y-axis visible via transformation | |
g.attr( "transform" | |
, svg_translate( margin.left, margin.top ) ); | |
// add clipping definition, TODO: why? | |
g.append("defs").append("clipPath") | |
.attr("id","clip") | |
.append("rect") | |
.attr("width", width ) | |
.attr("height", height ); | |
// create y-axis inside group. | |
g.append("g") | |
.attr("class", "y axis") | |
.call( d3.svg.axis() | |
.scale( scale.y ) | |
.orient("left") | |
); | |
// render the path | |
g.append("g") | |
.attr("clip-path", "url(#clip)" ) | |
.append("path") | |
.data( [ data ] ) | |
.attr( "class", "line" ) | |
.attr( "d", line ); | |
} ); | |
} | |
/* animate the graph */ | |
chart.update = function( dataum ){ | |
} | |
/* chain accessors */ | |
chart.width = function( value ){ | |
if( !arguments.length ) return width; | |
width = value; | |
return chart; | |
} | |
chart.height = function( value ){ | |
if( !arguments.length ) return height; | |
height = value; | |
return chart; | |
} | |
return chart; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment