Skip to content

Commit

Permalink
Update 2023-10-26T20:46:59.361Z
Browse files Browse the repository at this point in the history
  • Loading branch information
@tomay
tomay committed Oct 26, 2023
1 parent aadfe0d commit 345dd79
Show file tree
Hide file tree
Showing 4 changed files with 103 additions and 35 deletions.
8 changes: 4 additions & 4 deletions app/templates/layout/splash_modal.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,16 @@
<button id="splash-close">
<span>&times;</span>
</button>
<h1>Welcome to the Seattle Energy Benchmarking Data Visualization!</h1>
<h1>Welcome to the Seattle Energy Benchmarking Map!</h1>
<p>
Use this tool to explore building energy and greenhouse gas emissions performance data that is collected under Seattle’s energy benchmarking ordinance.
Use this tool to explore building energy and greenhouse gas emissions performance data that is collected under <a href="https://www.seattle.gov/environment/climate-change/buildings-and-energy/energy-benchmarking">Seattle’s energy benchmarking ordinance</a>.
</p>
<p>
The Seattle Energy Benchmarking Data Visualization displays annual energy performance data for buildings 20,000 square feet and larger for the years 2015-2021. To access the Seattle Energy Benchmarking data in a tabular format, please visit the <a href="https://data.seattle.gov/browse?q=building%20energy%20benchmarking&sortBy=relevance&utf8=%E2%9C%93">Seattle Open Data Portal</a>.
The Energy Benchmarking Map displays annual energy and GHG emissions data for buildings 20,000 square feet and larger, dating back to 2015. To access Seattle Energy Benchmarking data in a spreadsheet format, please visit the <a href="https://data.seattle.gov/browse?q=building%20energy%20benchmarking&sortBy=relevance&utf8=%E2%9C%93">the Seattle Open Data Portal</a>.
</p>

<p>
The City of Seattle encourages everyone to participate in its programs and activities. For disability accommodations, data in alternate formats, or accessibility information, please contact <a href="mailto:[email protected]">[email protected]</a> at your earliest opportunity.
The City of Seattle encourages everyone to participate in its programs and activities. For disability accommodations or information in alternate formats, please contact <a href="mailto:[email protected]">[email protected]</a>.
</p>

<div id="splash-controls-wrapper">
Expand Down
117 changes: 89 additions & 28 deletions app/views/layout/tutorial.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,29 +17,32 @@ define(['jquery', 'underscore', 'backbone', 'driver'], function ($, _, Backbone,
initTutorial: _.once(function (mapview) {
var driver = window.driver.js.driver;
var state = this.state;
var startlat = state.get('lat');
var startlng = state.get('lng');
var startzoom = state.get('zoom');
console.log(startlat);
console.log(startlng);
console.log(startzoom);
console.log(mapview);
var userlat = state.get('lat');
var userlng = state.get('lng');
var userzoom = state.get('zoom');
var driverObj = driver({
showProgress: true,
allowClose: true,
showButtons: ['next', 'close'],
steps: [{
element: '#search',
onHighlighted: function onHighlighted() {
// make sure we have focus
document.querySelector('.driver-popover').focus();
// it is possible to load on a building report, so go ahead and click the close button
$('a#back-to-map-link').click();
// it is also possible to have a map popup open, close them
// START: make sure we use the default view and deselect everything
$('#back-to-map-link').click();
var citycenter = state.get('city').get('center');
var cityzoom = state.get('city').get('zoom');
mapview.leafletMap.setView(citycenter, cityzoom);
state.set({
building: null
});
mapview.leafletMap.closePopup();
mapview.leafletMap.highlightLayer.clearLayers();
},
popover: {
title: 'Search',
description: 'Use the Search bar to find a building based on its name, address, or building ID'
description: 'Use the Search bar to find a building based on its name, address, or building ID.'
}
}, {
element: '#map-category-controls',
Expand All @@ -48,7 +51,7 @@ define(['jquery', 'underscore', 'backbone', 'driver'], function ($, _, Backbone,
},
popover: {
title: 'Filter buildings',
description: 'Filter buildings based on criteria like neighborhood, council district and reporting year',
description: 'Filter buildings based on criteria like neighborhood, council district or reporting year',
onNextClick: function onNextClick() {
// Add an image of the menu - this is overall easier to control than selectize
// and we don't have any focus conflicts (see next step)
Expand Down Expand Up @@ -85,7 +88,7 @@ define(['jquery', 'underscore', 'backbone', 'driver'], function ($, _, Backbone,
},
popover: {
title: 'Map display',
description: 'The visualization defaults to displaying greenhouse gas emissions; you can toggle between absolute GHG emissions and GHG intensity, as shown next.',
description: 'The map defaults to displaying greenhouse gas (GHG) emissions; users can toggle between absolute GHG emissions and GHG intensity (emissions per square foot), as shown next. Move the sliders to filter for the highest or lowest emitting buildings.',
onNextClick: function onNextClick() {
// open the next panel
$('#total_ghg_emissions_intensity').click();
Expand All @@ -99,7 +102,7 @@ define(['jquery', 'underscore', 'backbone', 'driver'], function ($, _, Backbone,
},
popover: {
title: 'Map display',
description: 'You can also visualize buildings by GHG intensity (i.e. per square foot)',
description: 'You can also visualize buildings by GHG intensity (i.e. emissions per square foot)',
onNextClick: function onNextClick() {
// Collapse the accordion
$('input#category-greenhouse-gas-emissions-expanded').click();
Expand All @@ -116,7 +119,12 @@ define(['jquery', 'underscore', 'backbone', 'driver'], function ($, _, Backbone,
},
popover: {
title: 'Map display',
description: 'In addition to greenhouse gas emissions data, you can also choose to display energy performance metrics and property information like square footage. Click on these tabs to minimize or maximize these data types.'
description: 'Users can choose to display greenhouse gas emissions, energy performance metrics, and property information like square footage. Click on these tabs to minimize or maximize these data options.',
onNextClick: function onNextClick() {
// Zoom in so that building footprints are shown
mapview.leafletMap.setView([47.6050418, -122.3299205], 16);
driverObj.moveNext();
}
},
onDeselected: function onDeselected() {
// reopen the accordion, select the first panel
Expand All @@ -126,16 +134,25 @@ define(['jquery', 'underscore', 'backbone', 'driver'], function ($, _, Backbone,
$('#map-controls-content--inner').height('100%');
}
}, {
element: 'table.comparables',
element: '#map',
onHighlighted: function onHighlighted() {
document.querySelector('.driver-popover').focus();
},
popover: {
title: 'Compare buildings',
description: 'Buildings that are viewed in succession will populate the Building Comparison tab. If you click on Building Comparison, a side by side comparison will expand from the bottom of the screen.',
title: 'Map display',
description: 'Zooming in will display additional detail about the building location and footprints.',
onNextClick: function onNextClick() {
// Zoom in so that building footprints are shown
mapview.leafletMap.setView([47.6050418, -122.3299205], 16);
// Select a building: has to be in this order for some reason
state.set({
selected_buildings: [{
id: '357',
selected: true,
insertedAt: Date.now()
}]
});
state.set({
building: '357'
});
driverObj.moveNext();
}
}
Expand All @@ -146,30 +163,74 @@ define(['jquery', 'underscore', 'backbone', 'driver'], function ($, _, Backbone,
},
popover: {
title: 'Map display',
description: 'Zooming in will display building shapes.',
description: 'Clicking on a building will display an information snapshot. To view a more detailed, building-specific report, click on "View Building Report".'
}
}, {
element: 'table.comparables',
onHighlighted: function onHighlighted() {
document.querySelector('.driver-popover').focus();
},
popover: {
title: 'Compare buildings',
description: 'Buildings that are selected in succession will populate the Building Comparison tab. If you click on Building Comparison, a side by side comparison will expand from the bottom of the screen.',
onNextClick: function onNextClick() {
// Select a building
// Select a building and quickly click "Show Report"
state.set({
building: '357'
});
driverObj.moveNext();
$('button#view-report').click();
// without this delay, seems that Driver cannot find the element
setTimeout(function () {
driverObj.moveNext();
}, 750);
}
}
}, {
element: '#map',
element: '#building-details-cards-wrapper',
onHighlighted: function onHighlighted() {
document.querySelector('.driver-popover').focus();
},
popover: {
title: 'Map display',
description: 'Clicking on a building will show an information snapshot. Clicking on “View Building Report” will take you to a building-specific report that provides more detailed building information.'
title: 'Building performance details',
description: 'The customized Building Report displays the building’s EUI and GHG Intensity for the selected reporting year and frames them in the context of their peers. The report also displays the energy consumption and GHG emission breakdown by fuel type (e.g. electricity, natural gas, district steam).'
}
}, {
element: '#change-chart',
onHighlighted: function onHighlighted() {
document.querySelector('.driver-popover').focus();
},
popover: {
title: 'Building performance trends',
description: 'The report displays performance trends of the same building over time against a typical building of the same property type.'
}
}, {
element: '#performance-standard-chart',
onHighlighted: function onHighlighted() {
document.querySelector('.driver-popover').focus();
},
popover: {
title: 'Building performance standard',
description: 'For commercial buildings 50,000 SF and larger, the report displays current energy performance versus an approximate Washington Clean Buildings Performance Standard EUI target.'
}
}, {
element: '#links',
onHighlighted: function onHighlighted() {
document.querySelector('.driver-popover').focus();
},
popover: {
title: 'Utility incentives',
description: 'Users can also find utility incentive opportunities at the bottom of the report.'
},
onDeselected: function onDeselected() {
// zoom back out to the default view and deselect the building
mapview.leafletMap.setView([startlat, startlng], startzoom);
// END: zoom back out to the default view and deselect the building
$('#back-to-map-link').click();
mapview.leafletMap.setView([userlat, userlng], userzoom);
state.set({
building: null
});
state.set({
selected_buildings: []
});
mapview.leafletMap.closePopup();
mapview.leafletMap.highlightLayer.clearLayers();
}
Expand Down
11 changes: 9 additions & 2 deletions app/views/map/building_layer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,9 @@ define(['jquery', 'underscore', 'backbone', 'collections/city_buildings', 'model
color: this.getColor(chartData.lead.field, building.get(chartData.lead.field)),
label: chartData.lead.label
};

// console.log(o.chart.lead);

if (!_.isNumber(o.chart.lead.value) || _.isNaN(o.chart.lead.value)) {
o.chart.lead.nodata = chartData.lead.nodata;
}
Expand Down Expand Up @@ -327,7 +330,6 @@ define(['jquery', 'underscore', 'backbone', 'collections/city_buildings', 'model
},
// Keep popup in map view after showing more details
adjustPopup: function adjustPopup(layer) {
console.log('adjustPopup');
var container = $(layer._container);
var latlng = layer.getLatLng();
var pt = this.leafletMap.latLngToContainerPoint(latlng);
Expand All @@ -338,7 +340,6 @@ define(['jquery', 'underscore', 'backbone', 'collections/city_buildings', 'model
}
},
onClearMapPopupTrigger: function onClearMapPopupTrigger() {
console.log('onClearMapPopupTrigger...');
this.onClearPopups();
},
onClearPopups: function onClearPopups() {
Expand Down Expand Up @@ -428,6 +429,7 @@ define(['jquery', 'underscore', 'backbone', 'collections/city_buildings', 'model
building: buildingId
};
var selectedBuildings = this.makeSelectedBuildingsState(buildingId);
console.log(selectedBuildings);
if (selectedBuildings) {
state.selected_buildings = selectedBuildings;
}
Expand Down Expand Up @@ -490,8 +492,11 @@ define(['jquery', 'underscore', 'backbone', 'collections/city_buildings', 'model
var thresholds = cityLayer.thresholds ? state.get('layer_thresholds') : null;
var calculator = new BuildingColorBucketCalculator(buildings, fieldName, buckets, colorStops, cssFillType, thresholds);
var stylesheet = new CartoStyleSheet(buildings.tableName, calculator, layerMode);
// console.log(calculator);
// console.log(stylesheet);
var sql = layerMode === 'dots' ? buildings.toSql(year, state.get('categories'), state.get('filters')) : this.footprintGenerateSql.sql(buildings.toSqlComponents(year, state.get('categories'), state.get('filters'), 'b.'));
var cartocss = stylesheet.toCartoCSS();
// console.log(cartocss);
var interactivity = this.state.get('city').get('property_id');
return {
sql: sql,
Expand All @@ -507,6 +512,8 @@ define(['jquery', 'underscore', 'backbone', 'collections/city_buildings', 'model

// skip if we are loading `cartoLayer`
if (this.cartoLoading) return;
console.log('user_name: ', this.allBuildings.cartoDbUser);
console.log('sublayers: ', this.toCartoSublayer());
this.cartoLoading = true;
cartodb.createLayer(this.leafletMap, {
user_name: this.allBuildings.cartoDbUser,
Expand Down
Loading

0 comments on commit 345dd79

Please sign in to comment.