MSyed has submitted this change and it was merged.
Change subject: Dynamic height based on number of data points
......................................................................
Dynamic height based on number of data points
Change-Id: I06cd7dbe485f17b19d26513b5ed39e21b7dfaf90
---
M source/data/where_from.csv
M source/javascripts/content.js
M source/localizable/content.html.erb
3 files changed, 46 insertions(+), 31 deletions(-)
Approvals:
MSyed: Verified; Looks good to me, approved
diff --git a/source/data/where_from.csv b/source/data/where_from.csv
index 3278f67..b52f735 100644
--- a/source/data/where_from.csv
+++ b/source/data/where_from.csv
@@ -25,3 +25,5 @@
Serbia*,1,jul12jun13
Singapore,1,jul12jun13
Switzerland,1,jul12jun13
+USA*,6,juldec13
+Poland,21,juldec13
\ No newline at end of file
diff --git a/source/javascripts/content.js b/source/javascripts/content.js
index 52a2f88..113e135 100644
--- a/source/javascripts/content.js
+++ b/source/javascripts/content.js
@@ -26,27 +26,22 @@
function whereFrom( data ) {
var current = 'jul12jun13';
- var element = 'where_from_graph';
+ var $el = $( '#where_from_graph' );
var margin = {
top: 10,
right: 10,
bottom: 10,
left: 40
},
- width = $( '#' + element ).width() - margin.left -
margin.right,
- height = $( '#' + element ).height() - margin.top -
margin.bottom;
- var graph = d3.select( '#' + element )
+ width = $el.width() - margin.left - margin.right,
+ height = $el.height() - margin.top - margin.bottom;
+ var svg = d3.select( '#' + $el.attr( 'id' ) )
.append( 'svg' )
.attr( 'width', width + margin.left + margin.right )
.attr( 'height', height + margin.top + margin.bottom )
+ var graph = svg
.append( 'g' )
.attr( 'transform', 'translate(' + margin.left + ',' +
margin.top + ')');
- var leftLine = graph.append( 'line' )
- .attr( 'class', 'left-line' )
- .attr( 'x1', 0 )
- .attr( 'x2', 0 )
- .attr( 'y1', 20 )
- .attr( 'y2', height - 10 );
function getData( data, current ) {
if ( current === 'all' ) {
@@ -60,19 +55,29 @@
function makeGraph( data, current ) {
var data = getData( data, current );
- var yScale = d3.scale.ordinal()
- .domain( data.map( function ( d ) {
- return d.key;
- } ) )
- .rangeRoundBands( [ margin.top, height ], 0.6 );
+ var height = ( data.length * 40 ) + 40;
+
+ $el.height( height );
+ svg.attr( 'height', height );
+
var xScale = d3.scale.linear()
.domain( [0, d3.max( data, function (d) {
- return d.value;
+ return Number( d.value );
} ) ] )
.range( [ 0, width ] );
+ var leftLine = graph.append( 'line' )
+ .attr( 'class', 'left-line' )
+ .attr( 'x1', 0 )
+ .attr( 'x2', 0 )
+ .attr( 'y1', 20 )
+ .attr( 'y2', height);
+
+
// Labels
- var labels = graph.selectAll( 'text.blue_bars' ).data(
data )
+ var labels = graph.selectAll( 'text.blue_bars' ).data(
data, function ( d ) {
+ return d.key;
+ } )
labels
.enter()
.append( 'text' )
@@ -84,22 +89,28 @@
}
dispatch.filter();
} )
+ .attr( 'y', '0' )
+ .style( 'opacity', '0' )
.attr( 'class', 'blue_bars' );
labels
- .attr( 'y', function ( d ) {
- return yScale( d.key );
- } )
- .attr( 'dy', -3 )
- .attr( 'x', 5 )
.html( function ( d ) {
return d.key;
- } );
+ } )
+ .transition()
+ .style( 'opacity', '1' )
+ .attr( 'y', function ( d, i ) {
+ return ( i + 1 ) * 40;
+ } )
+ .attr( 'dy', -3 )
+ .attr( 'x', 5 );
labels.exit().remove();
// Flags
- var flags = graph.selectAll( 'image.flags' ).data( data
)
+ var flags = graph.selectAll( 'image.flags' ).data(
data, function ( d ) {
+ return d.key;
+ } )
flags
.enter()
.append( 'image' )
@@ -119,8 +130,9 @@
.attr( 'xlink:href', function ( d ) {
return '/images/flags_svg/' + codes[
d.key.split( '*' )[0] ] + '.svg';
} )
- .attr( 'y', function ( d ) {
- return yScale( d.key ) - 8;
+ .transition()
+ .attr( 'y', function ( d, i ) {
+ return ( ( i + 1 ) * 40 ) - 8;
} )
.attr( 'x', -33 );
flags.exit().remove();
@@ -158,18 +170,19 @@
.attr( 'class', 'blue_bars' );
bar
- .attr( 'height', yScale.rangeBand() )
- .attr( 'y', function ( d ) {
- return yScale( d.key );
- } )
+ .attr( 'height', '12' )
.classed( 'disclosed', function ( d ) {
return d.disclosed;
} )
.transition()
+ .attr( 'y', function ( d, i ) {
+ return ( ( i + 1 ) * 40 ) + 3;
+ } )
.attr( 'x', '0' )
.attr( 'width', function ( d ) {
return xScale( d.value );
} );
+
bar.exit().remove();
}
diff --git a/source/localizable/content.html.erb
b/source/localizable/content.html.erb
index a5a150b..946e254 100644
--- a/source/localizable/content.html.erb
+++ b/source/localizable/content.html.erb
@@ -137,7 +137,7 @@
<ul class="tabs">
<li><a class="where_from_tabs" id="where_from_all"
href="javascript: void(0);"><%= t('dates.all') %></a></li>
<li><a class="active where_from_tabs"
id="where_from_jul12jun13" href="javascript: void(0);"><%= t('dates.jul') %>
2012 - <%= t('dates.jun') %> 2013</a></li>
- <li><a class="where_from_tabs"
id="where_from_juldec2013" href="javascript: void(0);"><%= t('dates.jul') %> -
<%= t('dates.dec') %> 2013</a></li>
+ <li><a class="where_from_tabs" id="where_from_juldec13"
href="javascript: void(0);"><%= t('dates.jul') %> - <%= t('dates.dec') %>
2013</a></li>
<li><a class="where_from_tabs" id="where_from_janjun14"
href="javascript: void(0);"><%= t('dates.jan') %> - <%= t('dates.jun') %>
2014</a></li>
</ul>
<div class="graph">
--
To view, visit https://gerrit.wikimedia.org/r/151431
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I06cd7dbe485f17b19d26513b5ed39e21b7dfaf90
Gerrit-PatchSet: 1
Gerrit-Project: wikimedia/TransparencyReport
Gerrit-Branch: master
Gerrit-Owner: Prtksxna <psax...@wikimedia.org>
Gerrit-Reviewer: MSyed <ms...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
