Dashboard Layout

2f:T14e4,{ const { heatmapnode } = heatmap_f(); const { worldmapnode, updateDataPoints, updateMapData, tableComponent} = worldmap_f(); const { yearselectionnode } = yearSelection(); const { BarChartparent, updateDataPointsB, updateMapDataB} = landslidebarchart(); const { BarChart1parent, updateDataPointsB1, updateMapDataB1} = fatalitiesbarchart(); const { BarChart2parent, updateDataPointsB2, updateMapDataB2} = injuriesbarchart(); const { InfoTablenode, scrollToEventId} = tabulate(TableData, TableData.columnNames()); // update the bar chart when the selection changes d3.select(heatmapnode).on('input', () => { updateDataPoints(heatmapnode.value); // worldmap updateDataPointsB(heatmapnode.value); // barchart updateDataPointsB1(heatmapnode.value); //barchart1 updateDataPointsB2(heatmapnode.value); // barchart2 }); // Add an event listener to the year selection SVG element d3.select(yearselectionnode).on('input', function() { updateMapData(yearselectionnode.value.minYear, yearselectionnode.value.maxYear); // worldmap updateMapDataB(yearselectionnode.value.minYear, yearselectionnode.value.maxYear); // barchart updateMapDataB1(yearselectionnode.value.minYear, yearselectionnode.value.maxYear); //barchart1 updateMapDataB2(yearselectionnode.value.minYear, yearselectionnode.value.maxYear); // barchart2 }); // let infoTableNode = tableComponent.node; let table = html` Dashboard Layout

Global Landslide Occurrences (1969-2017)

${yearselectionnode}

${worldmapnode}

${heatmapnode}

${BarChartparent}

${BarChart1parent}

${BarChart2parent}

${InfoTablenode}

`; return table; }30:[] 2d:{"title":"Final Landslide Dashboard","cells":[{"id":0,"value":"# Final Landslide Dashboard ","pinned":false,"hidden":false,"mode":"md"},{"id":181,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":264,"value":"## Other Links\n\nDataset 1: https://catalog.data.gov/dataset/global-landslide-catalog-export \n\nDataset 2: https://data.world/nasa/global-landslide-catalog\n\n*API Source (Server-Side Variation):* https://www.bigdatacloud.com/reverse-geocoding/reverse-geocode-to-city-api","pinned":false,"hidden":false,"mode":"md"},{"id":262,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":23,"value":"import {yearSelection} from 'e3cf46c39e449348'","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"import {landslidebarchart, fatalitiesbarchart, injuriesbarchart} from 'fd993f97b3cbb6ad'","pinned":false,"hidden":false,"mode":"ojs"},{"id":151,"value":"import {TableData, tabulate} from 'a9c49c07293e5163'","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"import {worldmap_f} from 'f332e8b34086ad5c'","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"import {heatmap_f} from \"b2c8cbe63432e887\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}