{"id":22316350,"url":"https://github.com/brooks-code/silver-broccoli","last_synced_at":"2026-05-04T03:35:41.354Z","repository":{"id":266140065,"uuid":"897489076","full_name":"brooks-code/silver-broccoli","owner":"brooks-code","description":"ATMO-viz submission for the DGE 2024 Challenge","archived":false,"fork":false,"pushed_at":"2025-03-03T00:05:58.000Z","size":5671,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-03T01:18:48.303Z","etag":null,"topics":["data-processing","data-science","data-visualization","dataviz","leaflet","machine-learning","open-data","openstreetmap","state-machine"],"latest_commit_sha":null,"homepage":"https://brooks-code.github.io/silver-broccoli/test.html","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"cc0-1.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/brooks-code.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-12-02T18:07:24.000Z","updated_at":"2025-03-03T00:07:55.000Z","dependencies_parsed_at":"2024-12-02T20:19:41.381Z","dependency_job_id":"b69a0c26-91d4-4545-9280-7d584330726f","html_url":"https://github.com/brooks-code/silver-broccoli","commit_stats":null,"previous_names":["brooks-code/silver-broccoli"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brooks-code%2Fsilver-broccoli","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brooks-code%2Fsilver-broccoli/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brooks-code%2Fsilver-broccoli/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brooks-code%2Fsilver-broccoli/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/brooks-code","download_url":"https://codeload.github.com/brooks-code/silver-broccoli/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245581543,"owners_count":20638996,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["data-processing","data-science","data-visualization","dataviz","leaflet","machine-learning","open-data","openstreetmap","state-machine"],"created_at":"2024-12-03T23:06:08.149Z","updated_at":"2026-05-04T03:35:41.328Z","avatar_url":"https://github.com/brooks-code.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ATMO-Viz\n\n**Navigate the Narrative**\n\n![Banner Image](/img/boston_bay.jpg \"A banner image depicting an ancient map of the Boston Bay.\")\n*Carte particulière du havre de Boston par Chabert, Des Barres, Sartine, Petit [Paris, 1780] G3762.B65 1780 .C5*\n\nThe project is a JS data visualization application built using Leaflet.js and jQuery. It displays a map with various visualization states, each representing different aspects of the data.\n\n\u003eThis is a contribution to the **DGE Data Visualization Challenge 2024** organized by the [Data Grand Est](https://www.datagrandest.fr/portail/en) community with data provided by [ATMO Grand-Est](https://www.atmo-grandest.eu/).\n\n### Inspiration\n\nThe application is inspired by interactive visualizations seen in various investigations published by some newspapers data-journalism desks (Washington Post, The Guardian, Le Monde..). The main goal is to provide a narrative-friendly experience allowing users to navigate through different visualization states, each showcasing particular aspects of the data with the possibility to explore some of the data more in detail.\n\n## Table of Content\n\n\u003cdetails\u003e\n\u003csummary\u003e Contents - click to expand\u003c/summary\u003e\n\n- [ATMO-Viz](#atmo-viz)\n    - [Inspiration](#inspiration)\n  - [Table of Content](#table-of-content)\n  - [Demo](#demo)\n  - [Features](#features)\n  - [Requirements](#requirements)\n  - [Installation](#installation)\n  - [Configuration](#configuration)\n  - [Main Methods](#main-methods)\n  - [Usage](#usage)\n  - [Limitations](#limitations)\n  - [Troubleshooting](#troubleshooting)\n  - [Data-Curious?](#data-curious)\n  - [Further learning](#further-learning)\n  - [Contributing](#contributing)\n  - [License](#license)\n  - [Acknowledgments](#acknowledgments)\n      - [Design](#design)\n\n\u003c/details\u003e\n\n## Demo\n\nThe live demo is available [here](https://brooks-code.github.io/silver-broccoli/test.html)!\n\n## Features\n\n- Loads GeoJSON data and displays it on a map.\n- Allows users to navigate through the different visualization states using buttons.\n- Provides different visualization states, such as:\n  - Initial state.\n  - Transitional states with animations.\n  - Presentation states with text boxes.\n  - Detailed states with interactive menus.\n- Displays customizable tooltips with additional information about the GeoJSON features.\n- Provides various styling options for the GeoJSON data, including color-coding based on different properties.\n- Population dots (with customizable dot sizes and colors) can be added to the map to visualize the population distribution.\n\n![Image](/img/demo.gif \"An animated image depicting different states of the map.\")\n\n\u003cdetails\u003e\n\u003csummary\u003e Click to expand - Details about the current visualization states \u003c/summary\u003e\n\n    - Initial state: basic map view with administrative boundaries (county-level).\n    - Zone state: display of geographical areas (urban, rural and rural–urban fringe).\n    - Population state: population distribution.\n    - Consumption state: energy consumption overview.\n    - Consumption detail: total and per capita consumption overviews.\n    - Ratio ENR: Renewable energy ratios.\n    - Production state: energy production overview.\n    - Production detail: source-wise production.\n    - Final state: combined area, population, renewables, consumption and production views.\n\n\u003c/details\u003e\n\n## Requirements\n\nA modern web browser (with JavaScript enabled). That's all really.\n\n- Dependencies:\n  - jQuery\n  - Leaflet.js\n  - JSON configuration file\n\n## Installation\n\nIf you are a Visual Studio Code user, you can easily test the app *locally*:\n\n1. Clone or download this repository.\n2. Modify the `test.html` file:\n\n- Point to your **local CSS**:\n  \n```html\n    \u003cstyle\u003e\n      @import url(\"https://fonts.cdnfonts.com/css/raleway-5\");\n    \u003c/style\u003e\n    \u003c!-- Modify the line below --\u003e \n    \u003clink rel=\"stylesheet\" href=/path/to/your/mycss.css\" /\u003e\n```\n\n- and point to your **local JS script**:\n\n```html\n    \u003cscript src=\"https://code.jquery.com/jquery-3.6.0.min.js\"\u003e\u003c/script\u003e\n    \u003cscript\n      src=\"https://unpkg.com/leaflet@1.7.1/dist/leaflet.js\"\n      integrity=\"sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==\"\n      crossorigin=\"anonymous\"\n      referrerpolicy=\"no-referrer\"\n    \u003e\u003c/script\u003e\n    \u003c!-- Modify the line below --\u003e \n    \u003cscript src=\"/path/to/your/atmoviz.js\"\u003e\u003c/script\u003e\n```\n\n3. Modify the `config.json` file:\n\n```json\n{\n  \"FILE\": {\n    \"comments\": \"Modify the line below\"\n    \"path\": \"/path/to/your/geojson_file.geojson\"\n  },\n  \"MAP_INITIAL\": {\n```\n\n4. Install the (free) [Live Server extension](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)\n5. ***In VSCode***:\n   - Either right-click on the html file and select Open With Live Server.\n   - Or click \"go live\" in the VSCode footer menu (bottom right). Then select the `test.html` file in the page that automatically appeared in your browser.\n6. The app should be available under this link:\n    \u003e http://127.0.0.1:5500/test.html\n\n## Configuration\n\nThe application uses a configuration file (config.json) to store settings and data paths. You can modify this file to customize the application's behavior and appearance.\n\nThe `config.json` file should include:\n\n\u003cdetails\u003e\n\u003csummary\u003e Click to expand - Structure of the configuration file: \u003c/summary\u003e\n\n```json\n{\n  \"FILE\": {\n    \"path\": \"/path/to/your/file.geojson\"\n  },\n  \"MAP_INITIAL\": {\n    \"center\": [latitude, longitude],\n    \"zoom\": zoomLevel,\n    \"zoomControl\": boolean\n  },\n  \"TILE_LAYER\": {\n    \"url\": \"https://{s}.tile.your-map-provider.org/{z}/{x}/{y}.png\",\n    \"options\": {\n      \"attribution\": \"Your map attribution\",\n      \"subdomains\": [\"a\", \"b\", \"c\"],\n      \"opacity\": opacityValue\n    }\n  },\n  \"COLORS\": {\n    \"ZONE\": {\n      \"zone1\": \"#color1\",\n      \"zone2\": \"#color2\",\n      ...\n    },\n    \"CONSUMPTION\": {\n      \"LOW\": \"#color1\",\n      \"MEDIUM\": \"#color2\",\n      \"HIGH\": \"#color3\"\n    },\n    \"PRODUCTION\": {\n      \"NONE\": \"#color1\",\n      \"LOW\": \"#color2\",\n      \"MEDIUM\": \"#color3\",\n      \"HIGH\": \"#color4\"\n    },\n    \"RATIO_ENR\": {\n      \"VERY_LOW\": \"#color1\",\n      \"LOW\": \"#color2\",\n      \"MEDIUM\": \"#color3\",\n      \"HIGH\": \"#color4\",\n      \"VERY_HIGH\": \"#color5\"\n    },\n    \"DEFAULT\": \"#defaultColor\"\n  },\n  \"OPACITY\": {\n    \"FILL_OPACITY\": opacityValue,\n    \"DEFAULT\": opacityValue,\n    \"LOWER\": opacityValue\n  },\n  \"THRESHOLDS\": {\n    \"CONSUMPTION\": {\n      \"CONSO\": [value1, value2],\n      \"CAPITA\": [value1, value2]\n    },\n    \"PRODUCTION\": {\n      \"BIO\": [value1, value2, value3],\n      \"EOLIEN\": [value1, value2, value3],\n      ...\n    },\n    \"RATIO_ENR\": [value1, value2, value3, value4]\n  },\n  \"SELECTORS\": {\n    \"TEXTS\": [\n      \"#text1\",\n      \"#text2\",\n      ...\n    ],\n    \"MAP\": \"#mapId\",\n    \"BUTTONS\": {\n      \"NEXT\": \"#nextButton\",\n      \"PREV\": \"#prevButton\"\n    }\n  }\n}\n\n```\n\nReplace the placeholder values with your actual data and settings or use the preconfigured file available in the repository.\n\u003c/details\u003e\n\n## Main Methods\n\n    initialize(): sets up the visualization.\n    setupLayers(): configures map layers.\n    bindEvents(): sets up event handlers.\n    updateVisualization(): State machine for state transitions management.\n    generateStyle(): creates visualization styles.\n    generateTooltip(): creates tooltips.\n\n    \u0026 various utility methods for handling specific visualization aspects.\n\n## Usage\n\nNavigate through visualization states using the next (▶) and previous (◀) buttons. Explore the map by hovering over areas of interest to access detailed information. When available, utilize the radio buttons to toggle between various data visualizations and gain a deeper understanding of the presented data.\n\n## Limitations\n\nDespite being responsive, this app is not meant to be viewed on mobile terminals, it is best experienced on bigger screens.\n\nLimited customization: The app's visualization and styling options are hardcoded in the configuration file, which may limit the ability to customize the app for different use cases or user preferences. A python script might eventually tackle this issue by populating the configuration file in an automated way.\n\n## Troubleshooting\n\nIf you only see the bottom navigation bar and the map is not appearing:\n\n- Check your internet connection (the app relies on external libraries such as Leaflet, jQuery and services like OSM).\n- Check if javascript is enabled in your browser's settings.\n- If you are serving the app locally, check your html and configuration files and see if they point to the right files (see [installation](#installation)).\n\n## Data-Curious?\n\nThis app wouldn't be without some data processing. You can find more information about the process in the processing folder's [readme](/processing/README.md). The documentation outlines the steps involved in exploring and transforming the provided data to bring you this interactive storytelling experience.\n\n## Further learning\n\nThis project inspired a tutorial about state machines: it is available [here](https://dev.to/atomictangerline/the-curious-case-of-the-visualization-state-machine-b8p).\n\nChallenge: I've put quit a lot of energy to implement the good practices I'm aware of, and this makes me even more eager to learn and improve.\n\nI'm pretty sure a lot can be optimized, so I've had this idea where you can step in. Let's call it the ReFacto Challenge: feel free to improve the app's performance, scalability, and maintainability. Tackle the ReFacto challenge and share your optimizations. *More about it soon*.\n\n## Contributing\n\nContributions are **welcome**. You can follow the usual steps:\n\n    Fork the repository\n    Create a feature branch\n    Commit your changes\n    Push to the branch\n    Create a Pull Request\n\n## License\n\nThe source code is provided under a Creative Commons CC0 license. See the [LICENSE]([link](https://brooks-code.github.io/silver-broccoli/LICENSE)) file for details.\n\nThe source dataset is provided for **a reproductibility purpose only**. That dataset remains the property of [ATMO Grand-Est](https://www.atmo-grandest.eu/), if you plan on using it for other purposes, please check with them.\n\n## Acknowledgments\n\nThis project uses the following:\n\n    Leaflet.js: A JavaScript library for interactive maps.\n    GeoJSON: A format for encoding geospatial data in JSON.\n    OpenStreetMap: Map tiles are provided by the OpenStreetMap project.\n    jQuery: A JavaScript library for DOM manipulation and event handling.\n    \n    \n\n#### Design\n\n- Font used: [Raleway](https://fonts.cdnfonts.com/css/raleway-5).\n- Colors gradients are inspired by the [color brewer's](https://colorbrewer2.org/).\n- CSS radio buttons are adapted from Alvves's Neumorphic buttons.\n\n----------------\n\nThe author express his gratitude to the data provider ATMO Grand-Est and the Data Grand-Est team for the organization of the DGE Challenge 2024.\nThis was an amazing opportunity to learn and brush up a lot of dev and data skills :)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrooks-code%2Fsilver-broccoli","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrooks-code%2Fsilver-broccoli","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrooks-code%2Fsilver-broccoli/lists"}