Heatmap2

_.md

[ Launch: Heatmap2 ] 22cbe00e23f9579e45ce by ramnathv
[ Launch: Heatmap2 ] 51112a298cbe4deca362 by ramnathv

app.css

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

.axis text {
  font-size: 12px;


.axis text.selected {
  fill: darkred;
  display: inline;
}

.axis text.hide {
  display: none;
}


#chart2 .line path {
    fill: none;
    stroke: black;
}
#chart2 .axis path,
#chart2 .axis line{
  fill: none;
  stroke: white;
}

#chart2 .axis text {
  font-family: "Arial";
  font-size: 10px;
  fill: black;
}

#chart2 .minor path,
#chart2 .minor line {
  stroke-opacity: 0.5;
}

#chart2 .minor text{
  display: none;
}

#chart2 circle{
  fill: blue;
  fill-opacity: 0.8
}

config.json

{"description":"Heatmap2","endpoint":"","display":"div","public":true,"require":[{"name":"d3tip","url":"https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.3/d3-tip.min.js"},{"name":"d3tip-css","url":"http://rawgithub.com/Caged/d3-tip/master/examples/example-styles.css"},{"name":"d3tip-css","url":"http://rawgit.com/Caged/d3-tip/master/examples/example-styles.css"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.coffee":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data2.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"d3tip.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},"app.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"mtcars.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/B5dum0v.png"}

d3tip.css

.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
  pointer-events: none;
  font-size: 12px;
}

/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  position: absolute;
  pointer-events: none;
}

/* Northward tooltips */
.d3-tip.n:after {
  content: "\25BC";
  margin: -2px 0 0 0;
  top: 100%;
  left: 0;
  text-align: center;
}

/* Eastward tooltips */
.d3-tip.e:after {
  content: "\25C0";
  margin: -4px 0 0 0;
  top: 50%;
  left: -8px;
}

/* Southward tooltips */
.d3-tip.s:after {
  content: "\25B2";
  margin: 0 0 1px 0;
  top: -8px;
  left: 0;
  text-align: center;
}

/* Westward tooltips */
.d3-tip.w:after {
  content: "\25B6";
  margin: -4px 0 0 -1px;
  top: 50%;
  left: 100%;
}

data.json

[[1,-0.8522,-0.8476,-0.7762,0.6812,-0.8677,0.4187,0.664,0.5998,0.4803,-0.5509],[-0.8522,1,0.902,0.8324,-0.6999,0.7825,-0.5912,-0.8108,-0.5226,-0.4927,0.527],[-0.8476,0.902,1,0.7909,-0.7102,0.888,-0.4337,-0.7104,-0.5912,-0.5556,0.395],[-0.7762,0.8324,0.7909,1,-0.4488,0.6587,-0.7082,-0.7231,-0.2432,-0.1257,0.7498],[0.6812,-0.6999,-0.7102,-0.4488,1,-0.7124,0.0912,0.4403,0.7127,0.6996,-0.0908],[-0.8677,0.7825,0.888,0.6587,-0.7124,1,-0.1747,-0.5549,-0.6925,-0.5833,0.4276],[0.4187,-0.5912,-0.4337,-0.7082,0.0912,-0.1747,1,0.7445,-0.2299,-0.2127,-0.6562],[0.664,-0.8108,-0.7104,-0.7231,0.4403,-0.5549,0.7445,1,0.1683,0.206,-0.5696],[0.5998,-0.5226,-0.5912,-0.2432,0.7127,-0.6925,-0.2299,0.1683,1,0.7941,0.0575],[0.4803,-0.4927,-0.5556,-0.1257,0.6996,-0.5833,-0.2127,0.206,0.7941,1,0.2741],[-0.5509,0.527,0.395,0.7498,-0.0908,0.4276,-0.6562,-0.5696,0.0575,0.2741,1]]

data2.json

[[1, 2, 3, 4],[5, 6, 7, 8]]

inlet.coffee

d3.viz = {}
# Component to draw ggplot2 style axes
d3.viz.ggaxis = (S) ->
  ticks_ = 5 # number of ticks to display
  Ax =
     x: d3.svg.axis().scale(S.x).orient("bottom").ticks(ticks_)
         .tickSize(-S.y.range()[0]) 
     y: d3.svg.axis().scale(S.y).orient("left").ticks(ticks_)
         .tickSize(-S.x.range()[1])
    exports = (selection) ->
      selection.each (data) ->
        chart = d3.select(@)
        xAxis = chart.selectAll(".x").data([data])
        xAxisEnter = xAxis.enter()
          .append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0, #{O.height})")
          .call(Ax.x)
           #.selectAll(".tick")
           #  .data(S.x.ticks(ticks_/2), (d) -> d).exit()
           #  .attr('class', 'minor')
        xAxis.attr("class", "x axis")
            .attr("transform", "translate(0, #{O.height})")
          .call(Ax.x)
           #.selectAll(".tick")
           #  .data(S.x.ticks(ticks_/2), (d) -> d).exit()
           # .attr('class', 'minor')
        yAxis = chart.selectAll(".y").data([data])
        yAxisEnter = yAxis.enter()
          .append("g")
            .attr("class", "y axis")
            .call(Ax.y)
          #.selectAll(".tick")
            #.data(S.y.ticks(ticks_/2), (d) -> d).exit()
            #.attr('class', 'minor')
        yAxis
            .attr("class", "y axis")
            .call(Ax.y)
          #.selectAll(".tick")
          #  .data(S.y.ticks(ticks_/2), (d) -> d).exit()
          #  .attr('class', 'minor')
        
    exports.ticks = (_) ->
      return _ if arguments.length is 0
      ticks_ = _; exports
    exports
    

data = tributary.data

data2 = d3.merge(data)


row = (i, ncol) ->
  Math.floor(i/ncol)

col = (i, nrow) ->
  i % nrow

ncol = data.length
nrow = data[0].length

  
dim = 24
gap = 0
O =
  margin: {top: 40, left: 40, right: 20, bottom: 20}
  width: dim*ncol
  height: dim*nrow
  
O.W = O.width + O.margin.left + O.margin.right
O.H = O.height + O.margin.top + O.margin.bottom


A =
  x: (d, i) -> col(i, nrow)
  y: (d, i) -> row(i, ncol)
  
  
  
S = 
  x: d3.scale.ordinal().rangeRoundBands([0, O.width], gap)
  y: d3.scale.ordinal().rangeRoundBands([0, O.height], gap)
  c: d3.scale.linear().range(["slateblue", "white", "crimson"])

S.x.domain d3.range(ncol)
S.y.domain d3.range(nrow)
S.c.domain([-1, 0, 1]).interpolate(d3.interpolateHsl)


display = d3.select('#display')
display.append("div").attr("id", "chart1")
display.append("div").attr("id", "chart2")


svg = d3.select('#chart1').append('svg')
  .attr({width: O.W, height: O.H})
  .append("g")
  .attr("transform", "translate(#{O.margin.left}, #{O.margin.top})")

cells = svg.selectAll("rect")
  .data(data2).enter()
  .append("rect")
  .attr("x", (d, i) -> S.x(A.x(d, i)))
  .attr("y", (d, i) -> S.y(A.y(d, i)))
  .attr("width", S.x.rangeBand())
  .attr("height", S.y.rangeBand())
  .attr("fill", (d, i) -> S.c(d))
  
tip = d3.tip().attr("class", "d3-tip")
  .html((d) -> d)
  
cells.call(tip)


mouseover = (d, i) ->
  tip.show(d, i)
  d3.select('#chart1').selectAll(".x.axis text")
    .classed("hide", (d_, i_) -> !(i_ is col(i, nrow)))
    .classed("selected", (d_, i_) -> i_ is col(i, nrow))   
  d3.select("#chart1").selectAll(".y.axis text")
    .classed("hide", (d_, i_) -> !(i_ is row(i, ncol)))
    .classed("selected", (d_, i_) -> i_ is row(i, ncol))
  
    
mouseout = (d, i) ->
  tip.hide(d, i)
  d3.selectAll(".axis text")
    .classed("selected", false)
    .classed("hide", false)
  
cells
  .on("mouseover", mouseover)
  .on("mouseout", mouseout)


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

svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0, #{O.height})")
  .call(xAxis)
  
yAxis = d3.svg.axis().scale(S.x).orient("left")

svg.append("g")
  .attr("class", "y axis")
  .call(yAxis)



mtcars = tributary.mtcars
dat3 = d3.zip(mtcars[2], mtcars[3])
svg2 = d3.select('#chart2').append('svg')
  .attr({width: O.W, height: O.H})
  .append("g")
  .attr("transform", "translate(#{O.margin.left}, #{O.margin.top})")


A2 =
  x: (d) -> d[0]
  y: (d) -> d[1]
  
S2 =
  x: d3.scale.linear().range([0, O.width])
  y: d3.scale.linear().range([O.height, 0])
  
  
updateScales = (S, A, data) ->
  S2.x.domain(d3.extent(data, A2.x)).nice()
  S2.y.domain(d3.extent(data, A2.y)).nice()
  
updateScales(S2, A2, dat3)
  



svg2.append("rect")
  .attr({width: O.width, height: O.height})
  .style("fill", "slateblue")
  .style("fill-opacity", 0.05)
svg2.call(d3.viz.ggaxis(S2)) 

cells2 = svg2.append("g")
  .attr("class", "scatterplot")
  .selectAll('circle')
  .data(dat3)

cells2.enter()
  .append('circle')
    .attr('cx', (d) -> S2.x A2.x d)
    .attr('cy', (d) -> S2.y A2.y d)
    .attr('r', 2)
 

cells.on "click", (d, i) ->
  x = col(i, nrow); y = row(i, ncol)
  dat = d3.zip(mtcars[x], mtcars[y])
  updateScales(S2, A2, dat)
  #svg2.selectAll(".axis g").remove()
  #svg2.selectAll(".axis path").remove()
  #svg2.select('rect').remove()
  svg2.call(d3.viz.ggaxis(S2))
  cells2.selectAll('circle').remove()
  cells2
    .data(dat)
    .attr('cx', (d) -> S2.x A2.x d)
    .attr('cy', (d) -> S2.y A2.y d)
    .attr('r', 2)
 
  

  

###
ticks_ = 10
Ax =
   x: d3.svg.axis().scale(S2.x).orient("bottom").ticks(ticks_)
       .tickSize(-S2.y.range()[0])  
   y: d3.svg.axis().scale(S.y).orient("left").ticks(ticks_)
       .tickSize(-S2.x.range()[1])
  
svg2.append("rect")
  .attr({width: O.width, height: O.height})
  .style("fill", "slateblue")
  .style("fill-opacity", 0.15)
###
         

mtcars.json

[[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4],[6,6,4,6,8,6,8,4,4,6,6,8,8,8,8,8,8,4,4,4,4,8,8,8,8,4,4,4,8,6,8,4],[160,160,108,258,360,225,360,146.7,140.8,167.6,167.6,275.8,275.8,275.8,472,460,440,78.7,75.7,71.1,120.1,318,304,350,400,79,120.3,95.1,351,145,301,121],[110,110,93,110,175,105,245,62,95,123,123,180,180,180,205,215,230,66,52,65,97,150,150,245,175,66,91,113,264,175,335,109],[3.9,3.9,3.85,3.08,3.15,2.76,3.21,3.69,3.92,3.92,3.92,3.07,3.07,3.07,2.93,3,3.23,4.08,4.93,4.22,3.7,2.76,3.15,3.73,3.08,4.08,4.43,3.77,4.22,3.62,3.54,4.11],[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],[16.46,17.02,18.61,19.44,17.02,20.22,15.84,20,22.9,18.3,18.9,17.4,17.6,18,17.98,17.82,17.42,19.47,18.52,19.9,20.01,16.87,17.3,15.41,17.05,18.9,16.7,16.9,14.5,15.5,14.6,18.6],[0,0,1,1,0,1,0,1,1,1,1,0,0,0,0,0,0,1,1,1,1,0,0,0,0,1,0,1,0,0,0,1],[1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,1,1,1,1,1,1,1],[4,4,4,3,3,3,3,4,4,4,4,3,3,3,3,3,3,4,4,4,3,3,3,3,3,4,5,5,5,5,5,4],[4,4,1,1,2,1,4,2,2,4,4,3,3,3,4,4,4,1,2,1,1,2,2,4,2,1,2,2,4,6,8,2]]