Tributary inlet

_.md

[ Launch: Tributary inlet ] 2ad53421cdb310195a77 by ramnathv

app.css

.axis path,
.axis line{
  fill: none;
  stroke: none;
}

g.tick line {
  stroke: transparent; 
}

.axis text {
  font-size: 14px;
  text-rendering: optimizeLegibility;
}

.cell {
  fill-opacity: 0.5;
  stroke: #ffffff;
  stroke-width: 0.5;
}

config.json

{"description":"Tributary inlet","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"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},"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,"thumbnail":"http://i.imgur.com/loN1oNK.png"}

inlet.js

var width = 400, height = 200;

var canvas = d3.select("svg")
  .attr("width", width)
  .attr("height", height)
  .append("g")
    .attr("transform", "translate(65, 45)")


var data = [{"x":"A","y":"a"},{"x":"B","y":"a"},{"x":"C","y":"a"},{"x":"D","y":"a"},{"x":"E","y":"a"},{"x":"F","y":"a"},{"x":"G","y":"a"},{"x":"H","y":"a"},{"x":"I","y":"a"},{"x":"J","y":"a"},{"x":"A","y":"b"},{"x":"B","y":"b"},{"x":"C","y":"b"},{"x":"D","y":"b"},{"x":"E","y":"b"},{"x":"F","y":"b"},{"x":"G","y":"b"},{"x":"H","y":"b"},{"x":"I","y":"b"},{"x":"J","y":"b"},{"x":"A","y":"c"},{"x":"B","y":"c"},{"x":"C","y":"c"},{"x":"D","y":"c"},{"x":"E","y":"c"},{"x":"F","y":"c"},{"x":"G","y":"c"},{"x":"H","y":"c"},{"x":"I","y":"c"},{"x":"J","y":"c"},{"x":"A","y":"d"},{"x":"B","y":"d"},{"x":"C","y":"d"},{"x":"D","y":"d"},{"x":"E","y":"d"},{"x":"F","y":"d"},{"x":"G","y":"d"},{"x":"H","y":"d"},{"x":"I","y":"d"},{"x":"J","y":"d"},{"x":"A","y":"e"},{"x":"B","y":"e"},{"x":"C","y":"e"},{"x":"D","y":"e"},{"x":"E","y":"e"},{"x":"F","y":"e"},{"x":"G","y":"e"},{"x":"H","y":"e"},{"x":"I","y":"e"},{"x":"J","y":"e"},{"x":"A","y":"f"},{"x":"B","y":"f"},{"x":"C","y":"f"},{"x":"D","y":"f"},{"x":"E","y":"f"},{"x":"F","y":"f"},{"x":"G","y":"f"},{"x":"H","y":"f"},{"x":"I","y":"f"},{"x":"J","y":"f"},{"x":"A","y":"g"},{"x":"B","y":"g"},{"x":"C","y":"g"},{"x":"D","y":"g"},{"x":"E","y":"g"},{"x":"F","y":"g"},{"x":"G","y":"g"},{"x":"H","y":"g"},{"x":"I","y":"g"},{"x":"J","y":"g"},{"x":"A","y":"h"},{"x":"B","y":"h"},{"x":"C","y":"h"},{"x":"D","y":"h"},{"x":"E","y":"h"},{"x":"F","y":"h"},{"x":"G","y":"h"},{"x":"H","y":"h"},{"x":"I","y":"h"},{"x":"J","y":"h"},{"x":"A","y":"i"},{"x":"B","y":"i"},{"x":"C","y":"i"},{"x":"D","y":"i"},{"x":"E","y":"i"},{"x":"F","y":"i"},{"x":"G","y":"i"},{"x":"H","y":"i"},{"x":"I","y":"i"},{"x":"J","y":"i"},{"x":"A","y":"j"},{"x":"B","y":"j"},{"x":"C","y":"j"},{"x":"D","y":"j"},{"x":"E","y":"j"},{"x":"F","y":"j"},{"x":"G","y":"j"},{"x":"H","y":"j"},{"x":"I","y":"j"},{"x":"J","y":"j"}] 
var data2 = [{"x":"A","y":"a","z":""},{"x":"B","y":"a","z":"1"},{"x":"C","y":"a","z":""},{"x":"D","y":"a","z":""},{"x":"E","y":"a","z":"2"},{"x":"F","y":"a","z":""},{"x":"G","y":"a","z":"3"},{"x":"H","y":"a","z":"1"},{"x":"I","y":"a","z":"1"},{"x":"J","y":"a","z":"1"},{"x":"A","y":"b","z":""},{"x":"B","y":"b","z":"1"},{"x":"C","y":"b","z":"2"},{"x":"D","y":"b","z":"3"},{"x":"E","y":"b","z":""},{"x":"F","y":"b","z":"1"},{"x":"G","y":"b","z":""},{"x":"H","y":"b","z":"1"},{"x":"I","y":"b","z":"2"},{"x":"J","y":"b","z":"3"},{"x":"A","y":"c","z":"3"},{"x":"B","y":"c","z":"1"},{"x":"C","y":"c","z":""},{"x":"D","y":"c","z":"1"},{"x":"E","y":"c","z":"3"},{"x":"F","y":"c","z":"2"},{"x":"G","y":"c","z":"2"},{"x":"H","y":"c","z":"1"},{"x":"I","y":"c","z":"2"},{"x":"J","y":"c","z":"1"},{"x":"A","y":"d","z":"1"},{"x":"B","y":"d","z":"1"},{"x":"C","y":"d","z":""},{"x":"D","y":"d","z":"3"},{"x":"E","y":"d","z":""},{"x":"F","y":"d","z":"2"},{"x":"G","y":"d","z":"1"},{"x":"H","y":"d","z":"2"},{"x":"I","y":"d","z":"1"},{"x":"J","y":"d","z":"2"},{"x":"A","y":"e","z":"1"},{"x":"B","y":"e","z":"3"},{"x":"C","y":"e","z":""},{"x":"D","y":"e","z":"1"},{"x":"E","y":"e","z":"3"},{"x":"F","y":"e","z":"1"},{"x":"G","y":"e","z":"3"},{"x":"H","y":"e","z":""},{"x":"I","y":"e","z":"3"},{"x":"J","y":"e","z":"1"}]

var xvars = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"] 
var yvars = ["a", "b", "c"]



var x = d3.scale.ordinal()
  .domain(data2.map(f('x')))
  .rangeBands([0, width - 100])

var y = d3.scale.ordinal()
  .domain(data2.map(f('y')))
  .rangeBands([0, height - 50])

var xAxis = d3.svg.axis()
  .scale(x)
  .orient("bottom")

canvas.append("g")
  .attr("transform", "translate(0, -31)")
  .attr("class", "x axis")
  .attr("fill", "black")
  .attr("stroke", "none")
  .attr("stroke-width", 0.5)
  .call(xAxis)

var yAxis = d3.svg.axis()
  .scale(y)
  .orient("right")

canvas.append("g")
  .attr("transform", "translate(-31, 0)")
  .attr("class", "y axis")
  .attr("fill", "black")
  .attr("stroke", "none")
  .attr("stroke-width", 0.5)
  .call(yAxis)


var cl = d3.scale.threshold()
  .range(['#e7e1ef', '#c994c7', '#dd1c77', "#fff"])
  .domain([1, 2, 3])

/*
var circles = canvas.append("circle")
  .attr("r",5)
  .attr("cx", 26)
  .attr("cy", 15)
  .attr("fill", "blue")
*/

var bars = canvas.selectAll(".bar")
  .data(data2).enter()
  .append("g")
    .attr("class", "bar")

var cellWidth = x.rangeBand()

bars.append("text")
  .attr("x", function(d){ return x(d.x) + cellWidth/2})
  .attr("y", function(d){ return y(d.y) + cellWidth/2})
  .style("text-anchor", "middle")
  .attr("dy", "5")
  .style("font-size", "14px")
  .text(f("z"))
  .attr("pointer-events", "none")


bars.append("rect")
    .attr("class", "cell")
    .attr("x", function(d){ return x(d.x)})
    .attr("y", function(d){ return y(d.y)})
    .attr("width",  cellWidth)
    .attr("height", cellWidth)
    .attr("fill", function(d){ return cl(d.z)})
    
  


bars.on("mouseover", function(d){
  d3.select(this).select("rect")
    .attr("fill", "red")
    .style("cursor", "crosshair")
}).on("mouseout", function(d){
  d3.select(this)
    .select("rect").attr("fill", function(d){ return cl(d.z)})
})
          
          
function f(x){
  return function(d){return d[x]}
}