giving-a-fuck-about-climate-change / carbon-inferno

A react.js front-end for climate change related data :earth_africa:
http://carbondoomsday.com/
GNU Affero General Public License v3.0
36 stars 6 forks source link

Embed Chart #149

Open grady-lad opened 6 years ago

grady-lad commented 6 years ago

One feature we would like would be to allow our users to share the chart on their site or where ever they desire.

One possible solution is to provide a snippet that allows users to embed the chart.

titojankowski commented 6 years ago

Do we have an offer open from someone who wants to embed the chart on their site? That would help shape the development, what does it need to do, what the use case is -- wordpress, iframe, facebook?

pwhisenhunt commented 6 years ago

I dig the idea of an embeddable chart but I'm not sure how frequently it would be used. I'm not sure if this is the proper place to discuss this but @titojankowski and I discussed doing something like a badge for websites so that peeps could put the current CO2 level on their website. I whipped up a real quick code pen with what I was thinking of.

https://codepen.io/anon/pen/BJbgRL

And we could provide a simple API that allows peeps to customize it on their website; e.g. border radius, colors, etc. I think a badge could possibly be adopted more then a graph for the masses since its a bit more consumable. It's more like "hey, i care about this thing so i have it on my blog".

screen shot 2018-01-22 at 6 49 14 pm

Anyhow, what do y'all think?

decentral1se commented 6 years ago

@pwhisenhunt, that looks amazing! I wonder will it make it clear what this is for though? Could we include a tag line that is somehow doing some sort of explanation? If you think it's enough, just go for it. Stoked!

YPCrumble commented 6 years ago

@titojankowski I think we could embed at https://jetsetoffset.com. I'm still building the platform but will keep it in mind.

On the footer image - I'd like to have this available as an email signature! I could implement something like html2canvas to create an embeddable jpeg that gets updated once a day. That way people could just put a link to the image like <img src="carbon_doomsday_email_signature.jpg"/> in their signature and it would always be up to date. Thoughts?

titojankowski commented 6 years ago

Email sig - yes! I would put that in my email signature immediately.

On Fri, Feb 9, 2018, at 8:10 AM, YPCrumble wrote:

@titojankowski[1] I think we could embed at https://jetsetoffset.com. I'm still building the platform but will keep it in mind.> On the footer image - I'd like to have this available as an email signature! I could implement something like html2canvas to create an embeddable jpeg that gets updated once a day. That way people could just put a link to the image like in their signature and it would always be up to date. Thoughts?> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub[2], or mute the thread[3].>

Links:

  1. https://github.com/titojankowski
  2. https://github.com/giving-a-fuck-about-climate-change/carbon-inferno/issues/149#issuecomment-364478264
  3. https://github.com/notifications/unsubscribe-auth/AAH4JCcyLIwSZwOBGg5XNN5CfLMthwvJks5tTG4AgaJpZM4RRazM
titojankowski commented 6 years ago

fwiw I use gmail as my email platform for Impossible Labs so would plug it in to google’s signature.

On Fri, Feb 9, 2018, at 8:39 AM, Tito Jankowski wrote:

Email sig - yes! I would put that in my email signature immediately.

On Fri, Feb 9, 2018, at 8:10 AM, YPCrumble wrote:

@titojankowski[1] I think we could embed at https://jetsetoffset.com. I'm still building the platform but will keep it in mind.>> On the footer image - I'd like to have this available as an email signature! I could implement something like html2canvas to create an embeddable jpeg that gets updated once a day. That way people could just put a link to the image like in their signature and it would always be up to date. Thoughts?>> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub[2], or mute the thread[3].>>

Links:

  1. https://github.com/titojankowski
  2. https://github.com/giving-a-fuck-about-climate-change/carbon-inferno/issues/149#issuecomment-364478264
  3. https://github.com/notifications/unsubscribe-auth/AAH4JCcyLIwSZwOBGg5XNN5CfLMthwvJks5tTG4AgaJpZM4RRazM
YPCrumble commented 6 years ago

@titojankowski awesome - I'm 99% sure Gmail doesn't allow JS so I think the best way to have a continually updated signature with the current number (which personally I would find so cool) might be a solution like:

[maybe] HTML -> [maybe start here] canvas -> JPEG

I could work on using @pwhisenhunt design to do both the embeddable footer element and the email signature. Don't want to step on your toes though if you're running with it, let me know!

pwhisenhunt commented 6 years ago

Ah, great idea @YPCrumble! I dig it! Go for it! Yeah, I believe the best way to do graphs in email is via images since JS isn't usually allowed I believe. Let me know if I can help ya at all with it!

YPCrumble commented 6 years ago

@pwhisenhunt @titojankowski @lwm I am so proud of this - pure Python: https://github.com/YPCrumble/carbondoomsday_email_signature

It's not 100% perfect - I couldn't get things like the letter spacing perfect from the codepen, but I really like it nonetheless :).

Idea would be to run it as a daily cron job and serve the image from the API server. Happy to help with that if it's useful.

Thoughts?

decentral1se commented 6 years ago

I am so proud of this - pure Python: https://github.com/YPCrumble/carbondoomsday_email_signature

THIS. IS. AWESOME.

Idea would be to run it as a daily cron job and serve the image from the API server. Happy to help with that if it's useful.

So, if I understand, we'd have - api.carbondoomsday.com/api/signature/ (or something?) and we'd be making sure that is up-to-date behind the scenes? Sounds like that might not be too hard. You'd need to rig up a new route in our urlpatterns then probably stick the image into our static files setup and thennnnn hmmm, you'd wanna perhaps have a celery task which is doing the generation of the image per day (and you'd probably want to clean up old images too!). Create an issue on carbondoomsday repository so we can track that?

YPCrumble commented 6 years ago

@lwm thanks! In Gmail for instance, you add a signature by pasting an image url, so I'd expect we would have something like https://www.carbondoomsday.com/email_signature.png (but any URL is fine). I think a direct URL like the above might be easier...because we'd also be hosting it on the site...I'm not sure how we're hosting images like https://www.carbondoomsday.com/skull.png?

The idea like you said is to run the script on a daily basis and overwrite https://www.carbondoomsday.com/email_signature.png with the updated image wherever it's stored, maintaining the same path/filename. Then (I hope) the updated PPM number appears on people's signatures automatically. We'd need to make sure the caching of the image was <= 1day.

Does this all make sense? If so I can add the issue on the API repo.

decentral1se commented 6 years ago

I'm not sure how we're hosting images like https://www.carbondoomsday.com/skull.png?

We seem to just be placing static images over at:

https://github.com/giving-a-fuck-about-climate-change/carbon-inferno/tree/master/public

Well, I think we could have it a carbondoomsday.com URL but then it would just be a proxy to api.carbondoomsday.com/ to get the image. If we're fine with that, I am. If we can the back-end producing the right PNG file from an end-point, we're on the way. Let's move over to there then.

pwhisenhunt commented 6 years ago

Dope work on this stuff y’all! One thing we may want to explore is using a CDN to store static files that we wish for others to consume. Additionally, we should probably figure out how we want to tell people about the email signature on the website. Great work all around!

Sent from my iPhone

On Feb 11, 2018, at 3:25 PM, Luke Murphy notifications@github.com wrote:

I'm not sure how we're hosting images like https://www.carbondoomsday.com/skull.png?

We seem to just be placing static images over at:

https://github.com/giving-a-fuck-about-climate-change/carbon-inferno/tree/master/public

Well, I think we could have it a carbondoomsday.com URL but then it would just be a proxy to api.carbondoomsday.com/ to get the image. If we're fine with that, I am. If we can the back-end producing the right PNG file from an end-point, we're on the way. Let's move over to there then.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

titojankowski commented 6 years ago

So cool, nice work @YPCrumble @pwhisenhunt @lwm!! Love the image idea as a simple solution.

I use WiseStamp for dynamic email signatures (like latest tweet, etc): https://www.wisestamp.com Wisestamp a paid plugin for Gmail so far less cool, but may be instructive. It can pull from RSS. I've used it to embed my latest blog post title from my blog in my emails.

titojankowski commented 6 years ago

@YPCrumble any updates on this? ready to put this in my email signature!!