Giter VIP home page Giter VIP logo

cityenergy's Introduction

City Energy Project Building Map System

This repository contains the code for a highly configurable system to map buildings according to various kinds of energy efficiency data, to make critical data about urban sustainability and conservation visible and accessible to a wide array of potential audiences.

The site was commissioned by the City Energy Project, a joint effort of the Natural Resources Defense Council (NRDC) and the Institute for Market Transformation (IMT). The City Energy Project is a national initiative to create healthier and more prosperous American cities by improving the energy efficiency of buildings. Working in partnership, the Project and cities will support innovative, practical solutions that cut energy waste, boost local economies, and reduce harmful pollution.

In close collaboration with partners at the City Energy Project, Stamen Design and Ministry of Velocity designed and built the system in summer 2015. Stamen is a leading innovator in data visualization, with a long history of direct collaborations with industry leaders, universities, museums, and humanitarian organizations. Ministry of Velocity is an agile software engineering consultancy with decades of combined experience in building immersive experiences alongside startups, nonprofit organizations, and design agencies.

Dependencies

Software

This project uses gulp for build scripts. Other dependencies are contained in package.json and bower.json.

City data is hosted on CartoDB. Each city data table is specified in its respective JSON file contained in src/cities.

Development

Start webserver

  $ npm start

Start livereload

  $ npm watch

Static Assets

Source files are in /src. The compiled files are in /dist.

  gulp

to compile, and copy all site files to the /dist folder

How do I install it?

  • clone the repo
  • make sure you have node and bower installed
  • in the root of the repo, run npm install
  • in the root of the repo, run bower install
  • in a separate terminal window run npm start
  • point your browswer to http://localhost:8080/

How do I deploy it to the world?

You can fork a copy of the repository, and the dist directory will turn into your own version of the site via Github Pages. Alternatively, you can host your own copy of the dist directory on your own web server.

For setup and configuration instructions, see the Setup and Configuration guide.

Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/cityenergyproject/cityenergy.

cityenergy's People

Contributors

danrademacher avatar jparr avatar ohrite avatar

Stargazers

 avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

cityenergy's Issues

If they ask, we do have LA neighborhoods

They sent over this LA times geojson that I stuck in CartoDb:
https://cityenergyproject.cartodb.com/tables/la_county_neighborhoods_v2
(metadata on the table notes source)

Not sure what we're going to do with this, if anything. Their desire is that we assign all buildings to neighborhoods as a one-time favor. But they went ahead and started sorting city Council districts themselves. So that might be enough. But if it comes up while I'm gone, here's the data they sent over.

Search problems

  1. Search can return all addresses in region and show on the map
  2. Region of the map is assumed
  3. Search will show known CE addresses with the highlight
  4. Ideally, building name, for major buildings would be searchable (ex: Nineteenth Street Baptist Church)

Mobile wireframes, exploration

Begin high-level exploration of how we could adapt the current platform for mobile per ongoing multiple partner and potential partner needs. Goal is to determine a design and technical plan with a tight estimate for pitching. "Real designs" would be helpful but not essential.

Consider issues around geocoding accuracy

Most or all cities will need tabular address data geocoded. I tried LA's data in CartoDB and got very inaccurate results (I deleted the table before taking a screenshot unfortunately). I may have erroneously selected the wrong field for the postal_code or something. The second attempt used this free service after I concatenated the addresses in a spreadsheet:
http://www.findlatitudeandlongitude.com/batch-geocode/

Results:

  • Address:196
  • Street:62
  • Locality:3
  • General:0
  • FAIL:0

image

Way better, since the CartoDB pass had most of the buildings in other states and countries, but still worrisome that 65 of 261 buildings are not geocoded to address.

Generally, geocoding is not an ideal way to deal with data tied to very precise building footprints. But it's all we've got for this project. Just bookmarking this as a risk -- some dots in each city are likely to misplaced.

table view redesign

  • Table view will need to be re-designed & coded to accommodate new data loading strategy. There is no value to rendering thousands table rows.

@nicolettehayes Is addressing design in the context of Seattle Phase 2 work. Implementation will come back to this issue.

Color bucket globals

  • Expose BuildingColorBucketCalculator model objects as globals so they can be shared more efficiently. Currently, they are generated for each range filter in three components: "building_comparison.js", "building_layer.js" and "filter.js". They only need to be calculated once when buildings are loaded. They could be possibly passed through state as well.

Reminder: New CartoDB Accounts Should Use cartodb.js versions >= 3.15

A note for future energy benchmarking projects.

Carto changed their name and the domain to access the SQL api -- <cartouser>.carto.com/v2/api/sql. Changing the domain alone does not render the tiles even though the requests returned payloads. Upgrading to cartodb.js version 3.15 from 3.14 was the fix

Map performance improvements

We can improve the map performance in a few ways:

  1. reduce the amount of data by filtering according to the viewport (see #18). This only helps when we're zoomed in on the map. If you are viewing the whole city, you still need to load all the buildings.

  2. Use clustering (via the Leaflet plug-in, presumably) to reduce the number of features we render on the map, even though we still would load all the buildings from the server.

  3. Switch the map library to a GL map (Tangram or MapboxGL). Either of those should handle 20K points just fine. My main concern with that approach would be to check what browsers we need to support, and how well they handle GL.

Menus width and show all/ hide all selections

Menus vary in width depending on the description of the Heading which leads to left/right . This is causing the show all | hide all to break in a weird place and to introduce an awkward horizontal scroll.

image

image

Distinguish between years and numeric values

4-digit values are currently special-cased to omit commas in case they're years. If we had a way of distinguishing value types (since years can work for both range and categorical filters), we'd omit them from years but allow them to display for all other numeric values.

Misformatted/truncated hash breaks the UI

Change data loading behavior

  • Change data loading behavior. Right now we're loading and showing all data from a remote Carto layer, we would need to figure out a different approach. Most likely it would be a combination of clustering and viewport bounds limiting.

Fix sluggishness

These three processes seem to impact the performance the most on the site:

  • Layer selection
  • Filtering
  • popups

Notes:

  • Possibly optimize "BuildingBucketCalculator.toBuckets" function
  • Minimize rendering in BuildingComparisonView
  • Does there really need to be so many carto API calls?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.