Berliner Haushaltsdaten - Dataviz

This data visualization communicates Berlin's public expenditures. It describes in which fields data is spent (or earned) and which district or area is responsible for the expenditure.

The means of visualization is a so-called treemap which allows comparing different expense areas and zooming into the hierarchies of expenses.

The treemap visualization is embedabble by using the Einbetten option.

In addition, a list below the visualization renders the items which belong to the currently selected expense field (ordered by amount in €).

A homepage and FAQ page provide contextual information.

Attention: This is a prototype, not a finished software.

The data

The data used is available as Open Data in Berlin's official Open Data portal. It is usually published bi-annually and includes the data for the next 2 years.

The data comes as Excel files (.xlsx), which is converted to CSV and then loaded into a PostgreSQL database.

We currently use a PostgreSQL database provided by Supabase. Find information for this setup in the haushaltsdaten-supabase repo.

A note on our usage of Supabase: We are using Supabase because it provides a convenient data access layer. There are certainly alternatives for accessing the data which could be explored in the future.

Tech stack

This website is a NextJS app configured with:

• Typescript
• Linting with ESLint
• Formatting with Prettier
• Linting, typechecking and formatting on by default using husky for commit hooks
• Testing with Jest and react-testing-library

Project structure

Basic Next.js app

Pages

• pages/index.tsx is the homepage.
• pages/visualisierung.tsx is the main route for the visualization. It renders the most important components for the visualization.
• pages/share.tsx is almost identical to pages/visualisierung.tsx. It is used for sharing an SVG-only version of the currently rendered treemap.
• pages/faq.tsx provides some questions and answers.

Components

The most important component is probably the treemap component which can be found in src/components/TreeMap/index.tsx. The component expects hierarchical data (hierarchy prop) to be passed to it (as specified in its type declaration). It then utilizes D3 to render a treemap SVG which can be zoomed into and out.

The treemap can be controlled with the filters defined in src/components/TreeMapControls/index.tsx.

Texts

The texts are currently hard-coded into the pages/components. In the future a more beginner-friendly structure could be applied (such as extracting all text content into a single content provider file).

Getting started

Requirements

Node.js

This project is a Next.js app which requires you to have Node.js installed.

Supabase

As explained in the data section earlier, a Supabase instance is used for storing the data.

If you simply want to continue working on this repository, you can use the already existing Supabase instance.

If you are planning to re-deploy this project, you will need to obtain a Supabase instance yourself, either by using their cloud offering or by self-hosting Supabase.

Installation

Clone the repository to your local machine:

git clone git@github.com:berlin/haushaltsdaten.git

Move into the repository folder:

cd haushaltsdaten

Make sure you use the Node.js version specified in .nvmrc. Find out which Node version you're currently on with:

node --version

If this version differs from the one specified in .nvmrc, please install the required version, either manually, or using a tool such as nvm, which allows switching to the correct version via:

nvm use

With the correct Node version, install the dependencies:

npm install

Because the data is stored in a Supabase database, you will need to provide connection details in your environment. In this repository you can find a file .env.example. Duplicate this file and name it .env.

In .env you must enter the connection details to the Supabase instance as suggested in .env.example. If you do not know how to obtain the necessary details, please ask a repository maintainer for access.

You are now ready to start a local development server on http://localhost:3000 via:

npm run dev

Workflow

New features, fixes, etc. should always be developed on a separate branch:

• In your local repository, checkout the main branch.
• Run git checkout -b <name-of-your-branch> to create a new branch (ideally following Conventional Commits guidelines).
• Make your changes
• Push your changes to the remote: git push -U origin HEAD
• Open a pull request.

You can commit using the npm run cm command to ensure your commits follow our conventions.

Deployment

Berliner Haushaltsdaten - Dataviz is deployed to the cloud with Vercel (Documentation).

Page analytics

We use Matomo for website analytics. Matomo is respectful of the users' privacy, the page visits are tracked anonymously.

In the production environment, a NEXT_PUBLIC_MATOMO_URL and NEXT_PUBLIC_MATOMO_SITE_ID is configured for this purpose.

Contributors

Thanks goes to these wonderful people (emoji key):

Lisa Stubert 📆 🤔 🧑‍🏫 📋 🔣

Max B. Eckert 🤔 📋

Dennis Ostendorf 🎨 💻 📖

Lucas Vogel 🎨 💻 📖

Fabian Morón Zirfas 💻 📖

Simon L. 🤔 🎨 💻

Florian Stanek 🤔 🎨 💻

Julia Zet 🤔 💻 🎨

This project follows the all-contributors specification. Contributions of any kind welcome!

Content Licencing

Texts and content available as CC BY.

Credits

Together with:

A project by:

Supported by:

Special thanks

This project is inspired by the website offenerhaushalt.de of the Open Knowledge Foundation. This was a website that made budget data for cities and municipalities for Germany viewable in a centralized and standardized way. In recent years, the state of Berlin has used Offener Haushalt to visualize its budget data and also present it via embedding on its own Berlin.de website. Since 2021, however, Offener Haushalt can no longer be actively maintained. The reason for this is that in the current funding situation, it is difficult to operate platforms that are oriented towards the common good on a permanent basis, and strategies for adoption on the part of the administration are unfortunately lacking.