vis_app_ref_point_5

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">
    <select id="month" onchange="update_graph()">
            <option value="May" selected="selected">May</option>
            <option value="June">June</option>
      </select>
  </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;
}

.axis path,
.axis line {
  fill: none;
  stroke: grey;
  shape-rendering: crispEdges;
}

.axis text {
  font-family: 'Raleway';
  font-size: 11px;

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
  }, {
    "name": "Inspector Peabody Investigates",
    "group": 1,
    "audience_size": 21,
    "avg_mins_viewed": 11.1
  }, {
    "name": "Hoovering Britain",
    "group": 3,
    "audience_size": 11,
    "avg_mins_viewed": 39.5
  }]
};

//Set constants
var w = 420,
  h = 400,
  padding =...