Tributary inlet

_.md

[ Launch: Tributary inlet ] 5953127 by robinkraft

config.json

{"description":"Tributary inlet","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}},"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}

inlet.js

/*
var svg = d3.select("svg");
var data = [4, 8, 15, 16, 23, 42];

var chart = d3.select("body").append("svg")
     .attr("class", "chart")
     .attr("width", 420)
     .attr("height", 20 * data.length);

var x = d3.scale.linear()
     .domain([0, d3.max(data)])
     .range([0, 420]);

chart.selectAll("rect")
     .data(data)
   .enter().append("rect")
     .attr("y", function(d, i) { return i * 20; })
     .attr("width", x)
     .attr("height", 20);


var rectDemo = d3.select("#rect-demo").
  append("svg:svg").
  attr("width", 400).
  attr("height", 300);

rectDemo.append("svg:rect").
  attr("x", 100).
  attr("y", 100).
  attr("height", 100).
  attr("width", 200);
*/

var sampleSVG = d3.select("#viz")
        .append("svg")	
        .attr("width", 100)
        .attr("height", 100);  

sampleSVG.append("circle")
        .style("stroke", "gray")
        .style("fill", "white")
        .attr("r", 40)
        .attr("cx", 50)
        .attr("cy", 50)
        .on("mouseover", function(){d3.select(this).style("fill", "aliceblue");})
        .on("mouseout", function(){d3.select(this).style("fill", "white");});

style.css

.chart div {
   font: 10px sans-serif;
   background-color: steelblue;
   text-align: right;
   padding: 3px;
   margin: 1px;
   color: white;
}


.chart rect {
2   stroke: white;
3   fill: steelblue;
4 }