flips - workin

_.md

[ Launch Inlet ]
Gist #4124664 [ Launch Inlet ]
Gist #2958196 No Previous Gist

config.json

{"description":"flips - workin","endpoint":"","display":"svg","public":true,"require":[],"tab":"edit","display_percent":0.4501939487975171,"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,"editor_editor":{"coffee":false,"vim":false,"emacs":false,"width":600,"height":300,"hide":false}}

inlet.js

var NUM_FLIPS = 3;
var PADDING = 20;
// draw nodes and instantiate with data value of zero

var width=427;
var height=449;

var svg = d3.select("svg")
    .attr("width", width)
    .attr("height", height);

var color = "#23277A";


var x = d3.scale.linear()
    .domain([0,NUM_FLIPS-1])
    .range([PADDING, width-PADDING]);

var y = d3.scale.linear()
    .domain([NUM_FLIPS*-1-1, NUM_FLIPS-1])
    .range([height+PADDING, PADDING]);

function render(data) {

    var nodz = svg.selectAll(".node")
        .data(data);

    nodz.enter().append("g")
        .attr("class", "node")
        .attr("id", function(d) { return "id"+d[0]+d[1]; })
        .attr("x",0)
        .attr("y", 0)
        .attr("transform", function(d) {
            return "translate(" + x(d[0]) + "," + y(d[1]) + ")";
        })
        .append("text")
        .attr("x", 0)
        .attr("y", 0)
        .attr("stroke", "black")
        .text(function(d) {return d[2]; });


    // update
    nodz.selectAll("text")
      .data(data)
        .attr("stroke", "red")
      .text(function(d) {
            return d[2]; });

    // another go
    d3.selectAll("text")
           .attr("stroke", "blue")
      .text(function(d) {
            return d[2]; });

  
 }


// data in form [x pos, y pos, value to display]

var nodes = [[0,0,0],[1,1,0],[1, -1,0],[2,0,0], [2,2,0]];
render(nodes);

nodes2 = [[0,0,1],[1,1,1],[1, -1,1],[2,0,1], [2,2,1], [2, -2,1]];
render(nodes2);