Skip to content

Commit

Permalink
Initial bar graphs via d3
Browse files Browse the repository at this point in the history
  • Loading branch information
@nthitz
nthitz committed Jul 5, 2012
1 parent 463e33f commit aae4ed7
Show file tree
Hide file tree
Showing 7 changed files with 218 additions and 4 deletions.
9 changes: 8 additions & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@
<script src="js/visualize_lines.js"></script>
<script src="js/markers.js"></script>
<script src="js/svgtoy.js" type="text/javascript"></script>
<script src="js/d3.v2.min.js"></script>
<script src="js/ui.controls.js"></script>

<script type="x-shader/x-vertex" id="vertexshader">
Expand Down Expand Up @@ -124,7 +125,13 @@


<!-- All other hud can go here-->

<div id="hudHeader">
<h1>Global Arms Trade Visualization</h1>
<input type="text" name="country" class="countryTextInput" value="UNITED STATES">
<input type="button" value="SEARCH" class="searchBtn armsBtn">
<input type="button" value="ABOUT" class="aboutBtn armsBtn">

</div>

</body>
</html>
4 changes: 4 additions & 0 deletions js/d3.v2.min.js
View file

Large diffs are not rendered by default.

109 changes: 109 additions & 0 deletions js/ui.controls.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,3 +4,112 @@ Created by Pitch Interactive
Created on 6/26/2012
This code will control the primary functions of the UI in the ArmsGlobe app
**/
var d3Graphs = {
barGraphWidth: 300,
barGraphHeight: 800,
barGraphTopPadding: 20,
barGraphBottomPadding: 50,
barGraphSVG: d3.select("body").append("svg"),
cumImportY: 0,cumExportY: 0,
cumImportLblY: 0,cumExportLblY: 0,
showHud: function() {
$("#hudHeader").show();
},
drawBarGraph: function() {
console.log('dbg');
this.barGraphSVG.attr('id','barGraph').attr('width',d3Graphs.barGraphWidth).attr('height',d3Graphs.barGraphHeight);
var importArray = [];
var exportArray = [];
var importTotal = selectedCountry.summary.imported.total;
var exportTotal = selectedCountry.summary.exported.total;
for(var type in reverseWeaponLookup) {
importArray.push({"type":type, "amount":selectedCountry.summary.imported[type]});
exportArray.push({"type":type, "amount":selectedCountry.summary.exported[type]});
}
var max = importTotal > exportTotal ? importTotal : exportTotal;
var yScale = d3.scale.linear().domain([0,max]).range([0,this.barGraphHeight - this.barGraphBottomPadding - this.barGraphTopPadding]);
var importRects = this.barGraphSVG.selectAll("rect.import").data(importArray);
var midX = this.barGraphWidth / 2;
this.cumImportY = this.cumExportY = 0;
importRects.enter().append('rect').attr('class', function(d) {
return 'import '+d.type;
}).attr('x',midX - 20).attr('width',20);

importRects.attr('y',function(d) {
var value = d3Graphs.barGraphHeight - d3Graphs.barGraphBottomPadding - d3Graphs.cumImportY - yScale(d.amount) ;
d3Graphs.cumImportY += yScale(d.amount);
return value;
}).attr('height',function(d) { return yScale(d.amount); });
var exportRects = this.barGraphSVG.selectAll('rect.export').data(exportArray);
exportRects.enter().append('rect').attr('class',function(d) {
return 'export '+ d.type;
}).attr('x',midX + 10).attr('width',20);

exportRects.attr('y',function(d) {
var value = d3Graphs.barGraphHeight - d3Graphs.barGraphBottomPadding - d3Graphs.cumExportY - yScale(d.amount);
d3Graphs.cumExportY += yScale(d.amount);
return value;
}).attr('height',function(d) { return yScale(d.amount); });
this.cumImportLblY = 0;
this.cumExportLblY = 0;
var importLabels = this.barGraphSVG.selectAll("g.importLabel").data(importArray);
importLabels.enter().append("g").attr('class',function(d) {
return 'importLabel '+d.type;
});

importLabels.attr('transform',function(d) {
var translate = 'translate('+(d3Graphs.barGraphWidth / 2 - 25)+",";
var value = d3Graphs.barGraphHeight - d3Graphs.barGraphBottomPadding - d3Graphs.cumImportLblY - yScale(d.amount)/2;
d3Graphs.cumImportLblY += yScale(d.amount);
translate += value+")";
return translate;
}).attr('display',function(d) {
if(d.amount == 0) { return 'none';}
return null;
});
importLabels.selectAll("*").remove();
importLabels.append('text').text(function(d) {
return reverseWeaponLookup[d.type].split(' ')[0].toUpperCase();
}).attr('text-anchor','end').attr('y',15).attr('class',function(d){ return 'import '+d.type});
importLabels.append('text').text(function(d) {
return d.amount;
}).attr('text-anchor','end');
var exportLabels = this.barGraphSVG.selectAll("g.exportLabel").data(exportArray);
exportLabels.enter().append("g").attr('class',function(d) {
return 'exportLabel '+d.type;
})
exportLabels.attr('transform',function(d) {
var translate = 'translate('+(d3Graphs.barGraphWidth / 2 + 35)+",";
var value = d3Graphs.barGraphHeight - d3Graphs.barGraphBottomPadding - d3Graphs.cumExportLblY - yScale(d.amount)/2;
d3Graphs.cumExportLblY += yScale(d.amount);
translate += value+")";
return translate;
}).attr('display',function(d) {
if(d.amount == 0) { return 'none';}
return null;
});
exportLabels.selectAll("*").remove();
exportLabels.append('text').text(function(d) {
return reverseWeaponLookup[d.type].split(' ')[0].toUpperCase();
}).attr('y',15).attr('class',function(d) { return 'export '+ d.type});
exportLabels.append('text').text(function(d) {
return d.amount;
});


var importTotalLabel = this.barGraphSVG.selectAll('text.totalLabel').data([1]);
importTotalLabel.enter().append('text').attr('x',midX).attr('text-anchor','end')
.attr('class','totalLabel').attr('y',this.barGraphHeight- this.barGraphBottomPadding + 25);
console.log(importTotal);
console.log(importTotalLabel);
importTotalLabel.text(function(d) { console.log('total' + importTotal); return importTotal });
var exportTotalLabel = this.barGraphSVG.selectAll('text.totalLabel.totalLabel2').data([1]);
exportTotalLabel.enter().append('text').attr('x',midX+10).attr('class','totalLabel totalLabel2').attr('y', this.barGraphHeight - this.barGraphBottomPadding+25);
exportTotalLabel.text(exportTotal);
var importLabel = this.barGraphSVG.selectAll('text.importLabel').data([1]).enter().append('text').attr('x',midX).attr('text-anchor','end').text('IMPORTS')
.attr('class','importLabel').attr('y', this.barGraphHeight - this.barGraphBottomPadding + 45);
var exportLabel = this.barGraphSVG.selectAll('text.exportLabel').data([1]).enter().append('text').attr('x',midX+10).text('EXPORTS')
.attr('class','exportLabel').attr('y', this.barGraphHeight - this.barGraphBottomPadding + 45);

}
}
6 changes: 4 additions & 2 deletions js/visualize.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -170,7 +170,7 @@ function getVisualizedMesh( linearData, year, countries, action, categories ){
}
}

// console.log(selectedCountry);
console.log(selectedCountry);

linesGeo.colors = lineColors;

Expand Down Expand Up @@ -311,5 +311,7 @@ function selectVisualization( linearData, year, countries, action, categories ){

// console.log( mesh.affectedCountries );
highlightCountry( mesh.affectedCountries );


d3Graphs.showHud();
d3Graphs.drawBarGraph();
}
Binary file added ropasans/RopaSans-Italic.ttf
View file
Binary file not shown.
Binary file added ropasans/RopaSans-Regular.ttf
View file
Binary file not shown.
94 changes: 93 additions & 1 deletion style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,11 +47,22 @@

}

/*Import Ropa Sans Font, do we need other font file types??*/
@font-face {
font-family: 'RopaSans';
src: url('ropasans/RopaSans-Regular.ttf') format('truetype');
}
@font-face {
font-family: 'RopaSans';
src: url('ropasans/RopaSans-Italic.ttf') format('truetype');
font-style: italic;
}

/* Main Styles */
body { color:#000000; font-family:'Roboto'; font-size:14px; min-width:1024px; height:768px; }
a { color:#ffffff; text-decoration:none; text-transform:uppercase; }
a:hover { color:#8eb423; }
h1 { font-family:'Roboto'; font-weight:normal; text-transform:uppercase; font-size:24px; }
h1 { font-family:'RopaSans'; font-weight:normal; }
li { list-style-type:none; }

/* Button Styles */
Expand Down Expand Up @@ -253,4 +264,85 @@ a.button.pause:hover {
left: 12%;
color: #ffffff;
padding: 16px;
}


/*Styles by Pitch*/
#hudHeader {
display: none;
position: absolute;
left: 35px;
top: 37px;
color: #fff;
font-family: 'RopaSans';
}
#hudHeader h1 {
font-size: 42px;
font-family: 'RopaSans';
margin: 0 0 25px 0;
}
#hudHeader .countryTextInput {
font-size: 22px;
width: 330px;
padding-left: 5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
font-family: 'RopaSans';

}
#hudHeader .armsBtn {
background: #333333;
padding: 2px 10px;
color: white;
border: 0;
font-size: 25px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
font-family: 'RopaSans';
cursor: pointer;
}

#barGraph {
position: absolute;
top:190px;
left:0;
}
#barGraph .import.ammo {
fill: #308a8a;
}
#barGraph .import.civ {
fill: #72b4d7;
}
#barGraph .import.mil {
fill:#1482bd;
}
#barGraph .export.ammo {
fill: #785201;
}
#barGraph .export.civ {
fill: #f6c867;
}
#barGraph .export.mil {
fill:#f0a401;
}
#barGraph .importLabel text,#barGraph .exportLabel text {
fill: white;
font-family:Roboto;
}
#barGraph .totalLabel {
fill: white;
font-family:Roboto;
font-size: 24px;
}
#barGraph .exportLabel {
font-family: Roboto;
font-size: 15px;
fill: #f99318;
}
#barGraph .importLabel {
font-family: Roboto;
font-size: 15px;
fill: #2e81bb;
}

0 comments on commit aae4ed7

Please sign in to comment.