linechart by domemaster

_.md

[ Launch: linechart by domemaster ] 5470637 by enjalot

config.json

{"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"}

inlet.js

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;
}