ben.burlingham
/
buoy-analysis
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor for site update.

Browse Source
master
Ben Burlingham 9 years ago
parent fdab2ae3b5
commit d6a0b44f94
6 changed files with 227 additions and 168 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 274
      css/index.css
  2. 3
      index.html
  3. 98
      js/chart.js
  4. 6
      js/chart3.js
  5. 6
      js/data.js
  6. 8
      js/map.js

274
css/index.css
Unescape View File

@ -1,105 +1,133 @@
* { * {
box-sizing: border-box; box-sizing: border-box;
cursor: default; cursor: default;
letter-spacing: 0.7px; margin: 0;
margin: 0; padding: 0;
padding: 0; } }
.main { .main {
height: 920px; height: 900px;
margin: 10px auto 100px auto; margin: 10px auto 100px auto;
padding: 50px 20px; padding: 20px;
position: relative; position: relative;
width: 800px; } width: 1040px;
}
#chart { #chart {
cursor: pointer; cursor: pointer;
height: 880px; height: 200px;
left: 540px; left: 50%;
position: absolute; margin-left:-450px;
top: 20px; position: absolute;
width: 220px; } top: 640px;
#chart svg { width: 900px;
margin-left: 30px; }
height: 100%;
width: 210px; } #chart svg {
height: 200px;
width: 100%;
}
#year-labels { #year-labels {
font-size: 0; font-size: 0;
height: 100%; height: 30px;
left: 540px; left: 50%;
padding-top: 15px; margin-left:-450px;
position: absolute; padding-left:30px;
top: 20px; position: absolute;
width: 30px; } top: 840px;
#year-labels .label { width: 900px;
}
#year-labels .label {
color: #777; color: #777;
cursor: pointer; cursor: pointer;
display:inline-block;
font-size: 9px; font-size: 9px;
height: 23px; height:30px;
line-height: 20px; line-height: 30px;
margin-bottom: 2px; margin-right:2px;
text-align: center; } text-align:center;
vertical-align:top;
width: 23px;
}
.year-toggle:hover { .year-toggle:hover {
background: #eee; } background: #eee;
}
.axis .domain { .axis .domain {
fill: none; fill: none;
stroke: none; } stroke: none;
}
.axis .tick { .axis .tick {
fill: #aaa; fill: #aaa;
font-size: 10px; } font-size: 10px;
}
.label-axis-x { .label-axis-x {
fill: #aaa; fill: #aaa;
font-size: 10px; font-size: 10px;
letter-spacing: normal; } letter-spacing: normal;
}
.tick-line { .tick-line {
stroke: #f0f0f0; } stroke: #f0f0f0;
}
#chart3 { #chart3 {
height: 260px; height: 300px;
left: 20px; left: 20px;
position: absolute; position: absolute;
top: 640px; top: 20px;
width: 500px; } width: 480px;
}
#map { #map {
border: 1px solid #e8e8e8; border: 1px solid #e8e8e8;
height: 600px; height: 600px;
position: relative; left:520px;
width: 500px; position: absolute;
z-index: 0; } top:20px;
#map svg { width: 500px;
z-index: 0;
}
#map svg {
height: 100%; height: 100%;
width: 100%; } width: 100%;
}
.feature { .feature {
fill: #f7f7f7; fill: #f7f7f7;
stroke: #ccc; } stroke: #ccc;
}
.reticle { .reticle {
cursor: move; cursor: move;
fill: rgba(153, 173, 40, 0.2); fill: rgba(153, 173, 40, 0.2);
stroke: #5D5336; } stroke: #5D5336;
}
.column-display { .column-display {
cursor: pointer; cursor: pointer;
height: 210px; height: 210px;
left: 40px; left: 40px;
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
top: 330px; top: 380px;
width: 180px; } width: 180px;
.column-display select { }
.column-display select {
background: 0; background: 0;
border: 0; border: 0;
outline: 0; outline: 0;
width: 200px; } width: 200px;
.column-display .toggle { }
.column-display .toggle {
background: 0; background: 0;
color: #ccc; color: #ccc;
cursor: pointer; cursor: pointer;
@ -108,25 +136,36 @@
letter-spacing: 1.5px; letter-spacing: 1.5px;
line-height: 30px; line-height: 30px;
text-transform: uppercase; text-transform: uppercase;
transition: color 0.3s ease; } transition: color 0.3s ease;
.column-display .toggle:hover { }
color: #777; }
.column-display .toggle.selected { .column-display .toggle:hover {
color: #444; color: #777;
cursor: default; }
font-weight: bold; }
.column-display .toggle.selected {
color: #444;
cursor: default;
font-weight: bold;
}
.reticle-sizer { .reticle-sizer {
left: 40px; height:60px;
position: absolute; left: 240px;
top: 520px; position: absolute;
z-index: 1; } top: 380px;
width:160px;
z-index: 1;
}
.bar-display { .bar-display {
left: 40px; left: 240px;
position: absolute; position: absolute;
top: 560px; } top: 460px;
.bar-display .toggle { width:160px;
}
.bar-display .toggle {
background-image: url("../bar-display.png"); background-image: url("../bar-display.png");
background-repeat: no-repeat; background-repeat: no-repeat;
cursor: pointer; cursor: pointer;
@ -136,38 +175,53 @@
margin-right: 15px; margin-right: 15px;
opacity: 0.15; opacity: 0.15;
transition: opacity 0.3s ease; transition: opacity 0.3s ease;
width: 30px; } width: 30px;
.bar-display .toggle:hover { }
opacity: 1; }
.bar-display .toggle.selected { .bar-display .toggle:hover {
cursor: default; opacity: 1;
opacity: 1; } }
.bar-display .toggle1 {
background-position: -60px 10px; } .bar-display .toggle.selected {
.bar-display .toggle2 { cursor: default;
background-position: -30px 10px; } opacity: 1;
.bar-display .toggle3 { }
background-position: 0 10px; }
.bar-display .toggle1 {
background-position: -60px 10px;
}
.bar-display .toggle2 {
background-position: -30px 10px;
}
.bar-display .toggle3 {
background-position: 0 10px;
}
input[type=range] { input[type=range] {
cursor: pointer; cursor: pointer;
-webkit-appearance: none; } -webkit-appearance: none;
}
input[type=range]::-webkit-slider-runnable-track { input[type=range]::-webkit-slider-runnable-track {
background: #ddd; background: #ddd;
border: none; border: none;
border-radius: 3px; border-radius: 3px;
height: 2px; height: 2px;
width: 300px; } width: 300px;
}
input[type=range]::-webkit-slider-thumb { input[type=range]::-webkit-slider-thumb {
background: #d8ebd3; background: #d8ebd3;
border: 2px solid #5D5336; border: 2px solid #5D5336;
border-radius: 50%; border-radius: 50%;
height: 16px; height: 16px;
margin-top: -7px; margin-top: -7px;
width: 16px; width: 16px;
-webkit-appearance: none; } -webkit-appearance: none;
}
input[type=range]:focus { input[type=range]:focus {
outline: none; } outline: none;
}

3
index.html
Unescape View File

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title></title> <title>Buoy Analysis</title>
<link href='css/index.css' rel='stylesheet' type='text/css'> <link href='css/index.css' rel='stylesheet' type='text/css'>
<script src='/core/js/ui.js'></script> <script src='/core/js/ui.js'></script>
</head> </head>
@ -19,6 +19,7 @@
<br><br> <br><br>
Visualization should invite interaction to create and answer questions such as: Visualization should invite interaction to create and answer questions such as:
<ul> <ul>
<li>Why are ocean temperatures generally lowest in spring rather than winter?</li>
<li>Are ocean temperatures increasing?</li> <li>Are ocean temperatures increasing?</li>
<li>What are the visible effects of El Nino?</li> <li>What are the visible effects of El Nino?</li>
<li>What is the temperature of the ocean near San Francisco?</li> <li>What is the temperature of the ocean near San Francisco?</li>

98
js/chart.js
Unescape View File

@ -7,8 +7,8 @@ var BuoyAnalysisChart = {
bars: { bars: {
padding: 15, padding: 15,
spacing: 2, spacing: 2,
height: 23, height: 200,
width: 190, width: 23,
color: '#f00', color: '#f00',
showMonths: true, showMonths: true,
@ -30,16 +30,16 @@ var BuoyAnalysisChart = {
/** /**
* *
*/ */
barYearY: function(d, i) { barYearX: function(d, i) {
return i * BuoyAnalysisChart.bars.height + i * BuoyAnalysisChart.bars.spacing + BuoyAnalysisChart.bars.padding; return i * BuoyAnalysisChart.bars.width + i * BuoyAnalysisChart.bars.spacing + 30;
}, },
/** /**
* *
*/ */
barMonthY: function(d, i) { barMonthX: function(d, i) {
var year = Math.floor(i / 12); var year = Math.floor(i / 12);
return year * BuoyAnalysisChart.bars.height + BuoyAnalysisChart.bars.padding + year * BuoyAnalysisChart.bars.spacing + (i % 12) * 2; return year * BuoyAnalysisChart.bars.width + year * BuoyAnalysisChart.bars.spacing + (i % 12) * 2 + 30;
}, },
/** /**
@ -72,29 +72,29 @@ var BuoyAnalysisChart = {
chart.append("g") chart.append("g")
.classed('axis', true) .classed('axis', true)
.classed('axis-imperial', true) .classed('axis-imperial', true)
.attr('transform', 'translate(0, 19)') .attr('transform', 'translate(0, 0)')
.attr('fill', '#000') .attr('fill', '#000')
.call(BuoyAnalysisChart.axis.imperial); .call(BuoyAnalysisChart.axis.imperial);
chart.append("g") chart.append("g")
.classed('axis', true) .classed('axis', true)
.classed('axis-metric', true) .classed('axis-metric', true)
.attr('transform', 'translate(0, 860)') .attr('transform', 'translate(875, 0)')
.call(BuoyAnalysisChart.axis.metric); .call(BuoyAnalysisChart.axis.metric);
chart.append('text') chart.append('text')
.classed('label-axis-x', true) .classed('label-axis-x', true)
.attr('text-anchor', 'middle') .attr('text-anchor', 'middle')
.text(BuoyAnalysisChart.bars.imperialLabel) .text(BuoyAnalysisChart.bars.imperialLabel)
.attr('x', 180) .attr('x', 20)
.attr('y', 10) .attr('y', 10)
chart.append('text') chart.append('text')
.classed('label-axis-x', true) .classed('label-axis-x', true)
.attr('text-anchor', 'middle') .attr('text-anchor', 'middle')
.text(BuoyAnalysisChart.bars.metricLabel) .text(BuoyAnalysisChart.bars.metricLabel)
.attr('x', 180) .attr('x', 890)
.attr('y', 876) .attr('y', 10)
}, },
/** /**
@ -116,7 +116,7 @@ var BuoyAnalysisChart = {
b += parseInt(tmp[2], 16); b += parseInt(tmp[2], 16);
}); });
BuoyAnalysisChart.bars.color = 'rgba(' + avg(r) + ',' + avg(g) + ',' + avg(b) + ', 0.1)'; BuoyAnalysisChart.bars.color = 'rgba(' + avg(r) + ',' + avg(g) + ',' + avg(b) + ', 0.5)';
}, },
/** /**
@ -125,7 +125,7 @@ var BuoyAnalysisChart = {
updateAxes: function() { updateAxes: function() {
switch(BuoyAnalysisData.property) { switch(BuoyAnalysisData.property) {
case 'at': case 'at':
BuoyAnalysisChart.bars.tickValues = [8, 12, 16, 20]; BuoyAnalysisChart.bars.tickValues = [4, 8, 12, 16, 20];
BuoyAnalysisChart.bars.imperialLabel = '°F'; BuoyAnalysisChart.bars.imperialLabel = '°F';
BuoyAnalysisChart.bars.metricLabel = '°C'; BuoyAnalysisChart.bars.metricLabel = '°C';
@ -135,7 +135,7 @@ var BuoyAnalysisChart = {
break; break;
case 'wt': case 'wt':
BuoyAnalysisChart.bars.tickValues = [8, 12, 16, 20]; BuoyAnalysisChart.bars.tickValues = [4, 8, 12, 16, 20];
BuoyAnalysisChart.bars.imperialLabel = '°F'; BuoyAnalysisChart.bars.imperialLabel = '°F';
BuoyAnalysisChart.bars.metricLabel = '°C'; BuoyAnalysisChart.bars.metricLabel = '°C';
@ -155,7 +155,7 @@ var BuoyAnalysisChart = {
break; break;
case 'wp': case 'wp':
BuoyAnalysisChart.bars.tickValues = [5, 7, 9, 11, 13]; BuoyAnalysisChart.bars.tickValues = [3, 5, 7, 9, 11, 13];
BuoyAnalysisChart.bars.imperialLabel = 'SEC'; BuoyAnalysisChart.bars.imperialLabel = 'SEC';
BuoyAnalysisChart.bars.metricLabel = 'SEC'; BuoyAnalysisChart.bars.metricLabel = 'SEC';
@ -198,38 +198,40 @@ var BuoyAnalysisChart = {
chart.selectAll('.bar-month').remove(); chart.selectAll('.bar-month').remove();
chart.selectAll('.tick-line').remove(); chart.selectAll('.tick-line').remove();
chart.append('line') // chart.append('line')
.classed('tick-line', true) // .classed('tick-line', true)
.attr('x1', 1) // .attr('x1', 1)
.attr('x2', 1) // .attr('x2', 1)
.attr('y1', 15) // .attr('y1', 15)
.attr('y2', h) // .attr('y2', h)
//
chart.append('line') // chart.append('line')
.classed('tick-line', true) // .classed('tick-line', true)
.attr('x1', BuoyAnalysisChart.axis.scale(BuoyAnalysisChart.bars.tickValues[0])) // .attr('x1', BuoyAnalysisChart.axis.scale(BuoyAnalysisChart.bars.tickValues[0]))
.attr('x2', BuoyAnalysisChart.axis.scale(BuoyAnalysisChart.bars.tickValues[0])) // .attr('x2', BuoyAnalysisChart.axis.scale(BuoyAnalysisChart.bars.tickValues[0]))
.attr('y1', 15) // .attr('y1', 15)
.attr('y2', h) // .attr('y2', h)
//
chart.append('line') // chart.append('line')
.classed('tick-line', true) // .classed('tick-line', true)
.attr('x1', BuoyAnalysisChart.axis.scale(BuoyAnalysisChart.bars.tickValues[BuoyAnalysisChart.bars.tickValues.length - 1])) // .attr('x1', BuoyAnalysisChart.axis.scale(BuoyAnalysisChart.bars.tickValues[BuoyAnalysisChart.bars.tickValues.length - 1]))
.attr('x2', BuoyAnalysisChart.axis.scale(BuoyAnalysisChart.bars.tickValues[BuoyAnalysisChart.bars.tickValues.length - 1])) // .attr('x2', BuoyAnalysisChart.axis.scale(BuoyAnalysisChart.bars.tickValues[BuoyAnalysisChart.bars.tickValues.length - 1]))
.attr('y1', 15) // .attr('y1', 15)
.attr('y2', h) // .attr('y2', h)
if (BuoyAnalysisChart.bars.showYears === true) { if (BuoyAnalysisChart.bars.showYears === true) {
chart.selectAll('.bar-year').data(years).enter() chart.selectAll('.bar-year').data(years).enter()
.append('rect') .append('rect')
.classed('bar-year', true) .classed('bar-year', true)
.attr('fill', BuoyAnalysisChart.bars.color) .attr('fill', BuoyAnalysisChart.bars.color)
.attr('height', 23) .attr('width', BuoyAnalysisChart.bars.width)
.attr('width', function(d) { .attr('height', function(d) {
return BuoyAnalysisChart.axis.scale(d.average); return BuoyAnalysisChart.axis.scale(d.average);
}) })
.attr('x', 0) .attr('x', BuoyAnalysisChart.barYearX)
.attr('y', BuoyAnalysisChart.barYearY) .attr('y', function(d) {
return BuoyAnalysisChart.bars.height - BuoyAnalysisChart.axis.scale(d.average);
})
} }
if (BuoyAnalysisChart.bars.showMonths === true) { if (BuoyAnalysisChart.bars.showMonths === true) {
@ -237,18 +239,14 @@ var BuoyAnalysisChart = {
.append('rect') .append('rect')
.classed('bar-month', true) .classed('bar-month', true)
.attr('fill', 'rgba(0, 0, 0, 0.2)') .attr('fill', 'rgba(0, 0, 0, 0.2)')
.attr('height', 1) .attr('width', 1)
.attr('width', function(d) { .attr('height', function(d) {
var w = BuoyAnalysisChart.axis.scale(d.average); return BuoyAnalysisChart.axis.scale(d.average);
})
if (w <= 20) { .attr('x', BuoyAnalysisChart.barMonthX)
return 0; .attr('y', function(d) {
} return BuoyAnalysisChart.bars.height - BuoyAnalysisChart.axis.scale(d.average);
return w;
}) })
.attr('x', 0)
.attr('y', BuoyAnalysisChart.barMonthY)
} }
} }
}; };

6
js/chart3.js
Unescape View File

@ -2,8 +2,8 @@
var BuoyAnalysisChart3 = { var BuoyAnalysisChart3 = {
h: 258, h: 300,
w: 498, w: 480,
components: {}, components: {},
scene: null, scene: null,
@ -111,7 +111,7 @@ var BuoyAnalysisChart3 = {
BuoyAnalysisChart3.controls = new THREE.OrbitControls( BuoyAnalysisChart3.camera, BuoyAnalysisChart3.renderer.domElement ); BuoyAnalysisChart3.controls = new THREE.OrbitControls( BuoyAnalysisChart3.camera, BuoyAnalysisChart3.renderer.domElement );
BuoyAnalysisChart3.controls.target = new THREE.Vector3(200, 100, 0); BuoyAnalysisChart3.controls.target = new THREE.Vector3(200, 100, 0);
// BuoyAnalysisChart3.controls.minPolarAngle = 50 * Math.PI / 180; // radians // BuoyAnalysisChart3.controls.minPolarAngle = 50 * Math.PI / 180; // radians
// BuoyAnalysisChart3.controls.maxPolarAngle = 90 * Math.PI / 180; // radians // BuoyAnalysisChart3.controls.maxPolarAngle = 90 * Math.PI / 180; // radians

6
js/data.js
Unescape View File

@ -68,11 +68,11 @@ var BuoyAnalysisData = {
} }
BuoyAnalysisChart.axis.scale = d3.scale.linear().domain([0, BuoyAnalysisChart.axis.max]) BuoyAnalysisChart.axis.scale = d3.scale.linear().domain([0, BuoyAnalysisChart.axis.max])
.range([0, BuoyAnalysisChart.bars.width]); .range([0, BuoyAnalysisChart.bars.height]);
BuoyAnalysisChart.axis.imperial = d3.svg.axis() BuoyAnalysisChart.axis.imperial = d3.svg.axis()
.scale(BuoyAnalysisChart.axis.scale) .scale(BuoyAnalysisChart.axis.scale)
.orient("top") .orient("right")
.tickFormat(function(d) { .tickFormat(function(d) {
var val; var val;
@ -98,7 +98,7 @@ var BuoyAnalysisData = {
BuoyAnalysisChart.axis.metric = d3.svg.axis() BuoyAnalysisChart.axis.metric = d3.svg.axis()
.scale(BuoyAnalysisChart.axis.scale) .scale(BuoyAnalysisChart.axis.scale)
.orient("bottom") .orient("right")
.tickValues(tickValues); .tickValues(tickValues);
}, },

8
js/map.js
Unescape View File

@ -1,5 +1,11 @@
'use strict'; 'use strict';
// ogr2ogr -f "esri shapefile" -where "sov_a3 = 'MEX'" merged.shp countries.shp
// ogr2ogr -f "esri shapefile" -update -append merged.shp states.shp
// ogr2ogr -f GeoJSON -clipsrc -105 30 -125 43 map.json merged.shp
// ogr2ogr -f GeoJSON places.json places.shp
// topojson -o test.json _map.json
var BuoyAnalysisMap = { var BuoyAnalysisMap = {
/** /**
* *
@ -24,7 +30,7 @@ var BuoyAnalysisMap = {
/** /**
* *
*/ */
stationColorScale: d3.scale.linear().domain([42, 37.5, 33]).range(['blue', 'orange', 'purple']), stationColorScale: d3.scale.linear().domain([42, 37.5, 33]).range(['blue', 'orange', '#DC0953']),
/** /**
* *

Write Preview
Loading…
Cancel
Save