diff --git a/css/metrics-graphics-demo.css b/css/metrics-graphics-demo.css
index 338f7e05..b87dbc47 100644
--- a/css/metrics-graphics-demo.css
+++ b/css/metrics-graphics-demo.css
@@ -57,36 +57,6 @@ a.active {
text-transform: uppercase;
}
-#torso {
- margin: 0 auto;
- text-align: center;
- width: 100%;
-}
-
-#torso div {
- display: inline-block;
-}
-
-#trunk {
- margin-top:40px;
-}
-
-#trunk h2 {
- font-size: 15px;
-}
-
-#trunk h2.trunk-title {
- font-size: 25px;
- font-weight: 300;
- text-transform: uppercase;
-}
-
-.trunk-section {
- border-top: 1px solid #ccc;
- padding-bottom: 25px;
- padding-top: 15px;
-}
-
.wip {
background-color: #f1f1f1;
font-size: 15px;
diff --git a/css/metrics-graphics.css b/css/metrics-graphics.css
index 1916b0a7..76b6fafb 100644
--- a/css/metrics-graphics.css
+++ b/css/metrics-graphics.css
@@ -270,6 +270,7 @@ circle.points-mono {
stroke: #0000ff;
}
+/* a selected point in a scatterplot */
.points circle.selected {
fill-opacity: 1;
stroke-opacity: 1;
@@ -280,6 +281,36 @@ text {
opacity: 0.8;
}
+#torso {
+ margin: 0 auto;
+ text-align: center;
+ width: 100%;
+}
+
+#torso div {
+ display: inline-block;
+}
+
+#trunk {
+ margin-top: 40px;
+}
+
+#trunk h2 {
+ font-size: 15px;
+}
+
+#trunk h2.trunk-title {
+ font-size: 25px;
+ font-weight: 300;
+ text-transform: uppercase;
+}
+
+.trunk-section {
+ border-top: 1px solid #ccc;
+ padding-bottom: 25px;
+ padding-top: 15px;
+}
+
.voronoi path {
fill: none;
pointer-events: all;
diff --git a/dev.html b/dev.html
index f337ccea..6229b8bb 100644
--- a/dev.html
+++ b/dev.html
@@ -114,9 +114,7 @@ Hassle-Free Layouts
@@ -129,9 +127,7 @@ Confidence Band
for each data point.
@@ -166,9 +162,7 @@ Update Chart Data
@@ -188,9 +182,7 @@ Modify Time Period
@@ -246,9 +238,7 @@ Logarithmic Scales
y_scale_type to log.
diff --git a/js/main.js b/js/main.js
index 976a4341..7db491ef 100644
--- a/js/main.js
+++ b/js/main.js
@@ -703,27 +703,6 @@ $(document).ready(function() {
y_accessor: 'y',
y_rug: true
});
-
- moz_chart({
- title: "Scatterplot with Size and Color",
- description: "Scatterplots have x_accessor, y_accessor, size_accessor, and color_accessor. For the last two you can also provide domain and range functions, to make it easy to change the color ranges. Colors default to red and blue, but can be overridden by passing an array of colors to color_range.",
- data: data,
- chart_type: 'point',
- width: trunk.width,
- height: trunk.height*1.5,
- right: trunk.right,
- target: '#scatter-size-and-color',
- xax_format: function(f) {
- var pf = d3.formatPrefix(f);
- return pf.scale(f) + pf.symbol;
- },
- x_accessor: 'x',
- y_accessor: 'y',
- color_accessor:'z',
- size_accessor:'w',
- x_rug: true,
- y_rug: true
- });
moz_chart({
title: "Simple Line of Best Fit",
@@ -761,22 +740,56 @@ $(document).ready(function() {
// y_accessor: 'y'
// })
})
+
+ //add this scatterplot and color the groups based on the theme
+ addScatterplotSizeAndColor('light');
+
+ function addScatterplotSizeAndColor(theme) {
+ var color_range = (theme == 'light')
+ ? null
+ : ['white','yellow'];
+
+ //call moz_chart again since we need to use a different color_range for the dark theme
+ d3.json('data/points1.json', function(data) {
+ moz_chart({
+ title: "Scatterplot with Size and Color",
+ description: "Scatterplots have x_accessor, y_accessor, size_accessor, and color_accessor. For the last two you can also provide domain and range functions, to make it easy to change the color ranges. Colors default to red and blue, but can be overridden by passing an array of colors to color_range, as we've done in this example for the dark theme.",
+ data: data,
+ chart_type: 'point',
+ width: trunk.width,
+ height: trunk.height*1.5,
+ right: trunk.right,
+ target: '#scatter-size-and-color',
+ xax_format: function(f) {
+ var pf = d3.formatPrefix(f);
+ return pf.scale(f) + pf.symbol;
+ },
+ x_accessor: 'x',
+ y_accessor: 'y',
+ color_accessor:'z',
+ color_range: color_range,
+ size_accessor:'w',
+ x_rug: true,
+ y_rug: true
+ });
+ });
+ }
function assignEventListeners() {
$('#dark-css').click(function () {
$('.missing')
.css('background-image', 'url(images/missing-data-dark.png)');
- $('.transparent-rollover-rect')
- .attr('fill', 'white');
-
$('.wip')
.css('background-color', '#3b3b3b');
$('.pill').removeClass('active');
$(this).toggleClass('active');
$('#dark').attr({href : 'css/metrics-graphics-darkness.css'});
-
+
+ //add this scatterplot and color the groups based on the theme
+ addScatterplotSizeAndColor('dark');
+
return false;
})
@@ -784,9 +797,6 @@ $(document).ready(function() {
$('.missing')
.css('background-image', 'url(images/missing-data.png)');
- $('.transparent-rollover-rect')
- .attr('fill', 'black');
-
$('.wip')
.css('background-color', '#f1f1f1');
@@ -794,6 +804,9 @@ $(document).ready(function() {
$(this).toggleClass('active');
$('#dark').attr({href : ''});
+ //add this scatterplot and color the groups based on the theme
+ addScatterplotSizeAndColor('light');
+
return false;
})
diff --git a/src/charts/point.js b/src/charts/point.js
index 84574c7d..ee2f5db3 100644
--- a/src/charts/point.js
+++ b/src/charts/point.js
@@ -12,9 +12,10 @@ charts.point = function(args) {
this.markers = function() {
markers(args);
- if (args.least_squares){
+ if (args.least_squares) {
add_ls(args);
}
+
return this
}
@@ -42,39 +43,44 @@ charts.point = function(args) {
pts.classed('points-mono', true);
}
- if (args.size_accessor!=null){
+ if (args.size_accessor != null) {
pts.attr('r', args.scalefns.size);
- } else {
+ }
+ else {
pts.attr('r', args.point_size);
}
+ //are we adding rug plots?
var rug;
- if (args.x_rug){
- rug=g.selectAll('line.x_rug').data(args.data[0]).enter().append('svg:line')
- .attr('x1', args.scalefns.xf)
- .attr('x2', args.scalefns.xf)
- .attr('y1', args.height-args.top+args.buffer)
- .attr('y2', args.height-args.top)
- .attr('class', 'x-rug')
- .attr('opacity', 0.3);
-
- if (args.color_accessor){
+ if (args.x_rug) {
+ rug = g.selectAll('line.x_rug').data(args.data[0])
+ .enter().append('svg:line')
+ .attr('x1', args.scalefns.xf)
+ .attr('x2', args.scalefns.xf)
+ .attr('y1', args.height-args.top+args.buffer)
+ .attr('y2', args.height-args.top)
+ .attr('class', 'x-rug')
+ .attr('opacity', 0.3);
+
+ if (args.color_accessor) {
rug.attr('stroke', args.scalefns.color);
}
else {
rug.classed('x-rug-mono', true);
}
}
- if (args.y_rug){
- rug=g.selectAll('line.y_rug').data(args.data[0]).enter().append('svg:line')
- .attr('x1', args.left+1)
- .attr('x2', args.left+args.buffer)
- .attr('y1', args.scalefns.yf)
- .attr('y2', args.scalefns.yf)
- .attr('class', 'y-rug')
- .attr('opacity', 0.3);
-
- if (args.color_accessor){
+
+ if (args.y_rug) {
+ rug = g.selectAll('line.y_rug').data(args.data[0])
+ .enter().append('svg:line')
+ .attr('x1', args.left+1)
+ .attr('x2', args.left+args.buffer)
+ .attr('y1', args.scalefns.yf)
+ .attr('y2', args.scalefns.yf)
+ .attr('class', 'y-rug')
+ .attr('opacity', 0.3);
+
+ if (args.color_accessor) {
rug.attr('stroke', args.scalefns.color);
}
else {
@@ -101,6 +107,7 @@ charts.point = function(args) {
.attr('y', args.top / 2)
.attr('text-anchor', 'end');
+ //add rollover paths
var voronoi = d3.geom.voronoi()
.x(args.scalefns.xf)
.y(args.scalefns.yf)
@@ -129,7 +136,7 @@ charts.point = function(args) {
this.rolloverOn = function(args) {
var svg = d3.select(args.target + ' svg');
- return function(d, i){
+ return function(d, i) {
svg.selectAll('.points circle')
.classed('selected', false);
@@ -137,8 +144,10 @@ charts.point = function(args) {
var pts = svg.selectAll('.points circle.path-' + i)
.classed('selected', true);
- if (args.size_accessor){
- pts.attr('r', function(di){return args.scalefns.size(di)+1});
+ if (args.size_accessor) {
+ pts.attr('r', function(di) {
+ return args.scalefns.size(di) + 1
+ });
} else {
pts.attr('r', args.point_size);
}
@@ -199,7 +208,7 @@ charts.point = function(args) {
this.rolloverOff = function(args) {
var svg = d3.select(args.target + ' svg');
- return function(d,i){
+ return function(d,i) {
if(args.linked && globals.link) {
globals.link = false;
@@ -214,9 +223,10 @@ charts.point = function(args) {
.classed('unselected', false)
.classed('selected', false);
- if (args.size_accessor){
+ if (args.size_accessor) {
pts.attr('r', args.scalefns.size);
- } else {
+ }
+ else {
pts.attr('r', args.point_size);
}
diff --git a/src/common/moz_chart.js b/src/common/moz_chart.js
index 8eeef81e..3003a1a8 100644
--- a/src/common/moz_chart.js
+++ b/src/common/moz_chart.js
@@ -82,8 +82,8 @@ function moz_chart() {
point_size: 2.5,
size_accessor: null,
color_accessor: null,
- size_range: null,//[1,5]
- color_range: null,//['blue', 'red']
+ size_range: null, // when we set a size_accessor option, this array determines the size range, e.g. [1,5]
+ color_range: null, // e.g. ['blue', 'red'] to color different groups of points
size_domain: null,
color_domain: null
}
diff --git a/src/common/x_axis.js b/src/common/x_axis.js
index 19dde51f..e09dd8cf 100644
--- a/src/common/x_axis.js
+++ b/src/common/x_axis.js
@@ -8,40 +8,42 @@ function x_axis(args) {
return args.scales.X(di[args.x_accessor]);
}
- if (args.chart_type=='point'){
+ if (args.chart_type == 'point') {
// figure out
var min_size, max_size, min_color, max_color, size_range, color_range, size_domain, color_domain;
- if (args.color_accessor!=null){
- if (args.color_domain==null){
+ if (args.color_accessor != null){
+ if (args.color_domain == null){
- min_color=d3.min(args.data[0], function(d){return d[args.color_accessor]});
- max_color=d3.max(args.data[0], function(d){return d[args.color_accessor]});
+ min_color = d3.min(args.data[0], function(d){return d[args.color_accessor]});
+ max_color = d3.max(args.data[0], function(d){return d[args.color_accessor]});
color_domain = [min_color, max_color];
} else {
color_domain = args.color_domain;
}
- if (args.color_range==null){
+
+ if (args.color_range == null){
color_range = ['blue', 'red'];
} else {
color_range = args.color_range;
}
- args.scales.color=d3.scale.linear().domain(color_domain).range(color_range).clamp(true);
+ args.scales.color = d3.scale.linear().domain(color_domain).range(color_range).clamp(true);
- args.scalefns.color=function(di){
+ args.scalefns.color = function(di){
return args.scales.color(di[args.color_accessor]);
};
}
- if (args.size_accessor!=null){
- if (args.size_domain==null){
- min_size=d3.min(args.data[0], function(d){return d[args.size_accessor]});
- max_size=d3.max(args.data[0], function(d){return d[args.size_accessor]});
+ if (args.size_accessor != null) {
+
+ if (args.size_domain == null){
+ min_size = d3.min(args.data[0], function(d){return d[args.size_accessor]});
+ max_size = d3.max(args.data[0], function(d){return d[args.size_accessor]});
size_domain = [min_size, max_size];
} else {
size_domain = args.size_domain;
}
- if (args.size_range==null){
+ if (args.size_range == null){
size_range = [1,5];//args.size_domain;
} else {
size_range = args.size_range;
@@ -49,7 +51,7 @@ function x_axis(args) {
args.scales.size=d3.scale.linear().domain(size_domain).range(size_range).clamp(true);
- args.scalefns.size=function(di){
+ args.scalefns.size = function(di){
return args.scales.size(di[args.size_accessor]);
};
}