Skip to content

Commit

Permalink
Resolved merge conflict
Browse files Browse the repository at this point in the history
  • Loading branch information
@Cdkushni
Cdkushni committed Sep 16, 2018
2 parents e9b8850 + 2b28105 commit d57b65d
Show file tree
Hide file tree
Showing 5 changed files with 286 additions and 58 deletions.
12 changes: 6 additions & 6 deletions src/3js_resources/globeScene.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export default class globeScene {
this.countryMap = null;
this.currentCountry = null;
this.overlay = null;
this.textureCache = null;
this.textureCache = {};
this.geo = null;
this.satelliteRefs = {};
this.planeRefs = {};
Expand Down Expand Up @@ -76,9 +76,9 @@ export default class globeScene {
const countries = topojsonFeature(data, data.objects.countries);

this.geo = geodecoder(countries.features);
this.textureCache = memoize((id, color) => {
this.textureCache = memoize((id) => {
const country = this.geo.find(id);
return mapTexture(country, color);
return mapTexture(country);
});

let oceanMaterial = new THREE.MeshBasicMaterial();
Expand All @@ -90,7 +90,7 @@ export default class globeScene {
this.earthMesh.addEventListener('click', (e) => this.onGlobeClick(e, this.earthMesh));

// add base map layer with all countries
let worldTexture = mapTexture(countries, '#000000');
let worldTexture = mapTexture(countries);
let mapMaterial = new THREE.MeshBasicMaterial({map: worldTexture, transparent: true, opacity: 0.9});
let baseMap = new THREE.Mesh(new THREE.SphereGeometry(456, segments, segments), mapMaterial);
baseMap.rotation.y = Math.PI;
Expand Down Expand Up @@ -471,11 +471,11 @@ function saveArrayBuffer( buffer, filename ) {
const fs = require('fs');
var path = require('path');
//fs.appendFile(path.join(__dirname, 'scene.glb'),new Buffer(buffer));
var ie_writeFile = function (filename, buffer) {
/*var ie_writeFile = function (filename, buffer) {
var fso, fileHandle;
fso = new ActiveXObject("Scripting.FileSystemObject");
fileHandle = fso.CreateTextFile("c:\test.glb", true);
fileHandle.write(data);
fileHandle.close();
};
};*/
}
82 changes: 61 additions & 21 deletions src/common/mapTexture.js
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,81 @@
import * as THREE from 'three';
import * as d3 from 'd3';

var projection = d3.geoEquirectangular()
.translate([1024, 512])
.scale(325);
export function mapTexture(geojson, dataMap, min, max) {
const projection = d3.geoEquirectangular()
.translate([1024, 512])
.scale(325);

let colorScale = null;
if (dataMap && min && max) {
colorScale = d3.scaleLinear()
.domain([
min,
((max - min) / 10) + min,
2 * ((max - min) / 10) + min,
3 * ((max - min) / 10) + min,
4 * ((max - min) / 10) + min,
5 * ((max - min) / 10) + min,
6 * ((max - min) / 10) + min,
7 * ((max - min) / 10) + min,
8 * ((max - min) / 10) + min,
9 * ((max - min) / 10) + min,
max
])
.range([
'#fee5e1',
'#fdd0cc',
'#fbb6bc',
'#fa95b1',
'#f768a1',
'#e24099',
'#c11b88',
'#99017b',
'#700074',
'#49006a'
]);
}

export function mapTexture(geojson, color) {
var texture, context, canvas;

canvas = d3.select("body").append("canvas")
.style("display", "none")
.attr("width", "2048px")
.attr("height", "1024px");
canvas = d3.select('body').append('canvas')
.style('display', 'none')
.attr('width', '2048px')
.attr('height', '1024px');

context = canvas.node().getContext("2d");
context = canvas.node().getContext('2d');

var path = d3.geoPath()
.projection(projection)
.context(context);

context.strokeStyle = "#333";
context.lineWidth = 1;
context.fillStyle = color || "#CDB380";

context.beginPath();
if (geojson.features) {
for (let i = 0; i < geojson.features.length; i++) {
const feature = geojson.features[i];

path(geojson);
context.strokeStyle = '#333';
context.lineWidth = 1;
if (dataMap) {
context.fillStyle = colorScale(dataMap[feature.id.toLowerCase()]);
} else {
context.fillStyle = '#FFFFFF';
}

if (color) {
context.beginPath();
path(feature.geometry);
context.fill();
context.stroke();
}
} else {
context.strokeStyle = '#333';
context.lineWidth = 1;
context.fillStyle = '#FFFFFF';
context.beginPath();
path(geojson);
context.fill();
context.stroke();
}

context.stroke();

// DEBUGGING - Really expensive, disable when done.
// console.log(canvas.node().toDataURL());

texture = new THREE.Texture(canvas.node());
texture.needsUpdate = true;

Expand Down
25 changes: 23 additions & 2 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,12 +92,33 @@
<body>
<div id="toolbar">earthspace</div>
<div id="content">
<div id="panel">
<div id="panelToolbar">
<div id="tabs">
<div id="listTab">
<i id="listIcon" class="material-icons tabIcon selected">list_alt</i>
</div>
<div id="layersTab">
<i id="layersIcon" class="material-icons tabIcon">layers</i>
</div>
</div>
<div id="minControl">
<i id="minIcon" class="material-icons">chevron_left</i>
</div>
<div id="dataContainer"></div>
</div>
<div id="listPanel" class="panel">
<div id="divider1" class="divider"></div>
<div id="selection">
No selection
</div>
<div id="divider2" class="divider"></div>
<div id="dataContainer">
<div id="dragAndDropContainer">
<i id="inputIcon" class="material-icons">note_add</i>
<div id="dragAndDropText">Drag and drop a CSV file</div>
</div>
</div>
</div>
<div id="layersPanel" class="panel hidden"></div>
<div id="minimizedPanel">
<i id="maxIcon" class="material-icons">chevron_right</i>
</div>
Expand Down
49 changes: 42 additions & 7 deletions src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,23 @@ const earth = new globeScene();
earth.init();
earth.animate();

document.getElementById('panel').ondragover = (e) => {
document.getElementById('listPanel').ondragover = (e) => {
e.preventDefault();
document.getElementById('panel').classList.add('dragOver');
document.getElementById('listPanel').classList.add('dragOver');
};

document.getElementById('panel').ondragleave = (e) => {
document.getElementById('listPanel').ondragleave = (e) => {
e.preventDefault();
document.getElementById('panel').classList.remove('dragOver');
document.getElementById('listPanel').classList.remove('dragOver');
};

document.getElementById('panel').ondrop = (e) => {
document.getElementById('listPanel').ondrop = (e) => {
e.preventDefault();

let dataMap = {};
let min = Infinity;
let max = 0;

if (e.dataTransfer.items) {
// Use DataTransferItemList interface to access the file(s)
for (let i = 0; i < e.dataTransfer.items.length; i++) {
Expand All @@ -27,6 +31,7 @@ document.getElementById('panel').ondrop = (e) => {
const reader = new FileReader();
reader.readAsText(file);
reader.onload = (e) => {
document.getElementById('dataContainer').removeChild(document.getElementById('dragAndDropContainer'));
const table = document.createElement('table');
table.setAttribute('id', 'table');
document.getElementById('dataContainer').appendChild(table);
Expand All @@ -37,15 +42,27 @@ document.getElementById('panel').ondrop = (e) => {
const row = rows[j].split(',');
const tableRow = document.createElement('tr');
table.appendChild(tableRow);
let key = null;
for (let k = 0; k < row.length; k++) {
const tableCell = document.createElement('td');
if (j === 0) {
tableCell.classList.add('header');
} else if (k === 0) {
key = row[k].toString().toLowerCase();
} else {
dataMap[key] = parseFloat(row[k]);
if (dataMap[key] < min) {
min = dataMap[key];
}
if (dataMap[key] > max) {
max = dataMap[key];
}
}
tableCell.innerText = row[k];
tableRow.appendChild(tableCell);
}
}
earth.choropleth(dataMap, min, max);
};
}
}
Expand All @@ -68,13 +85,31 @@ document.getElementById('panel').ondrop = (e) => {
document.getElementById('minIcon').onclick = (e) => {
e.preventDefault();
document.getElementById('earth').classList.add('fullscreen');
document.getElementById('panel').classList.add('hidden');
document.getElementById('listPanel').classList.add('minimized');
document.getElementById('layersPanel').classList.add('minimized');
document.getElementById('minimizedPanel').classList.add('shown');
};

document.getElementById('maxIcon').onclick = (e) => {
e.preventDefault();
document.getElementById('earth').classList.remove('fullscreen');
document.getElementById('panel').classList.remove('hidden');
document.getElementById('listPanel').classList.remove('minimized');
document.getElementById('layersPanel').classList.remove('minimized');
document.getElementById('minimizedPanel').classList.remove('shown');
};

document.getElementById('listIcon').onclick = (e) => {
e.preventDefault();
document.getElementById('listIcon').classList.add('selected');
document.getElementById('listPanel').classList.remove('hidden');
document.getElementById('layersIcon').classList.remove('selected');
document.getElementById('layersPanel').classList.add('hidden');
};

document.getElementById('layersIcon').onclick = (e) => {
e.preventDefault();
document.getElementById('layersIcon').classList.add('selected');
document.getElementById('layersPanel').classList.remove('hidden');
document.getElementById('listIcon').classList.remove('selected');
document.getElementById('listPanel').classList.add('hidden');
};
Loading

0 comments on commit d57b65d

Please sign in to comment.