sin waves

_.md

[ Launch: sin waves ] dddd6a6a3299db795509 by nachocab

See Previous Inlet [ Gist ]

config.json

{"editor_editor":{"coffee":false,"vim":false,"emacs":false,"width":600,"height":300,"hide":false},"description":"sin waves","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.svg":{"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/PiJkDC4.gif","ajax-caching":true}

inlet.js

var margin = {top: 40, bottom: 40, left: 40, right: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.bottom - margin.top;

var svg = d3.select("svg").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var rows = 20,
    cols = 12,
    cell_width = 60,
    cell_height = 30;

var x = d3.scale.ordinal()
    .domain(d3.range(cols))
    .rangeBands([0, cols*cell_width]);

var y = d3.scale.ordinal()
    .domain(d3.range(rows))
    .rangeBands([rows*cell_height, 0]);

var data = [];
for(var i=0; i<cols; i++) {
    for(var j=0; j<rows; j++) {
        data.push({x:i, y:j});
        // console.log({x:i, y:j});
    }
}

svg.selectAll(".node")
    .data(data)
  .enter().append("g")
    .each(function(d,i){ 
        d3.select(this).call(draw_rect, x(d.x), y(d.y));
        // draw_rect(d3.select(this), x(i), y(i)); 
    })

function draw_rect(container, x, y){
    var rect = container.append("rect")
        .attr("x", x)
        .attr("y", y)
        .attr("height", cell_height)
        .attr("width", cell_width)
        .attr("class", "tile")
        .attr("fill", "#a7bdb2");

    var bbox = rect.node().getBBox(),
        coords = {
            x1: bbox.x,
            y1: bbox.y,
            x2: bbox.x + bbox.width,
            y2: bbox.y + bbox.height
        };

    container.append("path")
        .attr("d", // down diagonal
                   "M" + coords.x1 + "," + coords.y1 + 
                   "L" + coords.x2 + "," + coords.y2 +
                   // up diagonal
                   "M" + coords.x1 + "," + coords.y2 + 
                   "L" + coords.x2 + "," + coords.y1 + 
                   // verticals
                   "M" + coords.x1 + "," + coords.y1 + 
                   "L" + coords.x1 + "," + coords.y2 +
                   "M" + (coords.x1 + coords.x2)/2 + "," + coords.y1 + 
                   "L" + (coords.x1 + coords.x2)/2 + "," + coords.y2 +
                   "M" + coords.x2 + "," + coords.y1 + 
                   "L" + coords.x2 + "," + coords.y2 
                   )
        .style("fill", "none")
        .style("stroke", "white")
        .style("stroke-width", 2);
}