Skip to content

Commit

Permalink
Took a stab at this, issue w3c#69
Browse files Browse the repository at this point in the history
  • Loading branch information
@almossawi
almossawi committed May 30, 2014
1 parent 754e274 commit 7dc8396
Show file tree
Hide file tree
Showing 5 changed files with 80 additions and 58 deletions.
13 changes: 13 additions & 0 deletions css/metrics-graphics-darkness.css
View file
Expand Up @@ -99,6 +99,19 @@ h2.chart_title span {
background-image: url(../images/missing-data-dark.png);
}

.points circle {
fill: #a89641;
fill-opacity: 0.6;
stroke: #a89641;
stroke-opacity: 1;
}

.points circle.selected {
fill: #a89641;
fill-opacity: 1;
stroke-opacity: 1;
}

.popover {
color: #737373;
}
Expand Down
31 changes: 14 additions & 17 deletions css/metrics-graphics.css
View file
Expand Up @@ -198,31 +198,30 @@ path.main-line {
text-decoration: none;
}

.pill {
font-family: 'Open Sans', serif;
font-size: 12px;
text-transform: uppercase;
}

.points circle {
fill-opacity: .3;
stroke-opacity:1;
fill: #0000ff;
fill-opacity: 0.4;
stroke: #0000ff;
stroke-opacity: 1;
}

.points circle.selected {
r: 4;
fill-opacity:1;
stroke-opacity:1;
fill:black;
fill: #3b3b3b;
fill-opacity: 1;
stroke-opacity: 1;
}

.points circle.unselected {
/* fill-opacity:.2;
stroke-opacity:.5;*/
}

.pill {
font-family: 'Open Sans', serif;
font-size: 12px;
text-transform: uppercase;
}

text {
fill: black;
opacity: 0.8;
Expand Down Expand Up @@ -279,11 +278,9 @@ text {

.x-axis .label,
.y-axis .label {
font-family: 'PT Serif', serif;
font-size: 9.5px;
font-style: italic;
letter-spacing: 1;
opacity: 0.5;
font-size: 10px;
text-transform: uppercase;
font-weight: 400;
}

.x-axis-small text,
Expand Down
4 changes: 2 additions & 2 deletions index.html
View file
Expand Up @@ -245,8 +245,8 @@ <h2 class='trunk-title'>Scatterplots</h2>
<div class='row trunk-section'>
<div class='col-lg-4'>
<h2 class='trunk-title'>Multiline Acccessor</h2>
<p>You can also pass in an array with each key in y_accessor to
create multiple lines.</p>
<p>You can also pass in an array with each key in
<i>y_accessor</i> to create multiple lines.</p>
</div>
<div class='col-lg-7'>
<div class='row'>
Expand Down
8 changes: 4 additions & 4 deletions js/main.js
View file
Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down
82 changes: 47 additions & 35 deletions js/metrics-graphics.js
View file
Expand Up @@ -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){
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -923,57 +922,65 @@ 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;
}

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;
}
Expand All @@ -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);
Expand All @@ -1004,7 +1014,9 @@ charts.point = function(args){
this.update = function(args) {
return this;
}

this.init(args);

return this;

}
Expand Down

0 comments on commit 7dc8396

Please sign in to comment.