Make a Monthly Bar/Line Chart

[chriswmackey]

I just got out of a meeting with a natural ventilation expert who had made a big effort to use Ladybug but eventually decided to use climate consultant because it produced this chart:

A lot of the times we are producing monthly data and I have also wanted something like this in order to visualize it. Furthermore, I have come to admit that it really is one of the best ways to estimate natural ventilation potential. Lastly, it shouldn't take much more than a day to bust out and I will do so this upcoming weekend.

[mostaphaRoudsari]

We had very good discussions about this graph and agreed that it has enough values to be developed as a component for Ladybug - We will keep it simple and in Ladybug style! :beetle:

[chriswmackey]

Here are the notes on what I plan to do: As for the 2D graph, I am aware that we don't want to get too crazy with this because, at a certain point, we will just be copying other graphical tools as opposed to making original stuff. However, there are three very important reasons that I can see for this one particular chart. The first is that the averagedMonthly and avrMonthlyPerHopur outputs of the "Average Data" component are really useful for understanding things and yet I never use them because none of the other components really accept it as input. Also, now that we have monthly and daily outputs coming out of E+, I really could use some means of visualizing these results quickly. The second reason is that there are a lot of things about the climate consultant chart that I know that both designers and engineers want changed or made customizable. Most designers want the ability to customize color schemes and fonts. On the engineering side, there is a huge amount of interactive potential for such a chart that climate consultant simply does not accomodate. The ability to adjust the comfort band based on a building balance point is one of the biggest pet peeves of the Nat vent experts and the ability to control what type of data is put on the chart is another. Lastly, I know that there is still the argument that all of these features and customizability can be achieved with excel but, here, my biggest beef is the time it takes to make these charts. A psychology study that I read had made the case that people's creativity tends to shut down if they have to wait longer than 7 seconds to try something out and this generally defines what we consider real time interactivity. The time that it takes to export monthly data from Grasshopper to Excel, select the data that I want, and format it the way that I want, at least a minute has already passed and I have lost motivation and curiosity to add in another data layer to the chart for comparison. Just being able to connect up a data to a component, and I can probably be a lot more creative.

[mostaphaRoudsari]

@chriswmackey I did some studies with D3.js this week (http://d3js.org/) and I found it super powerful for visualization. It can read both .json and .csv formats.

Also check this out. I haven't tested it but looks like a perfect tool to make dashboards: https://t.co/oug9qtwlR1

Neither of them will replace this graph but I'm just adding them here as the possible next steps to keep track of them.

[chriswmackey]

@mostaphaRoudsari , very glad to hear it. I have plans to gain more experience with D3 soon. I noticed bootstrap advertised on the keen.io site, which a lot of people have been recommending to me these days for building web sites (http://getbootstrap.com/). It's open source and seems to save a lot of time in comparison to coding pages from scratch but also allows a lot more freedom than trying to build stuff with classical CMS systems like wordpress.

Another important library that Ben Golder and a few of the members at the MIT code kitchen have been suggesting is three.js (http://threejs.org/). It is not nearly as extensive as Rhinocommon but from the looks of the documentation (http://threejs.org/docs/), it seems like there's enough there to make a few of our basic graphics in a 3D web interface:

Do you know what libraries were used for Platypus? I imagine that those might also be really useful.

To be honest, I am mostly making this graph component because a lot of other people have demanded it and to save me a bit of time in the future. However, it's also a good opportunity to make something simple that we could easily translate or replicate with these other web languages and libraries. Please post more ideas if you come across them.

[mostaphaRoudsari]

Hi @chriswmackey. Both Platypus and VA3C (https://github.com/va3c) are using threejs. If you want to get started I would recommend to check @theo-armour 's blog (http://www.jaanga.com/) and also va3c github repo. Also @theo-armour is the one to ask all your three.js questions. He is the man!

PS: Hi Thoe!

[chriswmackey]

@mostaphaRoudsari , thank you for all of the awesome info. Getting into three.js is definitely on my agenda and I intend to get to it shortly after I get through the last of these GH components that have been on my list for a while. Developing in the GH environment has been a great way to get a lot of architects and engineers on board but I am coming to realize that energy modelling will not be brought to the masses until we establish good 3D web interfaces. @theo-armour 's blog looks like a great resource and I intend to go through it a lot. @theo-armour, it is a pleasure to meet your github persona. I am sure that I will find the resources myself eventually but, if you have any place that would be particularly good start for translating lines of Rhinocommon to three.js, I would greatly appreciate it.

[mostaphaRoudsari]

@chriswmackey you've already met Theo at the Hackathon. :)

I assume Theo will tell you that the best reference to see how to convert RhinoCommon to Three.js is Grasshopper converter for va3c: (https://github.com/va3c/GHvA3C). You may want to contribute to their development instead of creating your own exporter.

[chriswmackey]

In attempts to save myself from embarrassment, I will say that I remember meeting Theo at the hackathon but this is the first time that I am meeting his "github persona." Very sorry, Theo, that it took me so long to connect the web profile name with the person. Contributing to va3c sounds like a good idea. Theo, if you have any suggestions for starting out, please send them my way.

[theo-armour]

following the thread. Will respond in few hours.

Can I invite you to vA3C Google Group?

On Sun, Nov 9, 2014 at 7:00 PM, Chris Mackey notifications@github.com wrote:

In attempts to save myself from embarrassment, I will say that I remember meeting Theo at the hackathon but this is the first time that I am meeting his "github persona." Very sorry, Theo, that it took me so long to connect the web profile name with the person. Contributing to va3c sounds like a good idea. Theo, if you have any suggestions for starting out, please send them my way.

— Reply to this email directly or view it on GitHub https://github.com/mostaphaRoudsari/ladybug/issues/96#issuecomment-62335209 .

[theo-armour]

Chris

This thread covers many areas.

Are you looking to produce 2D charts that look like the image in the first message - as produced by Climate Consultant? If so then you certainly do not need Three.js - which is primarily a tool for real-time interactive 3D.

There is also mention of extracting data from RhinoCommon and getting that into Three.js but that is a very different topic. And since it's all Rhino date, would the Grasshopper exporter work?

All the topics are interesting. Can we just figure out which to tackle first? ;-)

Theo

PS & BTW I have huge admiration for Rhino & MSC but little direct experience. ;-(

[chriswmackey]

@theo-armour , Thanks for the quick response. I know that this thread is all over the place and this is in large part because I am not exactly sure what I want to build yet. I know that, in the far future, I would like to build some online dashboards that allow me to send a bunch of stats of energy models to others but I am not exactly sure what this will entail right now. It would be really nice to have a 3D depiction of what is simulated next to the data. I was thinking that I might start with a few experiments of taking things that I have already coded in GHPYthon and building web versions of them. Perhaps a pre-step of this is just getting familiar with the Grasshopper exporter and I will try this first. Please eel free to invite me to the vA3C Google Group.

[chriswmackey]

Hey Guys, So the actual reason why this issue was created is now finished as you can see below, I have manged to produce a pretty versatile Monthly Bar Chart that should satisfy a lot of the demands that community members have had. @theo-armour and @mostaphaRoudsari , even though this issue is closed, please feel free to continue the discussion of web applications. I have created a new issue so that this discussion might continue. Thanks, as always, for all of the info and help.

Pictures of the new 3D Bar Chart:

[mostaphaRoudsari]

@chriswmackey you are my hero!

[chiensiTB]

This is pretty sweet @chriswmackey . I agree with @mostaphaRoudsari that d3 may be the way to go with charts. Like we did on Pollinator

[theo-armour]

For charts with a few dozen data points or even 365 x 24, then D3 is probably a nice way to go and Three.js is overkill.

If you have many thousands/millions of data points and lots of variables, real-time data and so on then 3D may become interesting.

Question: The charts show data for one airport for a year in the past. If you are a manager of something related to these charts, what are you seeing that could help manage better? In other words what are some use cases that you see for this set of charts that could help generate some useful outcomes?