Design Explorer Very Lite

[theo-armour]

@ladybug-tools/spiders

It's not often that I get access to data from most of the Ladybug Tools projects because I don't have Rhino/Dynamo etc. But when I do come across some data files, it's fun to see/think what could be done with it.

See here is a first pass at looking at the Design Explorer data from

https://github.com/tt-acm/DesignExplorer/tree/gh-pages/design_explorer_data

Full Screen: Design Explorer Very Lite R1

First pass at gathering all the data and providing a display of the data

• Loads a CSV file which then loads all the JSON files and displays these in 3D
• RedBox is the default. All three data sets available with th click of a button
• Spacing and position is roughly calibrated on-the-fly for each data set
• Single file / 7 KB

Read Me

The read me includes the five previous versions that lead up to R1

To do / wish list

• Sort the JSON objects given X,Y and Z axis, size, color etc
• Mouse over each JSON object to view its details
• Add Sun, shade and shadows

[chriswmackey]

@theo-armour ,

Interesting stuff here and thanks for sharing.

If the goal is to visualize all of the 3D options of the design space at once a more appropriate title might be "Design Explorer Heavy" :)

Most of my parametric studies don't make use of the 3D json files but, for those that do, this could be an interesting way to show all that was simulated.

[theo-armour]

@chriswmackey @MingboPeng @mostaphaRoudsari

As per Chris' comment, most work will not include 3D JSON files, so let's look at the data in 3D,

This rev provides user choices of what to display on three axes. More choices on the way - especially with colors and shapes.

The normalization routine - a bugaboo in past graphs - is much improved and simplified here.

Full Screen: Design Explorer Very Lite R4

Read Me

• Fetches CSV data from Design Explorer Lite Sample Project1
• Parse the data into a 3D view
• All data normalized into a 100 x 100 x 100 3D space
• You can select which parameters are displayed on which of the three axes
• Mouseover any cube to display its parameters and PNG image
• Select Bootstrap theme
• Menu slides out of way for operation on a mobile phone
• Under 700 lines / 18 KB / Dependencies: Three.js only

To do / wish list

• 2018-08-04 ~Theo ~ Add display of colors, sizes, shapes, opacity, shape surrounds
• 2018-08-04 ~ Theo ~ Add filters
• 2018-08-04 ~ Theo ~ Add axes labeling and min & max
• 2018-08-04 ~ Theo ~ Add better heads-up display and mouseover interaction
• Add Sun, shade and shadows?

[theo-armour]

@chriswmackey @MingboPeng @mostaphaRoudsari

Script 10 / 2018-08-09: Design Explorer Very Lite R6

Full Screen: Design Explorer Very Lite R6

• Add edges in black to data points
• Currently selected data point highlights on mouseover heads-up as expected
• Add basic basic axes labels as billboards
• Add min and max values to axes labels
• Add basic grid
• Images appear in left menu when there's a mouseover a data point
• Add button to toggle screen background
• Add button to toggle rotation

Wish list items completed

• 2018-08-04 ~ Theo ~ derive axes selection item directly from the 'out' items in the CSV file
• 2018-08-04 ~Theo ~ Add display of colors, sizes, shapes, opacity, shape surrounds
• 2018-08-04 ~ Theo ~ Add axes labeling and min & max
• 2018-08-04 ~ Theo ~ Add better heads-up display and mouseover interaction
• Add Sun, shade and shadows?