Prtksxna has uploaded a new change for review.
https://gerrit.wikimedia.org/r/151411
Change subject: Add the where from graph on the content page
......................................................................
Add the where from graph on the content page
Change-Id: I49b33e2aa69807b3b6159e698a4e1d8d2feda9df
---
A source/data/where_from.csv
A source/javascripts/content.js
M source/localizable/content.html.erb
M source/stylesheets/graph.css.scss
4 files changed, 244 insertions(+), 2 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/wikimedia/TransparencyReport
refs/changes/11/151411/1
diff --git a/source/data/where_from.csv b/source/data/where_from.csv
new file mode 100644
index 0000000..3278f67
--- /dev/null
+++ b/source/data/where_from.csv
@@ -0,0 +1,27 @@
+key,value,duration
+USA*,67,jul12jun13
+Germany,21,jul12jun13
+United Kingdom*,20,jul12jun13
+France*,15,jul12jun13
+Italy,12,jul12jun13
+Spain*,6,jul12jun13
+Canada,5,jul12jun13
+Australia,4,jul12jun13
+India,3,jul12jun13
+Netherlands,3,jul12jun13
+New Zealand,2,jul12jun13
+Pakistan,2,jul12jun13
+Russia*,2,jul12jun13
+Austria,1,jul12jun13
+Belgium,1,jul12jun13
+Chile,1,jul12jun13
+Iran,1,jul12jun13
+Ireland,1,jul12jun13
+Israel,1,jul12jun13
+Luxemburg,1,jul12jun13
+Malaysia,1,jul12jun13
+Poland,1,jul12jun13
+Senegal,1,jul12jun13
+Serbia*,1,jul12jun13
+Singapore,1,jul12jun13
+Switzerland,1,jul12jun13
diff --git a/source/javascripts/content.js b/source/javascripts/content.js
new file mode 100644
index 0000000..52a2f88
--- /dev/null
+++ b/source/javascripts/content.js
@@ -0,0 +1,192 @@
+;( function ( d3, $ ) {
+ var tooltip = d3
+ .select( 'body' )
+ .append( 'div' )
+ .attr( 'class', 'graph_tooltip' )
+ .style( 'display', 'none' );
+
+ var codes = {
+ "USA": "us",
+ "France": "fr",
+ "United Kingdom": "gb",
+ "Spain": "es",
+ "India": "in",
+ "Sri Lanka": "lk",
+ "Germany": "de",
+ "Canada": "ca",
+ "Nepal": "np",
+ "Pakistan": "pk",
+ "Brazil": "br",
+ "China": "cn",
+ "Switzerland": "ch",
+ "Singapore": "sg",
+ "New Zealand": "nz",
+ "Japan": "jp"
+ }
+
+ function whereFrom( data ) {
+ var current = 'jul12jun13';
+ var element = '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 )
+ .append( 'svg' )
+ .attr( 'width', width + margin.left + margin.right )
+ .attr( 'height', height + margin.top + margin.bottom )
+ .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' ) {
+ return [];
+ }
+
+ return data.filter( function ( d ) {
+ return d.duration === current;
+ } );
+ }
+
+ 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 xScale = d3.scale.linear()
+ .domain( [0, d3.max( data, function (d) {
+ return d.value;
+ } ) ] )
+ .range( [ 0, width ] );
+
+ // Labels
+ var labels = graph.selectAll( 'text.blue_bars' ).data(
data )
+ labels
+ .enter()
+ .append( 'text' )
+ .on( 'click', function ( d ) {
+ if ( ds.filters[ groupBy ] === d.key ) {
+ delete ds.filters[ groupBy ];
+ } else {
+ ds.filters[ groupBy ] = d.key;
+ }
+ dispatch.filter();
+ } )
+ .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;
+ } );
+
+ labels.exit().remove();
+
+ // Flags
+ var flags = graph.selectAll( 'image.flags' ).data( data
)
+ flags
+ .enter()
+ .append( 'image' )
+ .on( 'click', function ( d ) {
+ if ( ds.filters[ groupBy ] === d.key ) {
+ delete ds.filters[ groupBy ];
+ } else {
+ ds.filters[ groupBy ] = d.key;
+ }
+ dispatch.filter();
+ } )
+ .attr( 'class', 'flags' )
+ .classed( 'flag', true);
+ flags
+ .attr( 'width', 28 )
+ .attr( 'height', 16 )
+ .attr( 'xlink:href', function ( d ) {
+ return '/images/flags_svg/' + codes[
d.key.split( '*' )[0] ] + '.svg';
+ } )
+ .attr( 'y', function ( d ) {
+ return yScale( d.key ) - 8;
+ } )
+ .attr( 'x', -33 );
+ flags.exit().remove();
+
+ // Bars
+ var bar = graph.selectAll( 'rect.blue_bars' ).data(
data, function ( d ) {
+ return d.key;
+ } )
+ bar
+ .enter()
+ .append( 'rect' )
+ .on( 'click', function ( d ) {
+ if ( ds.filters[ groupBy ] === d.key ) {
+ delete ds.filters[ groupBy ];
+ } else {
+ ds.filters[ groupBy ] = d.key;
+ }
+ dispatch.filter();
+ } )
+ .on( 'mouseover', function ( d ) {
+ var
+ $target = $( d3.event.target ),
+ top = $target.offset().top,
+ left = $target.offset().left +
xScale( d.value ) + 10;
+ return tooltip
+ .html( '<b>Total Requests</b>'
+ + '<span>' + ( d.value
) + '</span>' )
+ .style( 'top', top + 'px' )
+ .style( 'left', left + 'px' )
+ .style( 'display', 'block' );
+ } )
+ .on( 'mouseout', function () {
+ return tooltip.style( 'display', 'none'
);
+ } )
+ .attr( 'class', 'blue_bars' );
+
+ bar
+ .attr( 'height', yScale.rangeBand() )
+ .attr( 'y', function ( d ) {
+ return yScale( d.key );
+ } )
+ .classed( 'disclosed', function ( d ) {
+ return d.disclosed;
+ } )
+ .transition()
+ .attr( 'x', '0' )
+ .attr( 'width', function ( d ) {
+ return xScale( d.value );
+ } );
+ bar.exit().remove();
+ }
+
+ makeGraph( data, current );
+
+ $( '.where_from_tabs' ).click( function () {
+ $( '.where_from_tabs' ).removeClass( 'active' );
+ $( this ).addClass( 'active' );
+ var duration = $( this ).attr( 'id' ).split( '_' )[ 2
];
+ makeGraph( data, duration );
+ } );
+ }
+
+ $( function () {
+ d3.csv( '/data/where_from.csv', function ( error, data ) {
+ if ( error ) throw error;
+ whereFrom( data );
+ } );
+ } );
+} ) ( d3, jQuery );
diff --git a/source/localizable/content.html.erb
b/source/localizable/content.html.erb
index 5101988..a5a150b 100644
--- a/source/localizable/content.html.erb
+++ b/source/localizable/content.html.erb
@@ -130,4 +130,21 @@
</div>
<div class="clear"></div>
+
+<div class="col-md-12">
+ <div class="analytics">
+ <h2>Where did these requests come from?</h2>
+ <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_janjun14"
href="javascript: void(0);"><%= t('dates.jan') %> - <%= t('dates.jun') %>
2014</a></li>
+ </ul>
+ <div class="graph">
+ <div id="where_from_graph"
class="bar_graph_horizontal"></div>
+ </div>
+ </div>
+</div>
+<div class="clear"></div>
<br><br><br><br><br><br>
+<script src="/javascripts/content.js"></script>
diff --git a/source/stylesheets/graph.css.scss
b/source/stylesheets/graph.css.scss
index 50746ad..c0492f7 100644
--- a/source/stylesheets/graph.css.scss
+++ b/source/stylesheets/graph.css.scss
@@ -73,6 +73,12 @@
}
}
+#where_from_graph {
+ width: 100%;
+ height: 900px;
+}
+
+
#bar_graph_by_country {
width: 100%;
height: 600px;
@@ -173,7 +179,7 @@
background: $lightgray;
width: 150px;
opacity: 0.99;
- font-family: serif;
+ font-family: 'Georgia', serif;
font-weight: normal;
font-size: 12px;
@@ -185,7 +191,7 @@
border-width: 5px;
border-style: solid;
border-color: transparent $lightgray transparent transparent;
- top: 20px;
+ top: 3px;
left: -10px;
}
--
To view, visit https://gerrit.wikimedia.org/r/151411
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I49b33e2aa69807b3b6159e698a4e1d8d2feda9df
Gerrit-PatchSet: 1
Gerrit-Project: wikimedia/TransparencyReport
Gerrit-Branch: master
Gerrit-Owner: Prtksxna <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
