Challenge Overview
Competition Task Overview
For this challenge, we need to implement a few reusable d3.js charts based on the design and integrate them into the existing prototype.
Please note only the 02 screens are in scope, you can ignore all the other ones.
Here are the detailed requirements:
1. Radar Chart: please check screens 02-01, 02-02, 02-03, 02-05, 02-06, 02-07, 02-08, 02-09 and 02-10
This chart is shown in the ‘Costs’ and ‘Energy’ tabs in the images. This plot compares total ‘baseline’ and ‘efficient’ energy use, CO2 emissions, or operating cost outcomes across multiple categories of a certain ECM grouping variable. Grouping variables include the energy end use, climate zone, and building sector of ECMs in the analysis. For a given grouping variable, ‘baseline’ and ‘efficient’ polygons are drawn by plotting points across multiple axes that each represent a category of the grouping variable. In image ‘’02-01,’ for example, the two polygons are constructed from total baseline and efficient energy use outcomes for each energy end use in the analysis. The difference between the baseline and efficient points on each axis in the radar plot represents a savings (e.g., in ’02-02’ it represents energy use savings, highlighted with a yellow line). More on radar plots can be found here: http://www.datavizcatalogue.com/methods/radar_chart.html
Notes:
- The gradient in the fill color of the polygons on the radar graphs can be dropped (e.g., see the pink and purple gradients in image 02-1) so long as the transparency of this fill remains.
- The "Display Baseline Cost" and "Display Efficient Cost" options should be removed from the prototype (screen 02-5)
- The "Display Baseline Energy Use" and "Display Efficient Energy Use" options should be removed (screen 02-1)
- Note in the charts the year range in the parenthetical note above the plot (e.g., (TOTAL ENERGY SAVED 2014-2015)) should be updated based on the range of years shown.
- CO2 should always have a subscript 2 (it is not consistent everywhere it appears in the bar plot examples 02-4).
- In all of the examples, the year range is shown as 2014-2015, and that has been interpreted as the default range. We would like for that to be changed in this challenge. We would like the default year range to be the current year (based on the date/time) to the last year in the JSON.
2. Bar Chart: please check 02-04
This one should be pretty straightforward, but please make sure you use the same colors, fonts, etc... as the design. If it's difficult to implement the rainbow gradient in the bar plot segment for ‘Others’ (image 02-4), we are ok changing this to a solid color, but the rainbow gradient is definitely preferred.
Please note that both Radar Chart and Bar Chart are required for the first 3 tabs.
3. Scatterplot Chart: please check screens 02-11 and 02-12
We have four different types of financial metrics that are output for each Energy Conservation Measure (ECM) in our analysis. The metrics are: Internal Rate of Return, Simple Payback, Cost of Conserved Energy, and Cost of Conserved Carbon. The user selects which two of these financial metrics they want represented on the x axis and y axis of this scatter plot, and the values of each metric define the x and y coordinates for each point on the plot. The lighter shaded bubbles around these coordinates represent uncertainty intervals extending from the coordinate values in both the x and y directions. Uncertainty is reported as the 5th and 95th percentile of each value, 5th and 95th percentile values are indicated by variable keys in the supporting JSON marked ‘(low)’ and ‘(high)’
4. Please make sure all these charts are implemented and integrated into the prototype, the prototype must be fully working with charts and the json data we provided. The filters in the left sidebar must work, the charts must be rendered using the data in the provided json (could possibly be filtered by the filters), you should NOT make up any test / mock data or modify the data we provided.
Please note the filters in the current prototype don't work properly yet even though the filters info is already in the JSON. The full set of climate zones, building sectors, and end use filters are nested under the "Markets and Savings (by Category)" key for each ECM.
The "Filter Variables" key currently in the JSON is only useful for filtering out which ECMs are displayed in the financial metrics tab, it does not actually break out ECM energy, carbon, and cost results, as we need to do for the bar plot and radar chart visualizations. Thoese breakouts are included under the "Markets and Savings (by Category)" key. If you sum the broken out results under the "Markets and Savings (by Category)" key for each ECM, they should equal to the results reported under the "Market and Savings (Overall)" key for each ECM.
Also the current prototype only references the first ECM ("Cool Roofs, AIA Climate Zones 4-5"). However there are multiple other ECMs in the JSON below that, Many of these apply to multiple building types and all of the climate zones.
We need all these working properly after this challenge.
Notes:
- "All" is an implied filter for the End Use, Climate Zone, and Building Sector, and should not be shown
- The filter title “Period Years” in the sidebar on the page should be changed to “Year Range”.
5. The final prototype (including charts) must match our design (except that the design has a mistake of showing "Sankey" instead of "Bar" in some of the screens).
Technology Overview
Javascript
D3.js
HTML5
CSS3
Documentation Provided
Please register to download documents from the challenge forum.
Final Submission Guidelines
Submission Deliverables
- Full prototype that covers all requriements
- A simple readme about prototype verification (especially the charts).