778Project

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.

forked from mbostock's block: Star Map

forked from anonymous's block: Star Map

<!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>

<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>

https://d3js.org/d3.v4.min.js

https://d3js.org/topojson.v2.min.js