Data Visualization — Taiwan Sexual Assault Statistics

I wanted to implement this topic because I came across some news and the data was relatively complete. I thought it would be a great opportunity to promote Svelte itself, so I started brainstorming and implemented it. You can find the final product here.

Data visualization has always been one of the areas I want to dive deeper into. It’s not just about creating flashy charts; I hope to hone my storytelling skills through it, and data visualization is a fantastic medium for practice.

Previously, I’ve worked on several projects, but they always felt rushed, lacking attention to detail. I’ve decided that moving forward, I’ll focus on organizing the components I use frequently.

• The Labor Day Report I created in 2017
• The Year In Review I wrote in 2017
• The Fukuoka COVID-19 Infection Status I published in April 2020: the charts are now misaligned, as I didn’t foresee the pandemic lasting this long.

Data Organization

Most of the data comes from the Ministry of Health and Welfare, and it’s quite detailed. However, the data is primarily in Excel format, so I spent a considerable amount of time converting it into a more manageable data format.

Implementation

Technically, I used Svelte and d3 for development. I hope to gradually create a set of chart components that I find easy to use. Currently, I’m still observing usage scenarios, so the components are somewhat rigid, but I should be able to improve them over time.

Elements to consider for a standard line chart include:

• x and y axes and ticks
• x and y scale settings
• styles for straight and horizontal lines
• chart title and units
• text settings
• transitions
• tooltips: hover actions over the line chart

With d3, I only used d3-scale here, and I didn’t utilize d3 patterns, such as:

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

The main reason is that I wanted to delegate all these operations to Svelte. However, doing transitions and managing enter/exit patterns has been somewhat cumbersome because while d3 can handle these directly via API calls, Svelte requires a different handling approach. I’ll look into how to adjust this for better performance. I also adopted the newer Snowpack for this project, which made development quite smooth, and I highly recommend it.

On the backend, I used Kotlin as the API server. This was my first time working with it, and I found it quite comfortable. Additionally, I may want to implement scheduling or multi-threading tasks later on, so using Kotlin will be more convenient. The server was deployed directly to App Engine, and using Gradle made it quite easy.

Reflection

I completed the main implementation in about two days, with the rest of the time spent refining details and interactions. To be honest, there wasn’t much interaction this time; I mainly focused on how to present the information effectively. This project primarily displays data, but for future projects, I want to introduce more possibilities and interactions, along with exploring how to tell stories through interaction.