Scatterplot with D3Kit

README.md

Scatterplot with D3Kit

This is a test on how to use codepen

A Pen by Ramnath Vaidyanathan on CodePen.

License.

index.html

<div class="container" id="main">
  <div class="row">
    <div class="col-xs-12 col-md-12">
      <div id="chart">
       <h2>Scatterplot</h2>
       </div>
    </div>
  </div>
</div>

Scatterplot with D3Kit.markdown

Scatterplot with D3Kit

This is a test on how to use codepen

A Pen by Ramnath Vaidyanathan on CodePen.

License.

script.js

chartConstructor = (skeleton) ->
  L = skeleton.getLayerOrganizer()
  S = 
    x: d3.scale.linear()
    y: d3.scale.linear()
    c: d3.scale.category10()
  A = 
    x: (d) -> d.x
    y: (d) -> d.y
  L.create(["x-axis", "y-axis", "circles"])
  visualize = ->
    data = skeleton.data()
    H = skeleton.getInnerHeight()
    W = skeleton.getInnerWidth()
    console.log(W)
    S.x.range([0, W]).domain [0, 1]
    S.y.range([H, 0]).domain d3.extent(data, A.y)
    
    circles = L.get("circles").selectAll(".circle").data(data)
    circles.enter().append("circle.circle")
    circles
      .attr
        cx: (d) -> S.x A.x(d)
        cy: (d) -> S.y A.y(d)
        fill: (d, i) -> S.c(i)
        r: 0
      .transition()
      .delay((d, i) -> i/data.length*3000)
      .attr
        r: 3
        
    xAxis = d3.svg.axis()
      .scale(S.x)
      .orient('bottom')
    L.get('x-axis')
      .translate([0, H])
      .call(xAxis)
      
    yAxis = d3.svg.axis()
      .scale(S.y)
      .orient('left')
    L.get('y-axis')
      .call(yAxis)
      
  skeleton
    .resizeToFitContainer()
    .on('data', visualize)
    .on('resize', visualize)
    .autoResize(true)
      
defaults = 
  margin: {top: 20, bottom: 30, left: 40, right: 60}
  initialHeight: 300
  initialWidth: "auto"
  
Chart = d3Kit.factory.createChart(defaults, [], chartConstructor)

data = d3.range(100).map (i) ->
  {x: Math.random(), y: Math.random()}
 
console.log JSON.stringify(data)

myChart = new Chart('#chart').data(data)
    

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="//rawgit.com/twitter/d3kit/master/dist/d3kit.min.js"></script>
<script src="//rawgit.com/gka/d3-jetpack/master/d3-jetpack.js"></script>

style.css

#main {
  margin-top: 20px;
}
#chart {
  background: #eee;
  padding: 20px;
}

#chart .x-axis-layer path,
#chart .x-axis-layer line {
  fill: none;
  stroke: #aaa;
}

#chart .y-axis-layer path,
#chart .y-axis-layer line {
  fill: none;
  stroke: #aaa;
}

body {
  font-family: "Helvetica";
  font-size: 12px;
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />