Challenge Overview
Welcome to the SunShot - BuiltSpectrum - Dashboard Graph Visualization Prototype Challenge! Spectrum provides cloud-enabled building performance software for the architecture/engineering/construction industry. The software seamlessly integrates computer-aided-design (CAD), building performance analysis tools, and cloud-based intelligence. Architects receive real-time feedback on life cycle cost, energy use, and environmental impact during the early stages of the design process. Novel data visualization methods allow architects to easily create low-cost, energy efficient, code compliant designs.
For this challenge, the goal is to build all the graphs’ functionality using D3JS and loading of JSON data based on the storyboard with the features outlined below.
As part of this challenge you will need to document all HTML5/CSS3/JavaScript code. We need a clear explanation of the code to help us understand the HTML5/CSS3/JS code functions and make it easier for future developers and the client to understand what you have built. Use Bootstrap and jQuery for this challenge.
Final Submission Guidelines
Layout and storyboard look and feel of this challenge are not important. What is important is to build fully functional graphs and charts based on the D3JS library and loading of data from JSON files using the design from the provided by the storyboard.
Primary Requirements:
1. Build all the graphs and charts outlined below.
2. You can use Bootstrap to follow the basic layout of the storyboard. The storyboard is provided for the look and feel of the graphs.
3. No need to create the header/footer/sidebar, we just need to have the graph sections outlined below.
4. Navigation can be as simple as unordered list (ul tag).
5. Separate any CSS file that is intended for the graphs.
6. Separate any JS file that is intended for the graphs.
7. Document how each graph/chart can be merged or inserted into another HTML prototype.
- Explain what HTML code should be copied on each graph.
- Explain what JS configurations are needed.
8. Create dummy data based on the provided Spectrum_Dataset_100_Nov3.xlsx. This dummy data needs to be in JSON files.
Graph Requirements:
The following are the charts and functionalities needed for this challenge.
1. Dashboard
- This page will have 5 sections outlined below.
- Use Boostrap panels as the container to display each section. No need to have mouseover or column layout, we just need to make the graphs work and the loading of data that should come from JSON file.
- By default, all the metrics (Categories and their Objectives) will have zero values and no graphs.
- Add “Set” button that when user clicks on it will set a new baseline. Load the new values of Category and their Objectives values from a JSON file.
1.1 Energy Use Intensity
- Refer to 02 Dashboard_EUI.png
- This graph will hold the Energy Category’s Objective (on Data sheet, cells B40 to B43).
- Get sample data from cells P40 to P43.
- The large number at the top in this section is from cell P40.
1.2. Total Cost
- Refer to 03 Dashboard_Total Cost.png
- This graph will hold the Cost Category’s Objective (cells B46 to B48).
- Get sample data from cells P46 to P48.
- The large number at the top in this section is from cell P48.
1.3. Water Consumption
- This section will have no graph but it will display the water consumption data from cell P51.
1.4. Environmental Impact
- Refer to 04 Dashboard_Environmental Impact.png
- This graph will hold the Environmental Impact Category’s Objective ( cells B54 to B65).
- Get sample data from cells P54 to P65.
- The large number at the top in this section is from cell P54.
1.4. Daylighting
- This is another donut graph but with an icon in it.
- This graph will hold the Daylighting Category’s Objective (cells B68 to B70).
- Get sample data from cells P68 to P70.
2. Comparison of Design Alternatives Page
- Refer to 07 Result_Hover.png.
2.1. Actions
The following are the actions required for this page.
2.1.1. Add New Design
- Add a “+Add New Design” button to simulate the adding of a new design into the graphs. This generates a new bar/pie/donut chart next to any existing ones.
- Provide sets of design json files (ex. design1.json, design2.json, etc…) to simulate server request. Have at least 10 design sample data files to simulate the adding of new designs into the graphs.
- Initial screen will load only design1.json data.
- When this button is clicked, the next design file (ex. design2.json) will load and the data will integrate into the charts.
2.1.2 Modify Objectives
- Sections “Energy”, “Cost”, and “Environmental Impact” have multi-selection dropdown options (objectives) to change the current display of each graph. See 08 Result_Attribute.png for reference.
- Selecting a new objective or objectives should update the graph with the new objective’s data.
- Multiple objectives (or only one objective) may be shown on all charts except water, since water has only one objective.
- Note multiple energy and environmental impact objectives are shown via side-by-side bars.
- Note multiple cost objectives are shown via a stacked bar chart.
- Note multiple daylighting objectives are shown via either a pie or donut chart.
2.2. Graphs
- The following results (graphs) are needed for this page.
- Use Bootstrap panels for each section and follow the layout from the storyboard.
- Each graph will have Baseline values which need to be stored in JSON file. You can get sample values from any of the datasets in the provided Excel file.
2.2.1. Energy
- This is a multi-objective bar chart.
- Data in here are from rows 40 to 43 and starting from column P.
- The figures with arrow up/down besides them are in comparison (difference) with the Baseline values. Show arrow up if the difference is positive, otherwise show arrow down.
- Checking/unchecking an item from the Attribute dropdown (08 Result_Attribute.png) will update the graph and the table display beside it. Show only bar and data that is checked and hide the others.
- “All” checkbox will check/uncheck all attributes value in this dropdown.
- On mouseover on each bar, show a tooltip with the information in the bar.
- Use horizontal scrollbar in the graph section as needed to show multiple designs.
- “25 / kBTU/ft2/year” this value and units should be pulled from JSON.
2.2.2. Cost
- This is a stacked bar chart, the one in the storyboard is incorrect graph type. Please change it to stacked graph as shown in cost-stacked-graph.png.
- Data in here are from rows 46 to 48 and start from column P.
- Apply similar checking/unchecking of attributes from the dropdown field from the Energy section.
- Apply tooltip on mouseover functionality.
- Use horizontal scrollbar in the graph section as needed to show multiple designs.
- “$78 /ft2” this value and units should be pulled from JSON.
2.2.3. Water Consumption
- This is a single objective bar chart
- Data in here are from row 51 starting from column P.
- This section will have no attributes dropdown.
- Apply tooltip on mouseover functionality.
- Use horizontal scrollbar in the graph section as needed to show multiple designs.
- “15 / Day (GPCD)” this value and units should be pulled from JSON.
2.2.4. Environmental Impact
- This is a multi-objective bar chart.
- Data in here are from row 54 to 65 and starting from column P.
- Apply similar checking/unchecking of attributes from the dropdown field from the Energy section.
- Apply similar tooltip on mouseover functionality from Energy section.
- Use horizontal scrollbar in the graph section as needed to show multiple designs.
- “31 %” this value and unit should be pulled from JSON.
2.2.5. Daylighting
- This will be a pie chart or donut chart (choose one).
- Data in here are from row 68 to 70 and starting from column P.
- There will be no attribute dropdown in this section.
- Use horizontal scrollbar in the graph section as needed to show multiple designs.
- “11% | 65% | 49%” these values and units should be pulled from JSON.
3. Analysis page
- Refer to 09 Analysis.png
- The following are the graphs required for this challenge.
3.1. Tradeoffs
- This will be an interactive scatterplot diagram that will display 100 design alternatives from the provided Excel file based on selected objectives.
- Objective 1 dropdown will have the 23 objectives (cells B40 to B70). This is the X axis.
- Objective 2 dropdown will also have the 23 objectives (cells B40 to B70). This is the Y axis.
- A green dot indicates a baseline design. This should be included in the JSON data.
- Modifying objectives should update the graph.
3.2. Sensitivity Analysis
- This will be an interactive tornado graph. The bar in this graph type are ordered from the largest bar on top to the shortest bar at the bottom.
- Display Building Components as sections.
- Parameters are grouped together by building component.
- Each section will have their respective tornado graph.
- “Attribute Y” dropdown options are from the Objectives (cells B40 to B70).
- “Add/Remove Parameters” dropdown options are from the Parameters (cells B8 to B32).
- Both dropdowns will have checkbox for each option to allow multiple selections.
- Multiple Attribute Y (Objectives) may be selected, in which case multiple bars will be generated for each parameter.
- Checked Parameter options will serve as the Y-axis.
- X-axis is based on the minimum and maximum values of the Objectives (rows 40 to 70) and columns P to DK. Example if the Attribute Y is “Energy Use Intensity (EUI)”, get the minimum and maximum values of row 40 from column P to DK.
- The user may also create custom tornados by selecting parameters that aren’t necessarily grouped under the same building component.
- Implement collapsing/expanding section. Only show one expanded section at a time.
- Checking/unchecking parameters only applies to the section that is displayed and not applicable to those hidden charts.
- Checked/unchecked options will get updated depending on what is shown in the expanded section.
Browser Compatibility:
- IE9+
- Latest Google Chrome (Windows & Mac OS)
- Latest Safari (Mac OS)
- Latest Firefox (Windows & Mac OS)
HTML
- HTML should be valid HTML5 compliant.
- Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors.
- Element and Attribute names should be in lowercase and use a "-" to separate multiple-word classes (i.e.. "main-content")
- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- Validate your code. Reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
CSS
- CSS code should be valid level 3.
- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
- Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all CSS so developers can follow the code.
- All CSS naming should not have any conflicts.
- As possible use CSS style when create all styling.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page.
- Only use table tags for tables of data/information and not for page layout.
- Use variables with well-chosen names. Use some sort of naming convention.
Javascript
- All JavaScript must not have a copyright by a third party. You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
- Use jQuery library for this challenge.
Images
- Images should be properly compressed while still having good visual quality.
- Please use best practice repetition usage of background based image.
- Please use sprites when using icons for your submission.
Submission Guidelines:
A complete list of deliverables can be viewed in the UI Prototype Competitions Tutorial.