I downloaded the population datasets and the fertility rate datasets for each province in Korea from KOSIS(https://kosis.kr/).

1. data.csv in https://afcoo.github.io/infovis_web/assets/assets/data.csv

   Fertility rate data for each province in Korea from 2000 to 2021

   Downloaded from 시군구/합계출산율, 모의 연령별 출산율 in KOSIS

2. data2.csv in https://afcoo.github.io/infovis_web/assets/assets/data2.csv

   Population data for each province in Korea from 2000 to 2021

   Downloaded from 행정구역(시군구)별, 성별 인구수 in KOSIS

All the datasets are re-encoded to UTF8 for compatibility in web.

We focused on providing an interactive tool to see how fertility rates have changed by year and province. Here are screenshots of the final version of this tool.

This tool can be tested on https://afcoo.github.io/infovis_web/#/

I made 3 different views, and these can be changed by dropdown on top.

Also, you can filter specific province. Click filter button on the left of bottom, and then use checkboxes for filtering provinces.

In Bar Chart, the height of the bars represents the fertility rate for each province in a specific year. You can change the year by moving the slider above the chart, and observe the change in fertility rates for each province while moving the slider.

You can sort the bar chart in ascending or descending order by checking the checkboxes on the right. This is useful to see which cities have the highest fertility rates by year.

When you hover your mouse over the bar, a tooltip appears with the province name and the detailed number of fertility rate. This allows you to see the details of the data in the bar chart.

This line chart is useful for observing changes in fertility rates over time.

By default, the national average fertility rate is displayed, but you can select multiple provinces using the filter function mentioned above to display the graph at once.

As with bar charts, a tooltip with details is displayed when you hover your mouse over the chart. The name of the province and year are displayed, and in graphs with multiple provinces, the details are displayed simultaneously. This works great for observing changes in fertility rates across provinces.

You can manipulate the range of years on the x-axis and the range on the y-axis by manipulating the sliders. This makes it easier to see the subtle changes in the graph by scaling down the domain appropriately.

The pie chart shows the fertility rate through the diameter and the population rate through the proportion of the circle. The larger the diameter, the higher the fertility rate, and the larger the proportion of the circle, the higher the proportion of the population in South Korea.

Like the bar chart and line chart, it displays data by year, and you can change the year by manipulating the slider at the top.

In the same way as a bar chart, you can sort the displayed data through the checkboxes on the left. It supports ascending and descending sorting, and you can also sort chart by fertility rate and population, respectively.

When you hover the mouse over a bin in the pie chart, it highlights it. This makes it easy to see the fertility rate of a particular province in the text and the ratio of that province to the whole chart.

By clicking on the gray labels with province’s name, you can highlight a specific province’s part. This highlighting remains during changing year and during applying sort, and can be useful for seeing changes in data for particular provinces.

For developing this tool, Flutter and fl_chart are used. Flutter is powerful tool for making multi-platform application, and also support web deploy. This tool is built with Flutter 3.10.5 and dart 3.0.5, and tested on chromium-based web browser(Google Chrome and Microsoft Edge). This tool can be built for Windows or MacOS. but I haven’t tested yet.

All source codes are uploaded on https://github.com/Afcoo/flutter_graph_infovis, and web deploy version is uploaded on https://github.com/Afcoo/infovis_web.

You can test web demo on https://afcoo.github.io/infovis_web/#/