Skip to content

Commit

Permalink
Fix issue #165
Browse files Browse the repository at this point in the history
  • Loading branch information
@almossawi
almossawi committed Oct 24, 2014
1 parent 4523262 commit 7f1374b
Show file tree
Hide file tree
Showing 7 changed files with 134 additions and 118 deletions.
30 changes: 0 additions & 30 deletions css/metrics-graphics-demo.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
31 changes: 31 additions & 0 deletions css/metrics-graphics.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -270,6 +270,7 @@ circle.points-mono {
stroke: #0000ff;
}

/* a selected point in a scatterplot */
.points circle.selected {
fill-opacity: 1;
stroke-opacity: 1;
Expand All @@ -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;
Expand Down
20 changes: 5 additions & 15 deletions dev.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,9 +114,7 @@ <h2 class='trunk-title'>Hassle-Free Layouts</h2>
<div class='legend'></div>
</div>
<div class='col-lg-8'>
<div class='row'>
<div class='col-lg-12 text-center extended-y-ticks' id='fake_users3'></div>
</div>
<div class='col-lg-12 text-center extended-y-ticks' id='fake_users3'></div>
</div>
</div>

Expand All @@ -129,9 +127,7 @@ <h2 class='trunk-title'>Confidence Band</h2>
for each data point.</p>
</div>
<div class='col-lg-8'>
<div class='row'>
<div class='col-lg-12 text-center extended-x-ticks' id='confidence_band'></div>
</div>
<div class='text-center extended-x-ticks' id='confidence_band'></div>
</div>
</div>

Expand Down Expand Up @@ -166,9 +162,7 @@ <h2 class='trunk-title'>Update Chart Data</h2>
</div>
</div>
<div class='col-lg-8'>
<div class='row'>
<div class='col-lg-12 text-center' id='split_by'></div>
</div>
<div id='split_by'></div>
</div>
</div>

Expand All @@ -188,9 +182,7 @@ <h2 class='trunk-title'>Modify Time Period</h2>
</div>
</div>
<div class='col-lg-8'>
<div class='row'>
<div class='col-lg-12 text-center' id='modify_time_period'></div>
</div>
<div id='modify_time_period'></div>
</div>
</div>

Expand Down Expand Up @@ -246,9 +238,7 @@ <h2 class='trunk-title'>Logarithmic Scales</h2>
<i>y_scale_type</i> to <i>log</i>.</p>
</div>
<div class='col-lg-8'>
<div class='row'>
<div class='col-lg-12 text-center' id='log1'></div>
</div>
<div id='log1'></div>
</div>
</div>

Expand Down
69 changes: 41 additions & 28 deletions js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -703,27 +703,6 @@ $(document).ready(function() {
y_accessor: 'y',
y_rug: true
});

moz_chart({
title: "Scatterplot with Size and Color",
description: "Scatterplots have <i>x_accessor</i>, <i>y_accessor</i>, <i>size_accessor</i>, and <i>color_accessor</i>. 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 <i>color_range</i>.",
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",
Expand Down Expand Up @@ -761,39 +740,73 @@ $(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 <i>x_accessor</i>, <i>y_accessor</i>, <i>size_accessor</i>, and <i>color_accessor</i>. 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 <i>color_range</i>, 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;
})

$('#light-css').click(function () {
$('.missing')
.css('background-image', 'url(images/missing-data.png)');

$('.transparent-rollover-rect')
.attr('fill', 'black');

$('.wip')
.css('background-color', '#f1f1f1');

$('.pill').removeClass('active');
$(this).toggleClass('active');
$('#dark').attr({href : ''});

//add this scatterplot and color the groups based on the theme
addScatterplotSizeAndColor('light');

return false;
})

Expand Down
68 changes: 39 additions & 29 deletions src/charts/point.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
}

Expand Down Expand Up @@ -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 {
Expand All @@ -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)
Expand Down Expand Up @@ -129,16 +136,18 @@ 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);

//highlight active point
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);
}
Expand Down Expand Up @@ -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;

Expand All @@ -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);
}

Expand Down
4 changes: 2 additions & 2 deletions src/common/moz_chart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
Expand Down
Loading

0 comments on commit 7f1374b

Please sign in to comment.