D3 Examples - idGAF

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<title>Class 5 v2</title>
<style>
body {
  position: absolute;
  margin: 0px;
  font: 16px sans-serif;
}
svg {
  background-color: #4682b4;
}
.info {
  font-family: sans-serif;
  color: #000;
  position: absolute;
  top: 450px;
  left: 800px;
}
path {
  fill: #555555;
  stroke: #aaaaaa;
}
/* NEW: style the earthquakes */
path.quake {
  fill: crimson;
}
</style>
​
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
​
<!-- NEW: Load the D3 legend plugin -->
<script src="d3.legend.js"></script>
​
<body>
<script>
var width = 960, height = 500;
var data;  // declare a global variable
// NEW: Add a color scale
var colors = d3.scaleOrdinal()
        .domain(['< 1', '1-2', '2-3', '3-4', '4-5', '> 5'])
        .range(d3.schemeCategory10)
// NEW: Configure the legend
var legend = d3.legend()
    .translate([ width - 50 , height / 4 ])
    .colors(colors);
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .on("mousemove", mousemoved)
    .call(legend);  // NEW: Add the legend to the chart
var layer1 = svg.append("g");
var layer2 = svg.append("g");
// Add a <div> element to label the mouse position
var info = d3.select("body").append("div")
    .attr("class", "info");
var projection = d3.geoAlbersUsa();
var path = d3.geoPath()
    .projection(projection);
// Earthquake data
var usgs = "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson";
// Topojson for US states
var url = "https://umbcvis.github.io/classes/class-03/us.json"
d3.json(url, plotStates);
d3.json(usgs, plotQuakes);
function plotStates(error, json) {
  // Convert topojson to an Array of GeoJSON features
  // This defines "data", a global variable that can be manipulated in the developer console
  data = json.objects.us.geometries.map(function(d) { return topojson.feature(json, d); })
  // Plot the features (states) -- one <path> element for each state
  layer1.selectAll("path")
      .data(data)
    .enter()
      .append("path")
      .attr("d", path);
}
function plotQuakes(error, json) {
  if (error) return console.log(error);
  // Global variable, data, will be visible in the console
  data = json;
  // Extract an array of feature objects, one for each earthquake
  var features = json.features;
  // Plot the earthquakes
  layer2.selectAll("path.quake")
      .data(features)
    .enter().append("path")
      .attr("class", "quake")
      .attr("d", path)
      .style('fill', quakeColor); // NEW: Add magnitude-dependent color
  // NEW: Function returns magnitude-dependent color for earthquakes
  function quakeColor(d) {
    var m = Math.min(Math.floor(Math.abs(d.properties.mag)), colors.domain().length);
    var label = colors.domain()[m];
    return colors(label);
  }
}
// Label the geographic coordinates of the mouse position on the map
function mousemoved() {
  info.text(formatLocation(projection.invert(d3.mouse(this)), projection.scale()));
}
// Format the text that will be displayed in the the <div> element on the map
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>
  
-----------------------------
<!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: center;
  vertical-align: top;   
  width: 100px;                  
  height: 30px;                 
  padding: 18px; 
  color: #6d6d6d;          
  font-size: 12px;
  font-weight: bold;
  line-height: 70%;
  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);
// Add a legend
var legend = layer2.selectAll('.legend')
    .data(d3.range(6))
    .enter().append('g')
    .attr('class', 'legend')
    .attr('transform', 'translate(' + [width - 150, height / 2] +')');
legend.append('circle')
    .attr('cy', function(d) { return 4 * d * path.pointRadius() ; })
    .attr('r', path.pointRadius())
    .attr('fill', color)
    .attr('stroke', '#545454')
legend.append('text')
    .attr('x', '1em')
    .attr('y', function(d) { return 4 * d * path.pointRadius(); })
    .attr('dy', '.3em')
    .text(function(d) { return d + ' - ' + (d + 1); })
​
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", .75)
          .style("stroke", "black");
        div.html("<b><u>Hospitalized</b></u>: " + d.Feature.Hospitalized + "<br/>" + "<br/>" + "<br/>" + "<b><u>NatureTitle</b></u>: " + d.Feature.NatureTitle[2])
          .style("left", (d3.event.pageX + 10) + "px")
          .style("top", (d3.event.pageY - 30) + "px");
      })
      .on("mouseout", function(d) {
        div.transition()
          .duration(10)
          .style("opacity", 30);
      });
}
​
  function inRange(d) {
  return projection(d.geometry.coordinates) !== null;
}
//Return magnitude-dependent color
function magColor(d) {
  return color(Math.floor(d.properties.mag));
}
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>   
​
    