line graph

_.md

An inlet to tributary

config.json

{"description":"line graph","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"tab":"edit","display_percent":0.6057771664374137,"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,"hidepanel":false}

inlet.js

var data = [],
    derivative = [],
    power = 3

for (var k = -10; k < 10; k++) {
    data.push({x: 0.1 * k, y: (1 * Math.pow(k * 0.1,power) * 1)});
  	derivative.push({x: 0.1 * k, y: (power * (k * 0.1))});
}

var m = [49, 150, -237, 150]; 
var w = 1048 - m[1] - m[3];
var h = 400 - m[0] - m[2];

var dataX = data.map(function(d, i){return d.x});
var dataY = data.map(function(d, i){return d.y});

var x = d3.scale.linear().domain(d3.extent(dataX)).range([0, w]);
var y = d3.scale.linear().domain(d3.extent(dataY)).range([h, 0]);

var line = d3.svg.line()
	.interpolate("basis")
    .x(function(d,i) {
        return x(d.x);
    })
    .y(function(d,i) {
        return y(d.y);
    })

var graph = d3.select("svg")
    .attr("width", w + m[1] + m[3])
    .attr("height", h + m[0] + m[2])
	.attr('fill', 'grey')
    .append("g")
    .attr("transform", "translate(" + m[3] + "," + m[0] + ")");

var xAxis = d3.svg.axis().scale(x).tickSize(-h).tickSubdivide(true);

graph.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + h + ")")
    .call(xAxis);

var yAxisLeft = d3.svg.axis().scale(y).ticks(4).tickSize(-w).tickSubdivide(true).orient("left");

graph.append("g")
    .attr("class", "y axis")
    .attr("transform", "translate(-25,0)")
    .call(yAxisLeft);


graph.append("path").attr("d", line(data));

graph.append("path").attr("d", line(derivative));

style.css

     /* tell the SVG path to be a thin blue line without any area fill */
        path {
            stroke: steelblue;
            stroke-width: 1;
            fill: none;
        }

        .axis {
            shape-rendering: crispEdges;
        }

        .x.axis line {
            stroke: lightgrey;
        }

        .x.axis .minor, .y.axis .minor {
            stroke-opacity: .5;
        }

        .x.axis path {
            display: none;
        }

        .y.axis line, .y.axis path {
            fill: none;
            stroke: #E2D8D8;
        }