diff --git a/js/main.js b/js/main.js
index 29a7ed9e48..3976bef966 100644
--- a/js/main.js
+++ b/js/main.js
@@ -105,7 +105,7 @@ $(document).ready(function() {
data = convert_dates(data);
moz_chart({
title: "Confidence Band",
- description: "Example of a chart with a confidence band and extended x-axis ticks enabled.",
+ description: "This is an example of a chart with a confidence band and extended x-axis ticks enabled.",
data: data,
format: 'percentage',
width: trunk.width*2,
@@ -224,7 +224,7 @@ $(document).ready(function() {
moz_chart({
title: "Glorious Chart",
chart_type: 'missing-data',
- description: "Here is an example of a chart whose data is currently missing.",
+ description: "This is an example of a chart whose data is currently missing.",
width: torso.width,
height: torso.height,
right: torso.right,
@@ -402,8 +402,8 @@ $(document).ready(function() {
d3.json('data/points1.json', function(data) {
moz_chart({
- title: "First Scatter",
- description: "Example of a scatterplot - wip",
+ title: "Scatterplot",
+ description: "A first example of a scatterplot.",
data: data,
chart_type: 'point',
width: trunk.width*2,
diff --git a/js/metrics-graphics.js b/js/metrics-graphics.js
index 12ee8ab0e7..e9043ad8a3 100644
--- a/js/metrics-graphics.js
+++ b/js/metrics-graphics.js
@@ -442,8 +442,8 @@ function init(args) {
if(!$.isArray(args.data[0]))
args.data = [args.data];
- // this is how we're dealing with passing in a single array of data, but with the intention of
- // using multiple values for multilines, etc.
+ // this is how we're dealing with passing in a single array of data,
+ // but with the intention of using multiple values for multilines, etc.
if ($.isArray(args.y_accessor)){
args.data = args.data.map(function(_d){
@@ -790,7 +790,6 @@ charts.line = function(args) {
var x_formatter = d3.time.format('%Y-%m-%d');
return function(d, i) {
- //console.log($(this));
var that = this;
if(args.data.length <= 1) {
@@ -923,22 +922,24 @@ charts.point = function(args){
this.markers = function(){
markers(args);
+
return this
}
this.mainPlot = function() {
var svg = d3.select(args.target + ' svg');
var g;
- // plot the points. Pretty straightforward.
-
+
+ // plot the points, pretty straight-forward
g = svg.append('g')
.classed('points', true);
- g.selectAll('circle').data(args.data[0])
+
+ g.selectAll('circle')
+ .data(args.data[0])
.enter().append('svg:circle')
- .attr('cx', args.scalefns.xf)
- .attr('cy', args.scalefns.yf)
- .attr('r', 2);
-
+ .attr('cx', args.scalefns.xf)
+ .attr('cy', args.scalefns.yf)
+ .attr('r', 2);
return this;
}
@@ -946,34 +947,40 @@ charts.point = function(args){
this.rollover = function() {
var svg = d3.select(args.target + ' svg');
- var clips = svg.append("svg:g").attr("id", "point-clips");
- var paths = svg.append("svg:g").attr("id", "point-paths");
-
- clips.selectAll("clipPath")
- .data(args.data[0])
- .enter().append("svg:clipPath")
- .attr("id", function(d, i) { return "clip-"+i;})
- .append("svg:circle")
- .attr('cx', args.scalefns.xf)
- .attr('cy', args.scalefns.yf)
- .attr('r', 20);
- //
+ var clips = svg.append('g')
+ .attr('id', 'point-clips');
+
+ var paths = svg.append('g')
+ .attr('id', 'point-paths');
+
+ clips.selectAll('clipPath')
+ .data(args.data[0])
+ .enter().append('clipPath')
+ .attr('id', function(d, i) { return 'clip-'+i;})
+ .append('circle')
+ .attr('cx', args.scalefns.xf)
+ .attr('cy', args.scalefns.yf)
+ .attr('r', 20);
+
var voronoi = d3.geom.voronoi()
.x(args.scalefns.xf)
.y(args.scalefns.yf);
- paths.selectAll("path")
+ paths.selectAll('path')
.data(voronoi(args.data[0]))
- .enter().append("svg:path")
- .attr("d", function(d) {
- return "M" + d.join(",") + "Z"; })
- .attr("id", function(d,i) {
- return "path-"+i; })
- .attr("clip-path", function(d,i) { return "url(#clip-"+i+")"; })
- .style("fill", d3.rgb(230, 230, 230))
- .style('fill-opacity', 0)
- .on('mouseover', this.rolloverOn(args))
- .on('mouseout', this.rolloverOff(args));
+ .enter().append('path')
+ .attr('d', function(d) {
+ return 'M' + d.join(',') + 'Z';
+ })
+ .attr('id', function(d,i) {
+ return 'path-' + i;
+ })
+ .attr('clip-path', function(d,i) {
+ return 'url(#clip-'+i+')';
+ })
+ .style('fill-opacity', 0)
+ .on('mouseover', this.rolloverOn(args))
+ .on('mouseout', this.rolloverOff(args));
return this;
}
@@ -982,8 +989,11 @@ charts.point = function(args){
var svg = d3.select(args.target + ' svg');
return function(d,i){
- svg.selectAll('.points circle').classed('unselected', true);
- svg.selectAll('.points circle').filter(function(g,j){return i == j})
+ svg.selectAll('.points circle')
+ .classed('unselected', true);
+
+ svg.selectAll('.points circle')
+ .filter(function(g,j){return i == j})
.classed('unselected', false)
.classed('selected', true)
.attr('r', 3);
@@ -1004,7 +1014,9 @@ charts.point = function(args){
this.update = function(args) {
return this;
}
+
this.init(args);
+
return this;
}