Simple Scatterplot

by ramnathv

HTML

<link rel="stylesheet" href="//rawgit.com/mozilla/metrics-graphics/master/dist/metricsgraphics.css">
<script src="//rawgit.com/ramnathv/28db10d3014f5838aa65/raw/5e4c5ac1ca99e8e5ecf8ef0a2e2e21db065bffb0/testdata.js"></script>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//rawgit.com/mozilla/metrics-graphics/master/dist/metricsgraphics.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="//keen.github.io/dashboards/assets/css/keen-dashboards.css">
<script src="//rawgit.com/gka/d3-jetpack/master/d3-jetpack.js"></script>
<script src="//rawgit.com/ramnathv/a5a3199538f86817ec1b/raw/f6627fc544e65d8e6186ba87556f743caa3f2730/visutils.js"></script>
<div class="container-fluid" id="main">
    <div class="row" id='panel1'>
        
    </div>
</div>

CSS

body{padding-top: 40px;}
text{
  font-size: 13px !important;
}

span.key{
  font-weight: bold;
}

CoffeeScript

d3k = d3k || {}
d3k.panel = ->
  defaults = 
    panels: ["title", "stage", "notes"]
    title: ""
    stage: ""
    notes: ""

  opts = extend(arguments[0], defaults)
  exports = (selection) ->
    selection.each (data) ->
      panel = d3.select(@)
        .selectAll("div.chartpanel")
        .data(data, (d) -> d.title)
      panel.exit().remove()
      panelEnter = panel.enter()
        .append("div.col-md-3.col-xs-12.chartpanel")
        .append("div.chart-wrapper")
      ###
      panel = d3.select(@)c
        .selectAll("div.chart-wrapper")
        .data(data)
      panelEnter = panel.enter()
        .append("div.chart-wrapper")
      ###
        
      panelEnter.attr('id', (d, i) -> "chart-#{d.title}")
      opts.panels.forEach (d) ->
         panelEnter
           .append("div.chart-#{d}")
           .html opts[d]

  exports.opts = opts; createAccessors(exports)
  exports
            
rowTable = (data, keys = "line_id") ->
  span = ["<span>"]
  d3.entries(data)
    .filter((d) -> keys.indexOf(d.key) < 0)
    .forEach (d) -> 
       span.push("<span class='key'>&nbsp" + d.key + "</span> : "  + d.value + "&nbsp")
  return span.join("") + "</span>";
    
addTooltip = (json, target) ->
  json.show_tooltips = false
  json.show_rollover_text = false
  json.mouseover = (d, i) ->
    d3.select(target)
      .html(rowTable(d.point, ["u", "v", "w", "z"]))
   json.mouseout = (d, i) ->
     d3.select(target).selectAll("*").remove()
   return(json)
            
mypanels = d3k.panel()

d3.select("#panel1")
  .datum([1])
  .call(mypanels)
    
d3.select("#panel1 .chart-stage")
  .attr('id', 'chart')
    
d3.select("#panel1 .chart-title")
  .html("<b>Simple Scatterplot</b>")
    
d3.select("#panel1 .chart-title")
  .append("span.pull-right#tooltip")
   


json =
  data: DATA,
  chart_type: 'point',
  height: 300,
  full_width: true,
  top: 20,
  right: 40,
  target: '#chart',
  x_accessor: 'x',
  y_accessor: 'y',
  color_accessor: 'v',
  color_type: 'category'
 ...