|
// Transpiled with Babel |
|
"use strict"; |
|
|
|
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); |
|
|
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } |
|
|
|
var display = d3.select("#display"); |
|
var label = d3.select("#label"); |
|
|
|
// STARTUP (parse CSV) |
|
d3.csv("planet-data.csv", row, start); |
|
|
|
function row(d) { |
|
return { |
|
name: d.Body, |
|
radius: +d["Mean radius (km)"] |
|
}; |
|
} |
|
|
|
function start(d) { |
|
var planets = new planetDisplay(d); |
|
planets.initDisplay(); |
|
|
|
// On click, transition to other scale |
|
d3.select(document).on("click", planets.updateDisplay.bind(planets)); |
|
} |
|
|
|
// TODO: use scale instead of radius (more efficient transitions) |
|
// also clean up this mess... |
|
|
|
var planetDisplay = function () { |
|
function planetDisplay(data) { |
|
_classCallCheck(this, planetDisplay); |
|
|
|
this.data = data; |
|
this.xSum = 0; |
|
this.spacing = 2; |
|
this.currentScale = "linear"; |
|
this.radiusData = data.map(function (datum) { |
|
return datum.radius; |
|
}); |
|
this.rScale = d3.scaleLinear().domain(d3.extent(this.radiusData)).range([0.1, 1.5]); |
|
} |
|
|
|
// Changes scale to linear (if currentScale is log), or to log (if currentScale is linear) |
|
|
|
|
|
_createClass(planetDisplay, [{ |
|
key: "toggleScale", |
|
value: function toggleScale() { |
|
if (this.currentScale === "linear") { |
|
this.rScale = d3.scaleLog().domain(d3.extent(this.radiusData)).range([0.1, 1.5]); |
|
this.currentScale = "log"; |
|
} else { |
|
this.rScale = d3.scaleLinear().domain(d3.extent(this.radiusData)).range([0.1, 1.5]); |
|
this.currentScale = "linear"; |
|
} |
|
label.attr("value", this.currentScale); |
|
} |
|
|
|
// Calculates x-coordinate of a sphere given radius and index |
|
|
|
}, { |
|
key: "positioner", |
|
value: function positioner(d, i) { |
|
var currentRadius = this.rScale(d.radius); |
|
var previousRadius; |
|
if (i === 0) { |
|
previousRadius = 0; |
|
} else { |
|
previousRadius = this.rScale(this.data[i - 1].radius); |
|
} |
|
|
|
// (previousRadius + currentRadius) has spheres touching, (spacing) ensures separation |
|
this.xSum += previousRadius + currentRadius + this.spacing; |
|
var x = this.xSum; |
|
var y = currentRadius; |
|
var z = 0; |
|
return x + " " + y + " " + z; |
|
} |
|
}, { |
|
key: "centerDisplay", |
|
value: function centerDisplay() { |
|
var _this = this; |
|
|
|
display.attr("position", function () { |
|
var x = -(_this.xSum / 2) - 2; |
|
var y = 0; |
|
var z = -7; |
|
return x + " " + y + " " + z; |
|
}); |
|
} |
|
}, { |
|
key: "initDisplay", |
|
value: function initDisplay() { |
|
var _this2 = this; |
|
|
|
display.selectAll("a-sphere").data(this.data).enter().append("a-sphere").attr("position", this.positioner.bind(this)).attr("src", function (d) { |
|
return "#" + d.name.toLowerCase(); |
|
} |
|
//.attr("radius", (d) => this.rScale(d.radius)) |
|
// Radius is encoded in scale (for performance) |
|
).attr("scale", function (d) { |
|
var radius = _this2.rScale(d.radius); |
|
return radius + " " + radius + " " + radius; |
|
}); |
|
|
|
this.centerDisplay(); |
|
} |
|
}, { |
|
key: "updateDisplay", |
|
value: function updateDisplay() { |
|
this.xSum = 0; |
|
this.toggleScale(); |
|
|
|
var self = this; |
|
display.selectAll("a-sphere").data(this.data).attr("position", this.positioner.bind(this)); |
|
|
|
display.selectAll("a-sphere").data(this.data).transition().duration(2000 |
|
// .attrTween("radius", function (d, i) { |
|
// var el = d3.select(this); |
|
// var oldRadius = AFRAME.utils.coordinates.stringify(el.attr("radius")); |
|
// return d3.interpolate(oldRadius, self.rScale(d.radius)); |
|
// }) |
|
).attrTween("scale", function (d, i) { |
|
var el = d3.select(this); |
|
var oldScale = AFRAME.utils.coordinates.stringify(el.attr("scale")); |
|
var newScale = self.rScale(d.radius); |
|
newScale = newScale + " " + newScale + " " + newScale; |
|
return d3.interpolate(oldScale, newScale); |
|
}); |
|
|
|
this.centerDisplay(); |
|
} |
|
}]); |
|
|
|
return planetDisplay; |
|
}(); |