From 7dc83960274eacc30eb0ac485c524d746865ab81 Mon Sep 17 00:00:00 2001 From: almossawi Date: Thu, 29 May 2014 20:41:29 -0700 Subject: [PATCH] Took a stab at this, issue #69 --- css/metrics-graphics-darkness.css | 13 +++++ css/metrics-graphics.css | 31 ++++++------ index.html | 4 +- js/main.js | 8 +-- js/metrics-graphics.js | 82 ++++++++++++++++++------------- 5 files changed, 80 insertions(+), 58 deletions(-) diff --git a/css/metrics-graphics-darkness.css b/css/metrics-graphics-darkness.css index 8ab58e4587..6114294e2d 100644 --- a/css/metrics-graphics-darkness.css +++ b/css/metrics-graphics-darkness.css @@ -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; } diff --git a/css/metrics-graphics.css b/css/metrics-graphics.css index c07be4e8f2..6015f53ded 100644 --- a/css/metrics-graphics.css +++ b/css/metrics-graphics.css @@ -198,18 +198,23 @@ 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 { @@ -217,12 +222,6 @@ path.main-line { stroke-opacity:.5;*/ } -.pill { - font-family: 'Open Sans', serif; - font-size: 12px; - text-transform: uppercase; -} - text { fill: black; opacity: 0.8; @@ -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, diff --git a/index.html b/index.html index 6c0e03e593..857f86060b 100644 --- a/index.html +++ b/index.html @@ -245,8 +245,8 @@

Scatterplots

Multiline Acccessor

-

You can also pass in an array with each key in y_accessor to - create multiple lines.

+

You can also pass in an array with each key in + y_accessor to create multiple lines.

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; }