Bubble Chart Matrix

_.md

[ Launch: Tributary inlet ] 0d60d28554c09b908339 by ramnathv

app.css

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

.axis line {
 fill: none;
 stroke: #bbb;
 stroke-width: 0.5px;
}

.axis text {
  fill: gray;
  font-size: 14px;
  font-family: "Helvetica Neue"

}

config.json

{"description":"Bubble Chart Matrix","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.coffee":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"app.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/13d0jsj.png"}

data.json

[{"x":"A","y":"a","r":5},{"x":"B","y":"a","r":4},{"x":"C","y":"a","r":6},{"x":"D","y":"a","r":5},{"x":"E","y":"a","r":2},{"x":"A","y":"b","r":4},{"x":"B","y":"b","r":4},{"x":"C","y":"b","r":10},{"x":"D","y":"b","r":10},{"x":"E","y":"b","r":5},{"x":"A","y":"c","r":1},{"x":"B","y":"c","r":2},{"x":"C","y":"c","r":9},{"x":"D","y":"c","r":6},{"x":"E","y":"c","r":5},{"x":"A","y":"d","r":10},{"x":"B","y":"d","r":8},{"x":"C","y":"d","r":6},{"x":"D","y":"d","r":3},{"x":"E","y":"d","r":9},{"x":"A","y":"e","r":5},{"x":"B","y":"e","r":6},{"x":"C","y":"e","r":3},{"x":"D","y":"e","r":3},{"x":"E","y":"e","r":10}] 

inlet.coffee

width = 479
height = 224
margin = {top: 50, left: 68, bottom: 52, right: 20}
W = width + margin.left + margin.right
H = height + margin.top + margin.bottom

svg = d3.select("svg")
    .attr("width", W)
    .attr("height", H)
  .append("g")
    .attr("transform", "translate(#{margin.left}, #{margin.top})")
    
    
x = d3.scale.ordinal().rangeRoundBands([0, width])
y = d3.scale.ordinal().rangeRoundBands([0, height])
c = d3.scale.linear()
  .range(["yellow", "green"])
  .domain([1, 10])
  .interpolate(d3.interpolateLab)
  
DEFAULT_PALETTE = ['#b2182b', '#d6604d', '#f4a582', '#fddbc7', '#f7f7f7', '#d1e5f0', '#92c5de', '#4393c3', '#2166ac']

defaultColorScale = 
   d3.scale.quantize().domain([1, 10]).range(DEFAULT_PALETTE)

xAxis = d3.svg.axis().scale(x).orient("bottom").tickSize(0)
  .tickPadding(10)
  
yAxis = d3.svg.axis().scale(y).orient("left").tickSize(-width)
  .tickPadding(10)



data = tributary.data

x.domain(["A", "B", "C", "D", "E"])
y.domain(["a", "b", "c", "d", "e"])



svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0, #{height})")
  .call(xAxis)
  
  
svg.append("g")
  .attr("class", "y axis")
  .call(yAxis)

circles = svg.selectAll('circle')
  .data(data)
    
circles.enter()
  .append("circle")
  .attr("cx", (d) -> x(d.x) + x.rangeBand()/2)
  .attr("cy", (d) -> y(d.y) + y.rangeBand()/2)
  .attr("r", (d) -> d.r*2)
  .attr("fill", (d) -> defaultColorScale(d.r))