470 components/asteroids.js
View file
@@ -0,0 +1,470 @@
(function(root) {

//drawGuideLines("guide-light", [0.42, 0.58]);
var sky, height, width;
var lunar_distance_scale, time_scale, size_scale, hmag_scale;
var LUNAR_DISTANCE, MAX_LDS;
var offsetTop, offsetBottom;
var ldParam = parseInt(getParameterByName('lds'), 10)
function draw() {
sky = d3.select("#sky");
var header_height = document.getElementById("metadata").offsetHeight + document.getElementById("ticks").offsetHeight;
var window_height = window.innerHeight;
height = window_height - header_height - 25;
width = ~~sky.style("width").replace("px", "");
sky.attr("height", height);

offsetTop = 40;
offsetBottom = 40;

LUNAR_DISTANCE = 384400; //km

MAX_LDS = isNaN(ldParam) ? 15 : ldParam;

lunar_distance_scale = d3.scale.linear()
.domain([0, MAX_LDS * LUNAR_DISTANCE])
.range([10, height - 50]);

var date = new Date();
time_scale = d3.time.scale()
.domain([d3.time.year.offset(date, 1), d3.time.year.offset(date, -1)])
.rangeRound([width, 0]);

size_scale = d3.scale.log()
.domain([30, 17])
.range([0.5, 4]);

hmag_scale = d3.scale.linear()
.domain([30, 29, 28, 27, 26, 25, 24, 23, 22, 21, 20, 19, 18])
.range([4.5, 6.5, 11.5, 17.5, 27, 42.5, 65, 90, 170, 210, 330, 670, 1000]);

drawGuideLines("guide-light", 4);
drawGuideLines("guide-light", 8);
drawRulers();
drawTimeAxis();
drawEarthAndMoon();
drawNeos();
setupControls();
}

/*
CA DistanceMinimum(LD/AU): "3.6/0.0094"
CA DistanceNominal(LD/AU): "3.7/0.0094"
Close-Approach (CA) Date (TDB)YYYY-mmm-DD HH:MM ± D_HH:MM: "2015-Mar-19 06:53 ±"
H(mag): "25.4"
Nsigma: "2.68e+03"
Object: "(2015 FK)"
Vinfinity(km/s): "6.98"
Vrelative(km/s): "7.02"
*/
function drawNeos() {
d3.csv("data/all.csv")
.row(function(d) {
if ( d["Object"] === "") return;
return {
ldMinimum: +(d["CA DistanceMinimum(LD/AU)"].split("/")[0]),
ldNominal: +(d["CA DistanceNominal(LD/AU)"].split("/")[0]),
closeApproach: moment(d["Close-Approach (CA) Date (TDB)YYYY-mmm-DD HH:MM ± D_HH:MM"].split("±")[0].trim(), "YYYY-MMMM-DD HH:mm"),
h: +d["H(mag)"],
name: d["Object"]
}
})
.get(function(errors, rows) {

rows = rows.filter(function(row) {
return row.ldNominal <= MAX_LDS + 0.5;
});

var asteroids = sky.append("g").attr("class", "asteroids");
asteroids.selectAll("asteroid")
.data(rows)
.enter()
.append("ellipse")
.attr("class", function(d) {
d.el = this;
var className = '';
if ( d.h < 21 ) {
className += " huge";
}
else if ( d.h < 24.5 ) {
className += " big";
}
else if ( d.h > 28 ) {
className += " small";
}

if (new RegExp('\(' + d.closeApproach._d.getFullYear() + '.*\)').test(d.name)) {
className += " new";
}

return className += " asteroid";
})
.attr("ry", function(d) {
return size_scale(d.h);
})
.attr("rx", function(d) {
return size_scale(d.h) - (Math.random() *.3);
})
.attr("cy", function(d) {
return lunar_distance_scale(d.ldMinimum * LUNAR_DISTANCE)
})
.attr("cx", function(d) {
return time_scale(d.closeApproach._d);
})
.attr("transform", function(d) {
if ( Math.random() * 2 > 1)
return "rotate(34, " + [time_scale(d.closeApproach._d), lunar_distance_scale(d.ldMinimum * LUNAR_DISTANCE)].join(",") + ")";
});

var bigOnes = rows.filter(function(val) { return val.h < 21 });
asteroids.selectAll('ruler-label')
.data(bigOnes)
.enter()
.append('text')
.attr("class", "ruler-label")
.text(function(d) {
try {
return /\((.*)\)/.exec(d.name)[1];
}
catch(e) {
return d.name;
}
})
.attr('x', function(d) {
return time_scale(d.closeApproach._d) - 110;
})
.attr('y', function(d) {
return lunar_distance_scale(d.ldMinimum * LUNAR_DISTANCE) + 20;
})
.attr('foo', function(d) {
drawLabelLine(asteroids, d3.select(this).node(), d3.select(d.el).node())
});

asteroids.selectAll("asteroid-rings")
.data(rows)
.enter()
.append("circle")
.attr("class", function(d) {
d.ringEl = this;
var className = 'asteroid-rings';
if ( d.h < 21 ) {
className += " asteroid-rings-huge";
}
else if ( d.h <= 24.5 ) {
className += " asteroid-rings-big";
}

if (new RegExp('\(' + d.closeApproach._d.getFullYear() + '.*\)').test(d.name)) {
className += " asteroid-rings-new";
}


return className;
})
.attr("r", 30)
.attr("cx", function(d) {
return time_scale(d.closeApproach._d)
})
.attr("cy", function(d) {
return lunar_distance_scale(d.ldMinimum * LUNAR_DISTANCE)
});

drawVoronoi(rows);
});
}

function setupControls() {
document.querySelector('input[name=show-big]').addEventListener('change', function(e) {
document.body.classList.toggle('show-rings-big');
});
document.querySelector('input[name=show-huge]').addEventListener('change', function(e) {
document.body.classList.toggle('show-rings-huge');
});
document.querySelector('input[name=show-onlight]').addEventListener('change', function(e) {
document.body.classList.toggle('onlight');
});
document.querySelector('input[name=show-new]').addEventListener('change', function(e) {
document.body.classList.toggle('show-rings-new');
});

if (getParameterByName('show-huge-rocks') == 'true') {
document.body.classList.add('show-rings-huge')
document.querySelector('input[name=show-huge]').checked = true
}
}

function drawEarthAndMoon() {
var earthAndMoon = sky.append("g").attr("class", "earth-and-moon");

var earth = earthAndMoon.append("circle")
.attr("class", "earth")
.attr("r", 12)
.attr("cx", width / 2)
.attr("cy", 0)

var earthLabel = earthAndMoon.append("text")
.attr("class", "ruler-label")
.text("Earth")
.attr("x", width / 2 + 90)
.attr("y", 40)

drawLabelLine(earthAndMoon, earthLabel.node(), earth.node(), true);

var moon = earthAndMoon.append("circle")
.attr("class", "moon")
.attr("r", 3.5)
.attr("cx", width / 2)
.attr("cy", lunar_distance_scale(LUNAR_DISTANCE))

var moonLabel = earthAndMoon.append("text")
.attr("class", "ruler-label")
.text("Moon")
.attr("x", width / 2 + 83)
.attr("y", lunar_distance_scale(LUNAR_DISTANCE) + 35)

drawLabelLine(earthAndMoon, moonLabel.node(), moon.node(), true);

earthAndMoon.append("circle")
.attr("class", "moon-orbit")
.attr("r", lunar_distance_scale(LUNAR_DISTANCE))
.attr("cx", width / 2)
.attr("cy", 0);
}

function drawGuideLines(classname, months) {
var date = new Date();
var guides = sky.append("g");

guides.selectAll("guide")
.data([time_scale(d3.time.month.offset(date, -1 * months)), time_scale(d3.time.month.offset(date, months))])
.enter()
.append("line")
.attr("x1", function(d) {
return d;
})
.attr("y1", offsetTop)
.attr("x2", function(d) {
return d;
})
.attr("y2", height - offsetBottom)
.attr("class", classname);

return;
guides.append("text")
.attr("class", "ruler-label ")
.text(function() {
return 'Will pass ' + moment(d3.time.month.offset(data, months)).fromNow();
})
.attr("x", function() {
return time_scale(d3.time.month.offset(date, months))
})
.attr("y", offsetTop - 10)

}

function drawLabelLine(container, elStart, elEnd, onRightSide) {
container.append("path")
.attr("class", "label-line")
.attr("d", function() {
var multiplyer = 1;
if ( onRightSide === true ) {
multiplyer = -1;
}
var elStartBox = elStart.getBBox();
var elEndBox = elEnd.getBBox();
var step1 = (elStartBox.x + (multiplyer * (elStartBox.width + 3))) + "," + (elStartBox.y + (elStartBox.height / 2));
var step2 = (elStartBox.x + (multiplyer * elStartBox.width + 25)) + "," + (elStartBox.y + (elStartBox.height / 2));
var step3 = (elEndBox.x + (elEndBox.width / 2) - 3) + "," + (elEndBox.y + elEndBox.height + 3);
if ( onRightSide === true ) {
return ["M", step2, "L", step1, "L", step3].join("");
}
return ["M", step1, "L", step2, "L", step3].join("");
});
}

function drawRulers() {
var range = d3.range(1, MAX_LDS + 1);

var rulerGroup = sky.append("g");

rulerGroup.selectAll("ruler")
.data(range)
.enter()
.append("line")
.attr("class", "ruler")
.attr("x1", function(d) {
if ( d % 5 === 0 || d === 1 ) {
return width / 2 - 65.5;
}

return width / 2 - 10;
})
.attr("y1", function(d) {
return lunar_distance_scale(LUNAR_DISTANCE * d);
})
.attr("x2", function(d) {
if ( d % 5 === 0 || d === 1) {
return width / 2 + 65.5;
}

return width / 2 + 10;
})
.attr("y2", function(d) {
return lunar_distance_scale(LUNAR_DISTANCE * d);
});

rulerGroup.selectAll("ruler-label")
.data(range.filter(function(d) { return d % 5 === 0 || d === 1}))
.enter()
.append("text")
.text(function(d) {
if ( d === 1 ) {
return d + " Lunar Distance (LD)"; //, or about " + LUNAR_DISTANCE.toLocaleString() + "km from Earth";
}
if ( d === MAX_LDS ) {
return d + " LDs, or about " + (LUNAR_DISTANCE * d).toLocaleString() + "km from Earth";
}
return d + " LDs";
})
.attr("class", "ruler-label")
.attr("x", width / 2 + 85)
.attr("y", function(d) {
return lunar_distance_scale(LUNAR_DISTANCE * d) + 3;
});
}

function drawTimeAxis() {

var data = [-8, -4, 0, 4, 8];
var date = new Date();

d3.select('#ticks')
.selectAll('ticks')
.data(data)
.enter()
.append("div")
.attr("class", "ticks")
.text(function(d) {
if ( d === 0 ) return "Approaching this week";
if ( d === d3.max(data) ) return "Approaching in " + d + " months";
if ( d < 0 ) {
return Math.abs(d) + " months ago";
}

return "In " + d + " months";
})
.style("left", function(d) {
var offset = 50;
if ( d === 0 || d === d3.max(data) ) offset = 88;

return time_scale(d3.time.month.offset(date, d)) - offset + "px"
})


return;
var xAxis = d3.svg.axis()
.scale(time_scale)
.orient("top")
.ticks(d3.time.months, 3)
.tickSize(10, 0)
.tickPadding(5)
.tickFormat(function(d) {
return d3.time.format("%b %Y")
});

sky.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0, 10)")
.call(xAxis)
.selectAll(".tick text")
.style("text-anchor", "start")
.attr("x", 6)
.attr("y", 0);
}

function drawVoronoi(data) {

var popover = d3.select("#popover");

var voronoi = d3.geom.voronoi()
.x(function(d) {return time_scale(d.closeApproach._d) })
.y(function(d) { return lunar_distance_scale(d.ldNominal * LUNAR_DISTANCE) })
.clipExtent([[-1, -1], [width+1, height+1]]);


var voronoiGroup = sky.append("g")
.attr("class", "voronoi");

voronoiGroup.selectAll("path")
.data(voronoi(data))
.enter().append("path")
.attr("d", function(d) {
if ( !d || d.length < 2) {
return null;
}
return "M" + d.join("L") + "Z";
})
.datum(function(d) {
return d && d.point;
})
.on("mouseenter", function(d) {
popover.select("#name").text('Asteroid ' + d.name);

var approachPrefix = 'Passed Earth on ';
var distancePrefix = 'It came within ';
if (d.closeApproach._d > new Date()) {
approachPrefix = 'Approaches Earth on ';
distancePrefix = 'It will come within ';
}
popover.select("#approach").text(approachPrefix + ' ' + d.closeApproach.format('MMMM Do YYYY') + '.')
popover.select("#minimum").html(distancePrefix + '<strong>' + d.ldMinimum + ' LDs</strong>, and its')
popover.select("#size").text(hmag_scale(d.h).toFixed(1) + ' meters.');
popover.select("#h").text(d.h);
var popEl = popover[0][0];
popEl.style.top = d.el.getBBox().y + 100 + 'px';

if (d.el.cx.baseVal.value > width / 2 ) {
popEl.style.left = d.el.getBBox().x - 200 + 'px';
}
else {
popEl.style.left = d.el.getBBox().x + 20 + 'px';
}
popEl.style.display = 'block';
d.ringEl.style.display = 'block';
})
.on("mouseout", function(d) {
d.ringEl.style.display = 'none';
});

d3.select('#metadata').on('mouseenter', function() {
popover[0][0].style.display = 'none';
});
d3.select('#sky').on('mouseenter', function() {
popover[0][0].style.display = 'block';
});

}

draw();
// window.addEventListener('resize', function() {
// document.getElementById('ticks').innerHTML = '';
// var viz = document.getElementById('viz');
// Array.prototype.forEach.call(viz.children, function(child) { viz.removeChild(child) });
// viz.innerHTML = '';
// var svg = document.createElement('svg');
// svg.setAttribute('id', 'sky');
// viz.appendChild(svg)
// draw();
// });
//important stuff
new K('http://www.freeasteroids.org/');


})(window)

function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
182 components/overview.js
View file
@@ -0,0 +1,182 @@
(function(root) {
var ow, height, width;
var lunar_distance_scale, time_scale, size_scale, hmag_scale;
var LUNAR_DISTANCE, MAX_LDS;
var offsetTop, offsetBottom;
function draw(){
ow = d3.select("#svgOverview");
var window_height = window.innerHeight;
var window_width = window.innerWidth;
height = 0.65 * window_height;
width = 0.7 * window_width;


LUNAR_DISTANCE = 384400; //km

MAX_LDS = 73;

offsetTop = 40;
offsetBottom = 40;

lunar_distance_scale = d3.scaleLinear()
.domain([0, MAX_LDS * LUNAR_DISTANCE])
.range([30, height - 50]);

var date = new Date();
time_scale = d3.scaleTime()
.domain([d3.timeYear.offset(date, -30), d3.timeYear.offset(date, 30)])
.rangeRound([0,width]);
console.log(time_scale(date))


size_scale = d3.scaleLog()
.domain([30, 17])
.range([0.5, 4]);

hmag_scale = d3.scaleLinear()
.domain([30, 29, 28, 27, 26, 25, 24, 23, 22, 21, 20, 19, 18])
.range([4.5, 6.5, 11.5, 17.5, 27, 42.5, 65, 90, 170, 210, 330, 670, 1000]);

drawGuideLines("guide-light", 10);
drawGuideLines("guide-light", 20);
drawRulers();
drawTimeAxis();

}

function drawGuideLines(classname, years) {
var date = new Date();
var guides = ow.append("g");

console.log(height);
guides.selectAll("guide")
.data([time_scale(d3.timeYear.offset(date, -1 * years)), time_scale(d3.timeYear.offset(date, years))])
.enter()
.append("line")
.attr("x1", function(d) {
return d;
})
.attr("y1", offsetTop)
.attr("x2", function(d) {
return d;
})
.attr("y2", height - offsetBottom)
.attr("class", classname);

return;
/*
guides.append("text")
.attr("class", "ruler-label ")
.text(function() {
return 'Will pass ' + moment(d3.timeMonth.offset(data, months)).fromNow();
})
.attr("x", function() {
return time_scale(d3.timeMonth.offset(date, months))
})
.attr("y", offsetTop - 10)*/

}

function drawRulers() {
var range = d3.range(1, MAX_LDS + 1);

var rulerGroup = ow.append("g");

rulerGroup.selectAll("ruler")
.data(range)
.enter()
.append("line")
.attr("class", "ruler")
.attr("x1", function(d) {
if ( d % 10 === 0 || d === 1 ) {
return width / 2 - 65.5;
}
else if ( d % 5 === 0){
return width / 2 - 10;
}

return 0;
})
.attr("y1", function(d) {
return height - lunar_distance_scale(LUNAR_DISTANCE * d);
})
.attr("x2", function(d) {
if ( d % 10 === 0 || d === 1) {
return width / 2 + 65.5;
}

else if ( d % 5 === 0){
return width / 2 + 10;
}

return 0;
})
.attr("y2", function(d) {
return height - lunar_distance_scale(LUNAR_DISTANCE * d);
});

rulerGroup.selectAll("ruler-label")
.data(range.filter(function(d) { return d % 10 === 0 || d === 1}))
.enter()
.append("text")
.text(function(d) {
return d + " LDs";
})
.attr("class", "ruler-label")
.attr("x", width / 2 + 85)
.attr("y", function(d) {
return height - lunar_distance_scale(LUNAR_DISTANCE * d) + 3;
});
}

function drawTimeAxis() {

var data = [-20, -10, 0, 10, 20];
var date = new Date();

d3.select('#ticks')
.selectAll('ticks')
.data(data)
.enter()
.append("div")
.attr("class", "ticks")
.text(function(d) {
if ( d === 0 ) return "Approaching this week";
if ( d === d3.max(data) ) return "Approaching in " + d + " months";
if ( d < 0 ) {
return Math.abs(d) + " months ago";
}

return "In " + d + " months";
})
.style("left", function(d) {
var offset = 50;
if ( d === 0 || d === d3.max(data) ) offset = 88;

return time_scale(d3.time.month.offset(date, d)) - offset + "px"
})


return;
var xAxis = d3.svg.axis()
.scale(time_scale)
.orient("top")
.ticks(d3.time.months, 3)
.tickSize(10, 0)
.tickPadding(5)
.tickFormat(function(d) {
return d3.time.format("%b %Y")
});

ow.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0, 10)")
.call(xAxis)
.selectAll(".tick text")
.style("text-anchor", "start")
.attr("x", 6)
.attr("y", 0);
}

draw();
})(window)
51 content/css/custom2.css
View file
@@ -0,0 +1,51 @@
html,body,#main {
height: 100%;
margin: 0px;
}

.svgArea{
box-sizing: border-box;
border-style:dashed;
border-width: 1px;
}
#svgOverview{
background:yellow;
float:left;
}


#svgRadar{
background:blue;
float:left;
}

#svgBars{
background:red;
float:left;

}

#svgScatter{
background:purple;
}

line.guide {
stroke: #AAA;
stroke-dasharray: 2, 1;
}

line.guide-light {
stroke: #444;
stroke-dasharray: 2, 1;
}

line.ruler {
stroke: #AAA;
stroke-dasharray: 1,1,3,1;
}

text.ruler-label {
fill: #AAA;
font-size: 12px;
stroke: none;
font-family: "source-code-pro", monospace;
1 content/data/.~lock.neos.csv#
View file
@@ -0,0 +1 @@
,goncalo,Shinryux,04.12.2017 12:23,file:///home/goncalo/.config/libreoffice/4;
113 index.html
View file
@@ -1,91 +1,24 @@
<!doctype html>
<html lang="en">
<head>
<title>NEO Explorer</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="content/css/custom.css">
<script src="content/js/d3.min.js"></script>
<script src="content/js/jquery-3.2.1.slim.min.js"></script>
</head>
<body>
<div id="mySidenav" class="sidenav">
<span class="sideNavTitle">Filters</span>
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<a href="#collapseDiameter" aria-expanded="false" aria-controls="collapseDiameter" data-toggle="collapse">Diameter</a>
<div class="collapse" id="collapseDiameter">
<button class="nice-button filterbtn" value="diam-top15" type="button">15 Biggest</button>
<button class="nice-button filterbtn" value="diam-bot15" type="button">15 Smallest</button>
</div>
<a href="#collapseVelocity" aria-expanded="false" aria-controls="collapseVelocity" data-toggle="collapse">Velocity</a>
<div class="collapse" id="collapseVelocity">
<button class="nice-button filterbtn" value="vel-top15" type="button">15 Fastest</button>
<button class="nice-button filterbtn" value="vel-bot15" type="button">15 Slowest</button>
</div>
<a href="#collapseHazard" aria-expanded="false" aria-controls="collapseHazard" data-toggle="collapse">Hazard</a>
<div class="collapse" id="collapseHazard">
<button class="nice-button filterbtn" value="haz-top15" type="button">15 Most Hazardous</button>
<button class="nice-button filterbtn" value="haz-bot15" type="button">15 Least Hazardous</button>
</div>
<a href="#collapseDistance" aria-expanded="false" aria-controls="collapseDistance" data-toggle="collapse">Distance</a>
<div class="collapse" id="collapseDistance">
<button class="nice-button filterbtn" value="dist-top15" type="button">15 Closest</button>
<button class="nice-button filterbtn" value="dist-bot15" type="button">15 Farthest</button>
</div>
<a href="#collapseDamage" aria-expanded="false" aria-controls="collapseDamage" data-toggle="collapse">Impact Damage</a>
<div class="collapse" id="collapseDamage">
<button class="nice-button filterbtn" value="dmg-3" type="button">Damage 3</button>
<button class="nice-button filterbtn" value="dmg-2" type="button">Damage 2</button>
<button class="nice-button filterbtn" value="dmg-1" type="button">Damage 1</button>
<button class="nice-button filterbtn" value="dmg-0" type="button">Damage 0</button>
</div>
</div>
<div id="main">
<nav class="navbar" style="background-color: #e3f2fd;">
<a onclick="openNav()" href="#"><span class=" navbar-brand glyphicon glyphicon-menu-hamburger"></span></a>
<a class="navbar-brand" href="#">NEO Explorer</a>
<!--<div class="collapse navbar-collapse" id="navbarSupportedContent">
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
<button class="btn btn-outline-success my-2 my-sm-0" data-toggle="modal" data-target="#filtersModal">Filters</button>
</div>-->
</nav>
<div class="wholerea">
<svg id="svgId" width="1000" height="500">
</svg>
</div>
</div>
<!--<div class="modal fade" id="filtersModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Filters</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div> -->
<script src="components/orbitalLayout.js"></script>
<script src="components/radarChart.js"></script>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="content/js/filters.js"></script>

<script src="content/js/popper.min.js"></script>
<script src="content/js/bootstrap.min.js"></script>
</body>
<!DOCTYPE html>
<html>
<head>
<title>NEO Explorer</title>
<!-- Required Meta Tags -->
<meta charset="utf-8">
<!--meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"-->
<!-- Script -->
<script type="text/javascript" src="content/js/d3.min.js"></script>

<!-- CSS -->
<link rel="stylesheet" href="content/css/custom2.css">
</head>
<body>
<div id='main'>
<svg id="svgOverview" class="svgArea" width="70%" height="65%">
</svg>
<svg id="svgRadar" class="svgArea" width="30%" height="40%"></svg>
<svg id="svgBars" class="svgArea" width="70%" height="35%"></svg>
<svg id="svgScatter" class="svgArea" width="30%" height="60%"></svg>
</div>
<script type="text/javascript" src="components/overview.js"></script>
</body>
</html>
91 indexold.html
View file
@@ -0,0 +1,91 @@
<!doctype html>
<html lang="en">
<head>
<title>NEO Explorer</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="content/css/custom.css">
<script src="content/js/d3.min.js"></script>
<script src="content/js/jquery-3.2.1.slim.min.js"></script>
</head>
<body>
<div id="mySidenav" class="sidenav">
<span class="sideNavTitle">Filters</span>
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<a href="#collapseDiameter" aria-expanded="false" aria-controls="collapseDiameter" data-toggle="collapse">Diameter</a>
<div class="collapse" id="collapseDiameter">
<button class="nice-button filterbtn" value="diam-top15" type="button">15 Biggest</button>
<button class="nice-button filterbtn" value="diam-bot15" type="button">15 Smallest</button>
</div>
<a href="#collapseVelocity" aria-expanded="false" aria-controls="collapseVelocity" data-toggle="collapse">Velocity</a>
<div class="collapse" id="collapseVelocity">
<button class="nice-button filterbtn" value="vel-top15" type="button">15 Fastest</button>
<button class="nice-button filterbtn" value="vel-bot15" type="button">15 Slowest</button>
</div>
<a href="#collapseHazard" aria-expanded="false" aria-controls="collapseHazard" data-toggle="collapse">Hazard</a>
<div class="collapse" id="collapseHazard">
<button class="nice-button filterbtn" value="haz-top15" type="button">15 Most Hazardous</button>
<button class="nice-button filterbtn" value="haz-bot15" type="button">15 Least Hazardous</button>
</div>
<a href="#collapseDistance" aria-expanded="false" aria-controls="collapseDistance" data-toggle="collapse">Distance</a>
<div class="collapse" id="collapseDistance">
<button class="nice-button filterbtn" value="dist-top15" type="button">15 Closest</button>
<button class="nice-button filterbtn" value="dist-bot15" type="button">15 Farthest</button>
</div>
<a href="#collapseDamage" aria-expanded="false" aria-controls="collapseDamage" data-toggle="collapse">Impact Damage</a>
<div class="collapse" id="collapseDamage">
<button class="nice-button filterbtn" value="dmg-3" type="button">Damage 3</button>
<button class="nice-button filterbtn" value="dmg-2" type="button">Damage 2</button>
<button class="nice-button filterbtn" value="dmg-1" type="button">Damage 1</button>
<button class="nice-button filterbtn" value="dmg-0" type="button">Damage 0</button>
</div>
</div>
<div id="main">
<nav class="navbar" style="background-color: #e3f2fd;">
<a onclick="openNav()" href="#"><span class=" navbar-brand glyphicon glyphicon-menu-hamburger"></span></a>
<a class="navbar-brand" href="#">NEO Explorer</a>
<!--<div class="collapse navbar-collapse" id="navbarSupportedContent">
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
<button class="btn btn-outline-success my-2 my-sm-0" data-toggle="modal" data-target="#filtersModal">Filters</button>
</div>-->
</nav>
<div class="wholerea">
<svg id="svgId" width="1000" height="500">
</svg>
</div>
</div>
<!--<div class="modal fade" id="filtersModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Filters</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div> -->
<script src="components/orbitalLayout.js"></script>
<script src="components/radarChart.js"></script>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="content/js/filters.js"></script>

<script src="content/js/popper.min.js"></script>
<script src="content/js/bootstrap.min.js"></script>
</body>
</html>