Tributary inlet

_.md

[ Launch: Tributary inlet ] 10015097 by nim23
[ Launch: Tributary inlet ] 10014767 by nim23

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":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/3nNTvbL.png"}

inlet.js

var width = 300,
    height = 200,
    margin = 30,
    duration = 500,
    xScale = d3.scale.linear()
		.domain([0,10])
		.range([margin, width - margin]),
    yScale = d3.scale.linear()
		.domain([0,10])
		.range([height - margin, margin]);

//generate x and y co - ordinates
var data = d3.range(11).map(function(i){
  return {x:i, y: Math.sin(i) * 3 + 5};
});

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

svg.attr("height", height)
	.attr("width", width);

function render(){
	
  var line = d3.svg.line()
    .x(function(d) { 
      console.log(xScale(d.x)); 
      return xScale(d.x);})
    .y(function(d) { 
      console.log(yScale(d.y)); 
      return yScale(d.y);});
  
	svg.selectAll("path.line")
    	.data([data])
    .enter()
    	.append("path")
    	.attr("class", "line")
    	.attr("d", function(d) { return line(d);});
  
}

render();

style.css

body {
    font-family: "helvetica";
}

button {
    margin: 0 7px 0 0;
    background-color: #f5f5f5;
    border: 1px solid #dedede;
    border-top: 1px solid #eee;
    border-left: 1px solid #eee;

    font-size: 12px;
    line-height: 130%;
    text-decoration: none;
    font-weight: bold;
    color: #565656;
    cursor: pointer;
}

.box {
    width: 200px;
    height: 200px;
    margin: 40px;
    float: left;
    text-align: center;
    border: #969696 solid thin;
    padding: 5px;
}

.red {
    background-color: #e9967a;
    color: #f0f8ff;
}

.blue {
    background-color: #add8e6;
    color: #f0f8ff;
}

.cell {
    min-width: 40px;
    min-height: 20px;
    margin: 5px;
    float: left;
    text-align: center;
    border: #969696 solid thin;
    padding: 5px;
}

.fixed-cell {
    min-width: 40px;
    min-height: 20px;
    margin: 5px;
    position: fixed;
    text-align: center;
    border: #969696 solid thin;
    padding: 5px;
}

.h-bar {
    min-height: 15px;
    min-width: 10px;
    background-color: steelblue;
    margin-bottom: 2px;
    font-size: 11px;
    color: #f0f8ff;
    text-align: right;
    padding-right: 2px;
}

.v-bar {
    min-height: 1px;
    min-width: 30px;
    background-color: #4682b4;
    margin-right: 2px;
    font-size: 10px;
    color: #f0f8ff;
    text-align: center;
    width: 10px;
    display: inline-block;
}

.baseline {
    height: 1px;
    background-color: black;
}

.clear {
    clear: both;
}

.selected {
    background-color: #f08080;
}

.control-group {
    padding-top: 10px;
    margin: 10px;
}

.table {
    width: 70%;
}

.table td, th {
    padding: 5px;
}

.table-header {
    background-color: #00AFEF;
    font-weight: bold;
}

.table-row-odd {
    background-color: #f0f8ff;
}

.table-row-odd {
    background-color: #d3d3d3;
}

.code {
    display: inline-block;
    font-style: italic;
    background-color: #d3d3d3;
    border: #969696 solid thin;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.countdown{
    width: 150px;
    height: 150px;
    font-size: 5em;
    font-weight: bold;
}

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

.axis text {
    font: 10px sans-serif;
}

.axis .grid-line{
    stroke: black;
    shape-rendering: crispEdges;
    stroke-opacity: .2;
}

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

.dot {
  fill: #fff;
  stroke: steelblue;
}

.area {
    stroke: none;
    fill: steelblue;
    fill-opacity: .2;
}

.pie text{
    fill: white;
    font-weight: bold;
}

.circle {
    stroke: none;
    fill: red;
    fill-opacity: .7;
}

.cross {
    stroke: none;
    fill: blue;
    fill-opacity: .7;
}

.diamond {
    stroke: none;
    fill: green;
    fill-opacity: .7;
}

.square{
    stroke: none;
    fill: yellow;
    fill-opacity: .7;
}

.triangle-down{
    stroke: none;
    fill: blueviolet;
    fill-opacity: .7;
}

.triangle-up{
    stroke: none;
    fill: darkred;
    fill-opacity: .7;
}

.bubble{
    fill-opacity: .3;
}

.bar{
    stroke: none;
    fill: steelblue;
}