Skip to content

Commit 6af085f

Browse files
nthitznthitz
committed
+ top left buttons 1px font size smaller & decrease width by 20-30 px
+ Title change - to emdash + minwidth 1280 + tipos design for lower right buttons at 1395px width + decrease timeline width by about 100px + tighten up bar graphs move to left a little + look into reducing min zoom level of globe
1 parent e6a0013 commit 6af085f

7 files changed

+148
-57
lines changed

‎index.html

+9-6
Original file line numberDiff line numberDiff line change
@@ -128,15 +128,17 @@ <h2>Loading UN Arms Trade Data from 1992 to 2010... please wait.</h2>
128128

129129
<!-- All other hud can go here-->
130130
<div id="hudHeader" class="overlayCountries noPointer">
131-
<h1 class="noPointer">Small Arms and Ammunition - Imports & Exports
131+
<h1 class="noPointer">Small Arms and Ammunition — Imports & Exports
132132
<div class="subtitle">An interactive visualization of government-authorized small arms and ammunition transfers from 1992 to 2010. </div>
133133
</h1>
134-
134+
</div>
135+
136+
<div class="overlayCountries noPointer" id="hudButtons">
135137
<input type="button" value="SEARCH" class="searchBtn armsBtn pointer">
136-
<input type="text" name="country" class="countryTextInput pointer" value="UNITED STATES">
137-
<input type="button" value="—" class="zoomBtn zoomOutBtn armsBtn pointer">
138-
<input type="button" value="+" class="zoomBtn zoomInBtn armsBtn pointer">
139-
<input type="button" value="ABOUT" class="aboutBtn armsBtn pointer">
138+
<input type="text" name="country" class="countryTextInput pointer" value="UNITED STATES">
139+
<input type="button" value="—" class="zoomBtn zoomOutBtn armsBtn pointer">
140+
<input type="button" value="+" class="zoomBtn zoomInBtn armsBtn pointer">
141+
<input type="button" value="ABOUT" class="aboutBtn armsBtn pointer"><br class="clear" />
140142
</div>
141143
<div id="history" class="overlayCountries noPointer">
142144
<div class="graph">
@@ -190,6 +192,7 @@ <h1 class="noPointer">Small Arms and Ammunition - Imports & Exports
190192
<div class="ammo"><div class="check"></div></div>
191193
<div class="label">Exports</div><br class="clear">
192194
</div>
195+
<br class="clear" />
193196
</div>
194197

195198
<div id="aboutContainer" class='overlayCountries'>

‎js/THREEx.WindowResize.js

+7-2
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,15 @@ var THREEx = THREEx || {};
2525
*/
2626
THREEx.WindowResize = function(renderer, camera){
2727
var callback = function(){
28+
var minWidth = 1280;
29+
var w = window.innerWidth;
30+
if(w < minWidth) {
31+
w = minWidth;
32+
}
2833
// notify the renderer of the size change
29-
renderer.setSize( window.innerWidth, window.innerHeight );
34+
renderer.setSize( w, window.innerHeight );
3035
// update the camera
31-
camera.aspect = window.innerWidth / window.innerHeight;
36+
camera.aspect = w / window.innerHeight;
3237
camera.updateProjectionMatrix();
3338
}
3439
// bind the resize event

‎js/mousekeyboard.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ function onKeyDown( event ){
7878

7979
function handleMWheel( delta ) {
8080
camera.scale.z += delta * 0.1;
81-
camera.scale.z = constrain( camera.scale.z, 0.8, 5.0 );
81+
camera.scale.z = constrain( camera.scale.z, 0.7, 5.0 );
8282
}
8383

8484
function onMouseWheel( event ){

‎js/ui.controls.js

+39-17
Original file line numberDiff line numberDiff line change
@@ -16,21 +16,21 @@ var d3Graphs = {
1616
barWidth: 14,
1717
barGraphTopPadding: 20,
1818
barGraphBottomPadding: 50,
19-
histogramWidth: 780,
19+
histogramWidth: 686,
2020
histogramHeight: 160,
2121
histogramLeftPadding:31,
2222
histogramRightPadding: 31,
2323
histogramVertPadding:20,
24-
barGraphSVG: d3.select("body").append("svg"),
24+
barGraphSVG: d3.select("#wrapper").append("svg"),
2525
histogramSVG: null,
2626
histogramYScale: null,
2727
histogramXScale: null,
2828
cumImportY: 0,cumExportY: 0,
2929
cumImportLblY: 0,cumExportLblY: 0,
3030
inited: false,
3131
histogramOpen: false,
32-
handleLeftOffset: 14,
33-
handleInterval: 40,
32+
handleLeftOffset: 12,
33+
handleInterval: 35,
3434
windowResizeTimeout: -1,
3535
histogramImports: null,
3636
histogramExports: null,
@@ -41,7 +41,7 @@ var d3Graphs = {
4141

4242

4343
setCountry: function(country) {
44-
$("#hudHeader .countryTextInput").val(country);
44+
$("#hudButtons .countryTextInput").val(country);
4545
d3Graphs.updateViz();
4646
},
4747
initGraphs: function() {
@@ -52,22 +52,22 @@ var d3Graphs = {
5252
showHud: function() {
5353
if(this.inited) return;
5454
this.inited = true;
55-
$("#hudHeader").show();
56-
d3Graphs.positionHistory();
55+
d3Graphs.windowResize();
56+
$("#hudHeader, #hudButtons").show();
5757
$("#history").show();
5858
$("#graphIcon").show();
5959
$("#importExportBtns").show();
6060
$("#graphIcon").click(d3Graphs.graphIconClick);
6161
$("#history .close").click(d3Graphs.closeHistogram);
6262
$("#history ul li").click(d3Graphs.clickTimeline);
6363
$("#handle").draggable({axis: 'x',containment: "parent",grid:[this.handleInterval, this.handleInterval], stop: d3Graphs.dropHandle, drag: d3Graphs.dropHandle });
64-
$("#hudHeader .searchBtn").click(d3Graphs.updateViz);
64+
$("#hudButtons .searchBtn").click(d3Graphs.updateViz);
6565
$("#importExportBtns .imex>div").not(".label").click(d3Graphs.importExportBtnClick);
6666
$("#importExportBtns .imex .label").click(d3Graphs.importExportLabelClick);
67-
$("#hudHeader .countryTextInput").autocomplete({ source:selectableCountries, autoFocus: true });
68-
$("#hudHeader .countryTextInput").keyup(d3Graphs.countryKeyUp);
69-
$("#hudHeader .countryTextInput").focus(d3Graphs.countryFocus);
70-
$("#hudHeader .aboutBtn").click(d3Graphs.toggleAboutBox);
67+
$("#hudButtons .countryTextInput").autocomplete({ source:selectableCountries, autoFocus: true });
68+
$("#hudButtons .countryTextInput").keyup(d3Graphs.countryKeyUp);
69+
$("#hudButtons .countryTextInput").focus(d3Graphs.countryFocus);
70+
$("#hudButtons .aboutBtn").click(d3Graphs.toggleAboutBox);
7171
$(document).on("click",".ui-autocomplete li",d3Graphs.menuItemClick);
7272
$(window).resize(d3Graphs.windowResizeCB);
7373
$(".zoomBtn").mousedown(d3Graphs.zoomBtnClick);
@@ -109,20 +109,42 @@ var d3Graphs = {
109109
},
110110
windowResizeCB:function() {
111111
clearTimeout(d3Graphs.windowResizeTimeout);
112-
d3Graphs.windowResizeTimeout = setTimeout(d3Graphs.positionHistory, 250);
112+
d3Graphs.windowResizeTimeout = setTimeout(d3Graphs.windowResize, 50);
113113
},
114-
positionHistory: function() {
114+
windowResize: function() {
115+
var windowWidth = $(window).width();
116+
var windowHeight = $(window).height();
117+
d3Graphs.positionHistory(windowWidth);
118+
var minWidth = 1280;
119+
var w = windowWidth < minWidth ? minWidth : windowWidth;
120+
var hudButtonWidth = 489;
121+
$('#hudButtons').css('left',w - hudButtonWidth-20);
122+
var importExportButtonWidth = $("#importExportBtns").width();
123+
$("#importExportBtns").css('left',w-importExportButtonWidth - 20);
124+
/*
125+
var hudHeaderLeft = $("#hudHeader").css('left');
126+
hudHeaderLeft = hudHeaderLeft.substr(0,hudHeaderLeft.length-2)
127+
console.log(hudHeaderLeft);
128+
var hudPaddingRight = 30;
129+
$("#hudHeader").width(w-hudHeaderLeft - hudPaddingRight);
130+
*/
131+
},
132+
positionHistory: function(windowWidth) {
115133
var graphIconPadding = 20;
116134
var historyWidth = $("#history").width();
117135
var totalWidth = historyWidth + $("#graphIcon").width() + graphIconPadding;
118-
var windowWidth = $(window).width();
136+
// var windowWidth = $(window).width();
119137
var historyLeftPos = (windowWidth - totalWidth) / 2.0;
138+
var minLeftPos = 280;
139+
if(historyLeftPos < minLeftPos) {
140+
historyLeftPos = minLeftPos;
141+
}
120142
$("#history").css('left',historyLeftPos+"px");
121143
$("#graphIcon").css('left',historyLeftPos + historyWidth + graphIconPadding+'px');
122144
},
123145
countryFocus:function(event) {
124146
//console.log("focus");
125-
setTimeout(function() { $('#hudHeader .countryTextInput').select() },50);
147+
setTimeout(function() { $('#hudButtons .countryTextInput').select() },50);
126148
},
127149
menuItemClick:function(event) {
128150
d3Graphs.updateViz();
@@ -140,7 +162,7 @@ var d3Graphs = {
140162
yearOffset /= d3Graphs.handleInterval;
141163
var year = yearOffset + 1992;
142164

143-
var country = $("#hudHeader .countryTextInput").val().toUpperCase();
165+
var country = $("#hudButtons .countryTextInput").val().toUpperCase();
144166
if(typeof countryData[country] == 'undefined') {
145167
return;
146168
}

‎js/util.js

+6-1
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,12 @@ function screenXY(vec3){
7070
var projector = new THREE.Projector();
7171
var vector = projector.projectVector( vec3.clone(), camera );
7272
var result = new Object();
73-
result.x = Math.round( vector.x * (window.innerWidth/2) ) + window.innerWidth/2;
73+
var windowWidth = window.innerWidth;
74+
var minWidth = 1280;
75+
if(windowWidth < minWidth) {
76+
windowWidth = minWidth;
77+
}
78+
result.x = Math.round( vector.x * (windowWidth/2) ) + windowWidth/2;
7479
result.y = Math.round( (0-vector.y) * (window.innerHeight/2) ) + window.innerHeight/2;
7580
return result;
7681
}

0 commit comments

Comments
 (0)