vis_app_ref_point_3

by Simon Raper

HTML

<script src="https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<div id="container">
  <div id="header">
    <h1>Demo Scatterplot</h1>
  </div>
  <div id="sidebar">
  </div>
  <div id="content">
    <div id="content">
      <svg height="400" width="650">
    </svg>
    </div>
  </div>
  <div id="footer">
  </div>
</div>

CSS

h1 {
  font-family: 'Raleway';
  font-weight: normal;
  font-size: 1.2em;
  letter-spacing: .2em;
  line-height: 1.1em;
  margin: 0px;
  text-align: left;
  text-transform: uppercase;
}

#container {
  width: 800px;
}

#header {
  width: 800px;
  height: 50px;
  padding: 5px;
}

#sidebar {
  height: 400px;
  width: 150px;
  float: left;
}

#content {
  height: 400px;
  width: 650px;
  float: left;
}

#footer {
  width: 800px;
  height: 50px;
  float: left;
}

circle {
  stroke: #1abc9c;
  stroke-width: 2;
  fill: white;
}

.d3-tip {
     font-family:  'Raleway';
     line-height: 1;
     padding: 1px;
     background: transparent;
     color: #000;
     border-radius: 2px;
 }

JavaScript

progs = {"May":
    [{
        "name": "Cops",
        "group": 1,
        "audience_size": 34,
        "avg_mins_viewed": 33.5
    }, {
        "name": "The Day This Morning",
        "group": 1,
        "audience_size": 16,
        "avg_mins_viewed": 4.6
    }, {
        "name": "Love Rats",
        "group": 2,
        "audience_size": 11,
        "avg_mins_viewed": 22.2
    }, {
        "name": "Big Feet",
        "group": 2,
        "audience_size": 28,
        "avg_mins_viewed": 33.5
    }, {
        "name": "Another Reality Show",
        "group": 2,
        "audience_size": 10,
        "avg_mins_viewed": 64.1
    }, {
        "name": "Star Wars Makeovers",
        "group": 3,
        "audience_size": 4,
        "avg_mins_viewed": 12.9
    }, {
        "name": "Film Night",
        "group": 3,
        "audience_size": 8,
        "avg_mins_viewed": 10.0
    }, {
        "name": "The Evening News",
        "group": 1,
        "audience_size": 44,
        "avg_mins_viewed": 49.1
    }, {
        "name": "Bored",
        "group": 3,
        "audience_size": 18,
        "avg_mins_viewed": 61.1
    }], "June":[{
        "name": "Cops",
        "group": 1,
        "audience_size": 22,
        "avg_mins_viewed": 6.5
    }, {
        "name": "The Day This Morning",
        "group": 1,
        "audience_size": 18,
        "avg_mins_viewed": 10.2
    }, {
        "name": "Love Rats",
        "group": 2,
        "audience_size": 17,
        "avg_mins_viewed": 18.2
    }, {
        "name": "Big Feet",
        "group": 2,
        "audience_size": 22,
        "avg_mins_viewed": 46.1
    }, {
        "name": "Another Reality Show",
        "group": 2,
        "audience_size": 4,
        "avg_mins_viewed": 88.1
    }, {
        "name": "Star Wars Makeovers",
        "group": 3,
        "audience_size": 8,
        "avg_mins_viewed": 11.9
    }, {
        "name": "Film Night",
        "group": 3,
        "audience_size": 12,
        "avg_mins_viewed": 18.4
    }, {
       ...