This time I wanted to implement this topic because I saw the news and the data was relatively complete. I thought it would be a good opportunity to promote Svelte itself, so I started brainstorming and implementing it. The finished product is available here

Data visualization has always been one of the areas I wanted to study well, not just creating flashy charts. I hope to improve my storytelling skills through data visualization, and data visualization happens to be a good material for practice.

I have done some projects before, but I always felt rushed and didn't pay attention to the details. I decided to organize the commonly used components properly from this time onwards.

• Labor Diary written in 2017
• Year In Review written in 2017
• Fukuoka COVID-19 Infection Status written in April 2020: The charts are now messed up. I didn't expect the pandemic to last that long.

Data Preparation

Most of the data comes from the Ministry of Health and Welfare, and the data is quite detailed. However, the data is mainly in Excel format, so it took some time to convert it into a more manageable format.

Implementation

Technically, I used Svelte and d3 for development. I hope to gradually implement a set of chart components that I find convenient to use. Currently, I am still observing the usage scenarios, so the components are written in a more rigid manner. I should be able to improve them gradually in the future.

Elements to consider when creating a basic line chart:

• x, y axis, and ticks
• x and y scale settings
• Styling for lines and grids
• Chart title and units
• Text settings
• Transition
• Tooltip: behavior when hovering over the chart

As for d3, I only used d3-scale here, and I didn't use d3's pattern like:

d3.select('svg')
	.enter()
	.data(data)
	.append()
	...

Mainly because I wanted to handle all these operations in Svelte. However, when it comes to transitions and enter/exit patterns, it becomes a bit challenging because d3 can handle them directly with its API, but in Svelte, it requires additional processing. I'll see how to adjust this part for the better. This time, I also used the newer Snowpack, which made development quite smooth. I recommend it to everyone.

For the backend, I used Kotlin as the API server. It was mainly because I found it comfortable to work with for the first time. Additionally, in the future, I may want to schedule tasks or perform multi-threading, and Kotlin makes it more convenient. I deployed the server directly to App Engine, which is quite convenient with Gradle.

Reflection

I completed the main part in about two days, and the rest was spent on refining the details and interactions. There weren't many interactions this time, mainly focused on how to present the information in the best way. This time, the focus was on displaying the data, but for future projects, I want to provide more possibilities and interactions. Another aspect is how to tell stories through interactions.