velocity

_.md

[ Launch: chartmaker ] 7376611 by lewis500

config.json

{"description":"velocity","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},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"draw.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"dataMaker.js":{"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,"thumbnail":"http://i.imgur.com/hsPV2XY.gif","ajax-caching":true}

dataMaker.js

var data = [];

data.push({
    name: "Wish",
    values: [
        {x: 33, y: 0},
        {x: 60, y: 77}
      ]
  })

inlet.js

var data = [];

var tc = 60;
var gamma = 2;
var beta = 0.5;

function ma(a,b){
  return d3.max([a,b]);
}
function mi(a,b){
  return d3.min([a,b]);
}

function q(k) {
  var a = 1.52;
  var g = a * mi(k, 1.6) + a / 2 * ma(mi(k, 5) - 1.6, 0) - a / 8 * ma(mi(15, k) - 5, 0) - a / 16 * ma(mi(k, 30) - 15, 0);
  return ma(g, 0);
}

var sigData = d3.range(1,250).map(function(i){
  var k = i / 10
  return {
    y: q(k)/k,
    x: k}
})

data.push({
  name: "E",
  values: sigData
});


var margin = {top: 68, right: 27, bottom: 12, left: 102},
    width = 638 - margin.left - margin.right,
    height = 367 - margin.top - margin.bottom;

var yLabel ="load",
    xLabel = "time";

var svg = d3.select("svg");

var group = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var x = d3.scale.linear()
    .range([0, width]);

var y = d3.scale.linear()
    .range([height, 0]);

var color = d3.scale.category10();

x.domain([0,26])
y.domain([0,d3.max(sigData, function(d){return d.y})])

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

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

var plot = group.selectAll(".plot")
    .data(data)
  .enter().append("g")
    .attr("class", "plot");

plot.append("path")
    .attr("class", "line")
    .attr("d", function(d) { return line(d.values); })
    .style("stroke", function(d) { return color(d.name); });

group.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis)
  .append("text")
    .attr("y", 6)
	.attr("x",width)
    .attr("dy", "-.71em")
    .style("text-anchor", "end")
    .text(xLabel);

group.append("g")
    .attr("class", "y axis")
    .call(yAxis)
  .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .text(yLabel);

plot.append("text")
    .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
    .attr("transform", function(d) { return "translate(" + x(d.value.x) + "," + y(d.value.y) + ")"; })
    .attr("x", 3)
    .attr("dy", ".35em")
    .text(function(d) { return d.name; });

style.css

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.tick text{
//	fill: none

}

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}

body {
	background-color: white;

}