Custom visualizations

Earlier in the course, you created custom designs to visualize an energy consumption dataset. We have picked two of your designs for you to implement in the resit assignment.

Design 1

Design 1: Heating and cooling energy use over multiple months.

This design shows energy used for heating and cooling over time as a path in a polar plot. Each line corresponds to a city differentiated by their marker shapes. The markers act as pie-chart indicating the percentage of cooling and heating energy and their sizes encode the total energy used per month. Don't forget to add cocentric circles in the background of your visualization to act as the radius-axis' grid marks to improve legibility. You don't have to implement the legends for this exercise.

The main component for this design is located at src/routes/resit_project/designs/design_1.svelte and you can load the data from /data/monthly_heating_cooling.csv. Before you start coding, think about how you want to structure your visualization and create the sub-components you need using the _design_1_*.svelte naming scheme.

Design 2

Design 2: Heating and cooling energy use over multiple months.

This scatter plot design shows the monthly total energy used for heating and cooling. The glyphs' Y-positions indicate the total energy used across all cities and their X-positions indicate the month. The lines of each glyph encode a city's individual energy use by their length. You don't have to implement the legends for this exercise, but do indicate which line corresponds to which city at least once (for example in text below your visual).

The main component for this design is located at src/routes/resit_project/designs/design_2.svelte and you can load the data from /data/monthly_heating_cooling.csv. Before you start coding, think about how you want to structure your visualization and create the sub-components you need using the _design_2_*.svelte naming scheme.