pfwp2gs

Project Foghorn water and power-to-gas siting web application

by Jim Salsman

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- 
Project Foghorn water and power-to-gas siting web application, by Team SpeakClearly, for the 2019 IoT World Hackathon.

http://j.mp/pfwp2gs

Register:
https://www.eventbrite.com/e/iot-world-hackathon-2019-tickets-56442365635

Slack: http://bit.ly/iotworldslack

Project description: "pfwp2gs"
  https://twitter.com/jsalsman/status/1127946568164757504
(see parent tweets)

GitLab: https://gitlab.com/speakclearly/pfwp2gs

Copyright 2019 by James Salsman. This project is licensed under the
GNU Affero General Public License v3.0. 

  Bootstrap docs: https://getbootstrap.com/docs
-->
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-selection-multi.v0.4.min.js"></script><!-- https://iros.github.io/d3-v4-whats-new/#26 -->
<script src="https://unpkg.com/d3@5"></script>
<script src="https://unpkg.com/topojson-client@3"></script><!-- https://bl.ocks.org/mbostock/19ffece0a45434b0eef3cc4f973d1e3d 
<script src="https://d3js.org/topojson.v2.min.js"></script> -->

<!-- TODO:
1. Finish design
2. MVP development
3. Test different optimizations during demo
4. Setup WeFunder
5. Convert from JavaScript to client-side Python,
   e.g. http://transcrypt.org
-->

<div class="container">
  <div class="row">
    <div class="col">
      Project Foghorn water and power-to-gas siting web 
      application
    </div>
    <div class="col">
      by Team SpeakClearly,<br/>2019 IoT World Hackathon
    </div>
  </div>
  <div class="row">
    <div class="col">
      Main menu: <u>Map</u>, <u>Tables</u>,...

CSS

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

JavaScript

// https://iros.github.io/d3-v4-whats-new/#95

var svg = d3.select("svg"),
    width = window.innerWidth,
    height = +svg.attr("height");

d3.json("https://raw.githubusercontent.com/gist/mbostock/4090846/raw/07e73f3c2d21558489604a0bc434b3a5cf41a867/us.json").then(function(us) {

  var conus = topojson.feature(us, {
    type: "GeometryCollection",
    geometries: us.objects.states.geometries.filter(function(d) {
      return d.id !== 2 // AK
        && d.id !== 15 // HI
        && d.id < 60; // outlying areas
    })
  });

  // ESRI:102004
  var path = d3.geoPath()
      .projection(d3.geoConicConformal()
          .parallels([33, 45])
          .rotate([96, 0])
          .center([0, -39])
          .fitSize([width, height], conus));

  svg.append("path")
      .datum(conus)
      .attr("d", path);
      
});