Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cosmetic changes discussed by email #43

Merged
merged 17 commits into from
Sep 6, 2016
Merged

Cosmetic changes discussed by email #43

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
4a66e7d
add favicon
Sep 4, 2016
086e73b
add headline
Sep 4, 2016
b10a802
add Tomorrow watermark
Sep 4, 2016
d87bfa6
move contribute instructions to main panel
Sep 4, 2016
6c2bb7d
simplify panel and initial text
Sep 4, 2016
cb8b55f
Make watermark smaller
Sep 4, 2016
de854ca
fix header margin
Sep 4, 2016
d491faa
Fix build steps for @guicoelho
corradio Sep 4, 2016
ebeb0a4
change headline
Sep 6, 2016
5a3b319
map on the right -> this map
Sep 6, 2016
2580b93
improve Tomrrow watermark
Sep 6, 2016
a5b8b55
move contribute text to watermark. Which puts it in the context of To…
Sep 6, 2016
a856c35
smaller headline
Sep 6, 2016
6d1671c
smaller watermark
Sep 6, 2016
816e5e4
revert to previous contribute-text style
Sep 6, 2016
467cfd8
update logo
Sep 6, 2016
9c4347a
increase size of block + target blank
Sep 6, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions Dockerfile
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ RUN apt-get update
# Install python
RUN apt-get install -y gcc make python-dev libxml2-dev libxslt-dev gzip
RUN curl -s https://bootstrap.pypa.io/get-pip.py | python
RUN apt-get install -y maven
# Install pygrib dependencies manually
RUN apt-get install -y libgrib-api-dev && pip install numpy==1.10.1 pyproj==1.9.4
EXPOSE 8000
Expand Down
2 changes: 1 addition & 1 deletion Makefile
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.PHONY: server

install:
install: install-grib2json
pip install -r requirements.txt
pip install honcho==0.7.1

Expand Down
7 changes: 5 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,17 +70,20 @@ You can also see a list of missing informations displayed as warnings in the dev

![image](https://cloud.githubusercontent.com/assets/1655848/16256617/9c5872fc-3853-11e6-8c84-f562679086f3.png)

To get started, clone or [Fork](https://help.github.com/articles/fork-a-repo/) the repository, and install all requirements:
To get started, clone or [fork](https://help.github.com/articles/fork-a-repo/) the repository, and install all requirements:

```
Make install
```

You might need to install the [GRIB API](https://software.ecmwf.int/wiki/display/GRIB/GRIB+API+CMake+installation). On Mac OS, you can simply `brew install grib-api`.


Provided you have mongodb installed and running, you can run the full system using
```
Make server
```

If you have Docker, you can just run `docker-compose up` instead. Head over to [http://localhost:8000/](http://localhost:8000/) and you should see the map!

Once you're done doing your changes, submit a [Pull Request](https://help.github.com/articles/using-pull-requests/) to get them integrated.
Once you're done doing your changes, submit a [pull request](https://help.github.com/articles/using-pull-requests/) to get them integrated.
4 changes: 2 additions & 2 deletions backend/parsers/wind.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ def fetch_wind():
subprocess.check_call([
'java',
'-Xmx512M',
'-jar', 'grib2json/target/grib2json-0.8.0-SNAPSHOT/lib/grib2json-0.8.0-SNAPSHOT.jar',
'-jar', 'grib2json/grib2json-0.8.0-SNAPSHOT/lib/grib2json-0.8.0-SNAPSHOT.jar',
'-d', '-n', '-c', '-o',
'data/wind_before.json', 'wind.grb2'], shell=False)

Expand All @@ -57,7 +57,7 @@ def fetch_wind():
subprocess.check_call([
'java',
'-Xmx512M',
'-jar', 'grib2json/target/grib2json-0.8.0-SNAPSHOT/lib/grib2json-0.8.0-SNAPSHOT.jar',
'-jar', 'grib2json/grib2json-0.8.0-SNAPSHOT/lib/grib2json-0.8.0-SNAPSHOT.jar',
'-d', '-n', '-c', '-o',
'data/wind_after.json', 'wind.grb2'], shell=False)

Expand Down
8 changes: 7 additions & 1 deletion docker-compose.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,13 @@ services:
file: common.yml
service: web
ports: ['8000:8000']
volumes: ['.:/home/']
volumes:
- './app:/home/app'
- './vendor:/home/vendor'
- './backend:/home/backend'
- './server.py:/home/server.py'
- './style.css:/home/style.css'
- './index.html:/home/index.html'
environment: [ENV=development, 'MONGO_URL=mongodb://mongo:27017']
depends_on: [mongo]
mongo:
Expand Down
Binary file added favicon-32x32.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
27 changes: 13 additions & 14 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
<!DOCTYPE html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF8" />
<meta name="description" content="Electricity Map | Real-time visualisation of the climate footprint of electricity generation" />
<meta name="description" content="Electricity Map | Clean vs. dirty electricity production in Europe" />
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't like clean vs. dirty.. What did you dislike about the original title?
I liked the fact it had "realtime visualisation" and "climate footprint" (for google searches mostly)

Copy link
Contributor Author

@guicoelho guicoelho Sep 5, 2016 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My thoughts regarding the original were:

a) Main message that comes through is "This is real-time", while IMO it should be "different countries have different climate footprints related to energy production". Being real-time is a neat detail, definitely helps with PR and is a good show-off but for the average User it doesn't matter that much. In other words, it's important that we mention it but I don't think it has to be on the headline.

b) Felt a little too long. I think titles should be shorter whenever possible but, in this case, the long title also had some visual impact. When I added it on the map it was taking too much space.

Other suggestions could be:

  • Climate impact of electricity production in Europe
  • CO2 footprint of electricity production in Europe

In any case, I don't think this is something worth discussing further. Here's my opinion but I trust you to make a good judgment.

Let me know what I should change in the PR.

Cheers,
Gui

Copy link
Member

@corradio corradio Sep 5, 2016 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

OK makes sense. About real-time, I'd add one important aspect, which is that with wind and solar, I'd like to emphasise that the real-time component is important because of the fluctuating availability. Energy systems are conventionally thought to be "static", so the distinction was important. Maybe indeed we don't need it.

What about

  • Real-time climate impact of the European electricity production?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fine for me!

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍


<meta property="og:image" content="https://cloud.githubusercontent.com/assets/1655848/16257011/15711692-3856-11e6-98ca-95cce4d02b02.png" />
<meta property="og:title" content="Electricity Map | Real-time visualisation of the climate footprint of electricity generation" />
<meta property="og:title" content="Electricity Map | Clean vs. dirty electricity production in Europe" />

<title>Electricity Map | Real-time visualisation of the climate footprint of electricity generation</title>
<title>Electricity Map | Clean vs. dirty electricity production in Europe</title>

<link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">

<script src="vendor/d3.v3.min.js"></script>
<script src="vendor/d3.geo.projection.v0.min.js"></script>
Expand Down Expand Up @@ -59,6 +60,8 @@
</div>
</div>
<div class="panel-container">
<h1 style="line-height: 1.3; color: white; font-size: 1.8rem; padding-bottom: 15px;
border-bottom: solid grey 1px; margin-top: 5px;">Clean vs. dirty electricity production in Europe</h1>
<div class="country-table-header" style="display: none">
<img class="country-flag">
<b>
Expand All @@ -74,22 +77,18 @@
</div>
<svg class="country-table" style="display: none"></svg>
<div class="country-table-initial-text">
<span style="font-size: 1.3em; color: lightgray">This is the <b>electricity map</b></span><br />
<br />
It shows, in real-time, <span style="color: lightgray">where your electricity comes from</span>
and <span style="color: lightgray">how much greenhouse gas (GHG)</span> was emitted in the process.<br />
The map on the right shows in real-time <span style="color: lightgray">where your electricity comes from</span>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of "The map on the right", i'd say simply say "This map"?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fine for me!

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

and <span style="color: lightgray">how much greenhouse gas (GHG)</span> was emitted to produce it.
<!--The map also shows renewable resources like wind and sun.<br />-->
The <span style="color: lightgray">blinking arrows</span> represent electricity <span style="color: lightgray">imports and exports</span>.<br />
<br />
&nbsp;&nbsp;&nbsp;&gt;&gt;&nbsp;&nbsp;<span style="color: lightgray">click on a country to get started</span><br />
<br />
Going further:<br />
&gt; <a href="https://github.com/corradio/electricitymap#greenhouse-gas-footprint-calcuation-and-data-source" target="_blank">Understand</a> how GHG emissions are calculated<br />
&gt; <a href="https://github.com/corradio/electricitymap#contribute" target="_blank">Contribute</a> to complete the map
<span style="color: lightgray; font-size: 14px; color: white;"><i>Tip: Click on a country to start exploring ⟶</i></span><br />
</div>
<small class="contribute-text">To learn more about this project or contribute missing data <a href="https://github.com/corradio/electricitymap#contribute" target="_blank">head over to GitHub</a>.</small>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The text fades a bit into the background. Maybe we need to have a background.
I also prefer the old text: "Help out with missing data by contributing on GitHub. Follow us on Twitter for the latest updates" because it's a more engaging call for action + there is a twitter link.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How important is this information from your POV?

I'd say that most of the times, people will think they want to contribute and then look for something on the page where to click. The use case of people who contribute just because they saw this is rather small. For that reason, I thought having it very subtle for the ones who will look for it, while at the same time not cluttering the interface to the ones that don't want it at all.

But again, no strong feelings here, I'm fine with making it more prominent and/or going back to the old text.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it's important to show that we do open source stuff. Mostly as PR (not because too many people will contribute).

</div>
</div>
<div class="contribute-bar">
Help out with missing data by contributing on <a href="https://github.com/corradio/electricitymap#contribute" target="_blank">GitHub</a>. Follow me on <a href="https://twitter.com/corradio" target="_blank">Twitter</a> for the latest updates.
<div class="watermark">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Very good first try - what about we try to have a

  • powered by X
  • made by X
  • part of X

Do you think it's useful?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, we could definitely improve this in the future and create a custom thing. I'll still release it like this for now because it already adds value 👍

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍
Maybe a slight improvement is to add some CSS with a hover that darkens/lightens. Just a thought.

<a href="http://www.tmrow.co"><img src="/logo_with_tagline.svg" style="width:350px"/></a>
</div>
<div class="loading overlay"></div>
</body>
Expand Down
Loading