A star map of the Northern Hemisphere using a flipped stereographic projection, showing declination and right ascension. I believe the data is from the Yale Bright Star Catalog, but I got it from Matteo Abrate’s sky map.
Last active
May 11, 2017 23:08
-
-
Save is64377/d0034ab08c70eb85902c570ebf596036 to your computer and use it in GitHub Desktop.
778Project
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
license: gpl-3.0 | |
height: 960 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<title>778Project</title> | |
<style> | |
body { | |
position: absolute; | |
margin: 0px; | |
} | |
svg { | |
background-color: lightgray; | |
} | |
.info { | |
font-family: sans-serif; | |
color: #000000; | |
position: absolute; | |
top: 450px; | |
left: 800px; | |
} | |
path{ | |
fill: white; | |
stroke:green; | |
} | |
path:hover { | |
fill: #edc9e7; | |
stroke: #5700f9; | |
} | |
div.tooltip { | |
position: absolute; | |
text-align: left; | |
vertical-align: top; | |
width: 150px; | |
height: 40px; | |
padding: 18px; | |
color: #6d6d6d; | |
font-size: 14px; | |
font-weight: bold; | |
line-height: 60%; | |
background: #bcf3ff; | |
box-shadow: 4px 4px 2px rgba(1, 1, 0, 0.1); | |
border: 2px; | |
border-radius: 2px; | |
pointer-events: none; | |
} | |
</style> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<script src="https://d3js.org/topojson.v2.min.js"></script> | |
<body> | |
<script> | |
var width = 960, height = 500; | |
var div = d3.select("body").append("div") | |
.attr("class", "tooltip") | |
.style("opacity", 00); | |
var data; // declare a global variable | |
var svg = d3.select("body").append("svg") | |
.attr("width", width) | |
.attr("height", height) | |
.on("mousemove", mousemoved); | |
var layer1 = svg.append("g"); | |
var layer2 = svg.append("g"); | |
var info = d3.select("body").append("div") | |
.attr("class", "info"); | |
svg.append('text') | |
.attr('x', width / 2) | |
.attr('y', "1.5em") | |
.style('font-size', '1.5em') | |
.style('text-anchor', 'middle') | |
.text('Reported OSHA Injuries') | |
var projection = d3.geoAlbersUsa(); | |
var path = d3.geoPath() | |
.projection(projection); | |
// Create a color scale for the earthquakes | |
var color = d3.scaleOrdinal(d3.schemeCategory10); | |
var url = "https://umbcvis.github.io/classes/class-03/us.json" | |
var endpoint = "https://raw.githubusercontent.com/is64377/778Classes/master/Project/"; | |
var filename = "OSHA.csv"; | |
var url2 = endpoint + filename; | |
d3.json(url, plotStates); | |
d3.csv(url2, OSHA); | |
function plotStates(error, json) { | |
if (error) throw error; | |
json = json.objects.us.geometries.map(function(d) { return topojson.feature(json, d); }) | |
layer1.selectAll("path") | |
.data(json) | |
.enter() | |
.append("path") | |
.attr("d", path); | |
} | |
function OSHA(error, csv) { | |
if (error) throw error; | |
console.log(csv[0]) | |
layer2.selectAll("circle.OSHA") | |
.data(csv) | |
.enter().append("circle") | |
.attr("class", "OSHA") | |
.style("fill", "crimson") | |
.attr("cx", function(d) { return projection([+d.DisplayX, +d.DisplayY])[0]; }) | |
.attr("cy", function(d) { return projection([+d.DisplayX, +d.DisplayY])[1]; }) | |
.attr("r", "3") | |
.attr('stroke', '#1e1e1e') | |
.on("mouseover", function(d) { | |
div.transition() | |
.duration(144) | |
.style("opacity", .95) | |
.style("stroke", "black"); | |
console.log(d) | |
div.html("<b><u>City</b></u>: " + d.City + "<br/>" + "<br/>" + "<br/>" + "<b><u>Hospitalized</b></u>: " + d.Hospitalized + " Days") | |
.style("left", (d3.event.pageX + 10) + "px") | |
.style("top", (d3.event.pageY - 30) + "px"); | |
}) | |
.on("mouseout", function(d) { | |
div.transition() | |
.duration(10) | |
.style("opacity", 00); | |
}); | |
} | |
function inRange(d) { | |
return projection(d.geometry.coordinates) !== null; | |
} | |
function mousemoved() { | |
info.text(formatLocation(projection.invert(d3.mouse(this)), projection.scale())); | |
} | |
function formatLocation(p, k) { | |
var format = d3.format("." + Math.floor(Math.log(k) / 2 - 2) + "f"); | |
return (p[1] < 0 ? format(-p[1]) + "°S" : format(p[1]) + "°N") + " " | |
+ (p[0] < 0 ? format(-p[0]) + "°W" : format(p[0]) + "°E"); | |
} | |
</script> | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
�PNG | |