berlin / haushaltsdaten Goto Github PK
View Code? Open in Web Editor NEWData visualization of Berlin's public expenditures
Home Page: https://haushaltsdaten.odis-berlin.de
License: MIT License
Data visualization of Berlin's public expenditures
Home Page: https://haushaltsdaten.odis-berlin.de
License: MIT License
On mobile the filters are taking a considerable portion of the screen, thus leaving less space for the visualisation itself. We might want to find another solution here, such as having a button with a filter icon that, when clicked, opens a menu with selects and switches.
Inspired by the Moneten Kieker: https://www.schleswig-holstein.de/DE/fachinhalte/S/steuern/monetenkieker.html
We want all Einzeltitel
belonging to a certain group (Hauptfunktion
, Oberfunktion
, Funktion
) to be displayed in the list. For the MVP this can limited to the first 100 items.
Ideally, the table also holds information about the different group levels.
This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.
These problems occurred while renovating this repository. View logs.
These updates are currently rate-limited. Click on a checkbox below to force their creation now.
These updates have all been created already. Click a checkbox below to force a retry/rebase of any.
@storybook/addon-actions
, @storybook/addon-essentials
, @storybook/addon-links
, @storybook/react
, @tailwindcss/typography
, @testing-library/jest-dom
, @testing-library/user-event
, @types/d3
, @types/node
, @types/react
, @types/react-dom
, @types/react-type-animation
, autoprefixer
, commitizen
, eslint-config-next
, eslint-config-prettier
, eslint-plugin-import
, eslint-plugin-jsx-a11y
, eslint-plugin-react
, eslint-plugin-react-hooks
, prettier
, tailwindcss
, typescript
)@headlessui/react
, @mdx-js/loader
, @next/mdx
, @supabase/supabase-js
, classnames
, d3
, just-snake-case
, maplibre-gl
, use-debounce
)@storybook/addon-actions
, @storybook/addon-essentials
, @storybook/addon-links
, @storybook/react
, @testing-library/jest-dom
, @testing-library/react
, @types/jest
, @types/react
, @types/react-dom
, @typescript-eslint/eslint-plugin
, @typescript-eslint/parser
, babel-jest
, babel-loader
, eslint
, eslint-config-next
, eslint-config-prettier
, eslint-import-resolver-typescript
, eslint-plugin-prettier
, husky
, jest
, jest-watch-typeahead
, lint-staged
, prettier
, storybook-addon-next-router
, tsconfig-paths-webpack-plugin
, typescript
)react
, react-dom
).github/workflows/build.yml
actions/checkout v3
actions/setup-node v3
package.json
@headlessui/react 1.6.6
@mdx-js/loader 2.1.2
@next/mdx 12.2.0
@supabase/supabase-js 1.35.4
classnames 2.3.1
d3 7.6.1
just-snake-case 3.0.1
maplibre-gl 2.1.9
react 17.0.2
react-cool-dimensions 2.0.7
react-dom 17.0.2
react-type-animation ^1.1.3
swr 1.3.0
use-debounce 8.0.1
@storybook/addon-actions 6.5.13
@storybook/addon-essentials 6.5.13
@storybook/addon-links 6.5.13
@storybook/addon-postcss 2.0.0
@storybook/react 6.5.13
@tailwindcss/typography 0.5.8
@testing-library/jest-dom 5.16.5
@testing-library/react 12.1.5
@testing-library/user-event 14.4.3
@types/d3 7.4.0
@types/jest 27.5.2
@types/node 20.10.6
@types/react 17.0.52
@types/react-dom 17.0.18
@types/react-type-animation 1.1.1
@typescript-eslint/eslint-plugin 4.33.0
@typescript-eslint/parser 4.33.0
autoprefixer 10.4.13
babel-jest 27.5.1
babel-loader 8.3.0
commitizen 4.2.5
eslint 7.32.0
eslint-config-next 12.3.3
eslint-config-prettier 8.5.0
eslint-import-resolver-typescript 2.7.1
eslint-plugin-import 2.26.0
eslint-plugin-jsx-a11y 6.6.1
eslint-plugin-prettier 4.2.1
eslint-plugin-react 7.31.11
eslint-plugin-react-hooks 4.6.0
husky 7.0.4
identity-obj-proxy 3.0.0
jest 27.5.1
jest-fetch-mock 3.0.3
jest-watch-typeahead 1.1.0
lint-staged 12.5.0
next 12.3.3
postcss 8.4.19
prettier 2.7.1
storybook-addon-next-router 3.1.1
storybook-css-modules-preset 1.1.1
tailwindcss 3.2.4
tsconfig-paths-webpack-plugin 3.5.2
typescript 4.9.3
.nvmrc
node v20.10.0
Make sure the searched term is easily visually identifiable.
In Chrome auf Android in sehr kleine Devices.
We want a stable link for each filter/treemap combination, so that it can be shared with others. At the moment, we can already share the expense type and district combination. But we also want to be able to share a view that is already zoomed into the treemap. We already have URL params for this (mainTopic
, midTopic
, deepTopic
), but these need to be put to use.
If a prop such as path
(e.g. ['allgemeine_dienste', 'rechtsschutz']
) is provided, we jump to the appropriate depth again by simulating clicks like we did initially.
However, this only ever happens on the first render of the treemap.
We avoid running server-side code again by passing shallow: true
when we update the URL params for the path (on click
within the Treemap
component's D3 code).
But when we share the current link, there is a path present in the URL params, so that the treemap jumps to the correct depth on first render.
When changing district
or showExpenses
, we remove the path-related URL params, so that we always start in the highest depth for a new filter.
So much for the theory, hope this works out.
Currently we only display the data for 2022 (and excluding any IST data as opposed to the SOLL data).
Ideally we include 2023 as well as previous years, so that each year can be viewed. This may require us to think about the way we store the data. Currently we use a PostgreSQL view haushaltsdaten_2022
. Can we just create new views for each year or is there a better way? What is the most friction-less way? What can be automated?
Also check if the code needs refactoring to make it a bit clearer for future work.
In Chrome auf Android small devices
Based on... group?
This only happens navigating up from depth 1 to depth 0. This is probably because the mapTopicDepthToColumn
util doesn't handle a depth of 0
.
More content should be added to the Info Page. The FAQ page contains only a few entries so far. Here a brainstorming and an elaboration of further questions and texts should be done.
JSON is easy
CSV is relatively easy
At first limited to the max rows visible on the page
The treemap could be extended by a function, so that one can select whether the monetary values are to be indicated as total values or as calculated per capita. In the district display, the values would then be calculated on the district population.
The placement of the spinner on the full text search could get some love
In Chrome auf Android on small devices
At least some basic info which API we are using, sorting/relevance of results, etc.
It's open source, let's show it!
A small bar (or something similar) should display the currently selected view and its amount of € and contextualize it with the highest level value of €.
Some parts were done really quick and dirty. Let's try refactoring these a bit so that the code remains understandable in the future and for others.
If there are no results we could run a fuzzy search with the same search term and show these results
Currently, the CI runs all fail because we do not provide the necessary env variables to the GitHub Action.
Add routes and menu. Also merge Lisa's PR with example content.
Should we make our "cleaned" data available as an API endpoint? Is there a value to this?
Duplicate our the Qtrees NextJS setup and prepare it for the project
At the moment we have quite long loading times. As a first step we could add a loading bar like in Stadtpuls.
But ideally we should improve the loading times.
We (some people from Code for Germany) had a discussion about your project and wonder if you could lobby for better input data. Berlin seems to still provide that data as a XLSX file without documentation. So no advancement in direction to more structured, semantic (even linked) OpenData at the moment.
Have you also consider to use a different workflow in the UI? At the moment it's same workflow designed in OffenerHaushalt at 2012?
Had you had a look at things like https://specs.frictionlessdata.io/fiscal-data-package/#introduction and consider this as an interopable format for the data (e.g. as reexport from the app)?
We've got a couple of tests already and we might not need that many since it's a rather simple data visualization. But we might wanna add more tests, especially for gaining confidence when making changes or just updating dependencies.
Key features that we might wanna test:
Perhaps we should consider integration testing over unit testing for these things?
I wonder if we should test anything treemap-itself-related. Or can we rely on D3 testing all our used functionalities?i
At the moment we have title, main group, district, and amount. This leads to (seemingly) duplicates sometimes:
If we would add the columns oberfunktions_bezeichnung
and funktions_bezeichnung
the differences would become clear. However then we have to deal with space issues because we tend to have long values in these columns.
This ticket is for extending the list view so that it can display more than the initial 100 items.
A feature could be added to the treemap to allow a dropdown to select whether the levels shown should be based on the function, on the groups, or on the individual plans.
Some levels are not self-explanatory. We've got some textual information for these that could be displayed next to the treemap.
Example: Maybe the group Allgemeine Dienste is not self-explanatory. In this case we could show 2 - 3 sentences next to the treemap or below it to explain and contextualize the current view.
We want to have a full-text search so that people can search for a field of interest and immediately find the expenses/earnings related with that field.
No exact design idea yet. May require some more thought.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.