Tributary inlet

_.md

[ Launch: Tributary inlet ] db7c1d11e1ed2c6b5989 by ramnathv

app.css

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

text {
  font-size: 12px; 
  font-family: "Arial";
  fill: black ;
}

config.json

{"description":"Tributary inlet","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"app.css":{"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}

inlet.js

var data = [
  {x: "Group 1", y: 1, z: 2},
  {x: "Group 1", y: 2, z: 4},
  {x: "Group 1", y: 3, z: 6},
  {x: "Group 1", y: 4, z: 8},
  {x: "Group 2", y: 5, z: 10},
  {x: "Group 2", y: 6, z: 12},
  {x: "Group 2", y: 7, z: 14},
  {x: "Group 2", y: 8, z: 16},
  {x: "Group 3", y: 9, z: 18},
  {x: "Group 3", y: 10, z: 20},
  {x: "Group 3", y: 11, z: 24},
  {x: "Group 3", y: 12, z: 28}
];
  
var w = 600, h = 400
var margin = {top: 20, bottom: 20, left: 30, right: 20},
  width = w - margin.left - margin.right,
  height = h - margin.top - margin.bottom


var canvas = d3.select("svg")
  .attr("width", w)
  .attr("height", h)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")



canvas.append("rect")
  .attr("width", width)
  .attr("height", height)
  .attr("fill", "#ddd")


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

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

var xAxis = d3.svg.axis().scale(x).orient("bottom").tickSize(-height),
    yAxis = d3.svg.axis().scale(y).orient("left").tickSize(-width)

var Axes = {}

Axes.x = canvas.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")

Axes.y = canvas.append("g")
  .attr("class", "y axis")



var circles = canvas.selectAll(".circle")
  .data(data).enter()
  .append("g")
    .attr("class", "circle")



// x.domain(d3.extent(function(d){return d.y}))

x.domain(d3.extent(data, function(d){return d.z}))
y.domain(d3.extent(data, function(d){return d.y}))

Axes.x.call(xAxis)
Axes.y.call(yAxis)


circles.append("circle")
  .attr("cx", f("z", x))
  .attr("cy", f("y", y))
  .attr("r", 4)
  .attr("fill", "none")
  .attr("stroke", "black")





function f(x, h){
  return function(d){
    return h(d[x]); 
  }
}