An interactive Vue.js application visualizing the 2024 internal election results across Montevideo, Uruguay. Using official Electoral Court data, it offers a neighborhood-level map of voting patterns. Features include color-coded districts, filtering by political lists, and interactive elements for analyzing local political trends in Uruguay's capital city.
- Interactive map of Montevideo neighborhoods
- Color-coded visualization of voting patterns
- Ability to filter results by political lists, parties and presidentialcandidates
- Detailed tooltips showing vote counts per list or candidate and total votes
- Responsive design for various screen sizes
- Option to view results as absolute votes or percentages
- Vue.js 3
- Vite
- Leaflet.js for map rendering
- Papa Parse for CSV parsing
- TypeScript for type safety
- Pandas for data cleaning and preparation
- The data was cleaned and prepared in the following repository: https://github.com/juanpintoselso33/ds-montevideo-internas
- Node.js (version 14 or later recommended)
- npm or yarn
-
Clone the repository:
git clone https://github.com/juanpintoselso33/montevideo-map.git cd montevideo-map
-
Install dependencies:
npm install
-
Run the development server:
npm run dev
-
Open your browser and visit
http://localhost:5173
To create a production build:
npm run build
The built files will be in the dist
directory.
- Electoral data: Provided by the Electoral Court of Uruguay
- Geographical data: Provided by the Intendancy of Montevideo
Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License.
This project can be deployed to any static site hosting service. Some popular options include:
- GitHub Pages
- Netlify
- Vercel
- AWS S3
Follow the hosting provider's instructions for deploying a Vue.js application built with Vite.
montevideo-election-map/
├── public/
│ ├── montevideo_map.json
│ ├── v_sig_barrios.json
│ ├── montevideo_odd_dataset_con_zona.csv
│ ├── montevideo_odn_dataset_sin_zona.csv
│ └── partidos_abrev.json
├── src/
│ ├── components/
│ │ ├── ListSelector.vue
│ │ └── MontevideoMap.vue
│ ├── App.vue
│ ├── main.js
│ └── style.css
├── index.html
├── package.json
├── vite.config.js
├── tsconfig.json
└── README.md
- Upon opening the application, you'll see a map of Montevideo divided into neighborhoods.
- Use the list selector on the left to choose specific political lists or parties.
- The map will update to show the voting results for your selection.
- Click on a neighborhood to see detailed voting information in the tooltip.
- On mobile devices, use the bottom drawer to access the list selector and detailed information.
The application is optimized for performance, but loading times may vary depending on the user's internet connection and device capabilities. The map data is loaded asynchronously to improve initial load times.
If you encounter any bugs or have suggestions for improvements, please open an issue on the GitHub repository.
Special thanks to the Electoral Court of Uruguay and the Intendancy of Montevideo for providing the data used in this project.