Data Visualization — Taiwan Sexual Assault Statistics Record

I decided to work on this project after seeing related news and noticing the data was relatively complete. Thinking it was also a great opportunity to promote Svelte, I designed and built it along the way. You can check out the final project here.

Data visualization has always been a field I wanted to dive into deeply. It’s not just about creating flashy charts; I want to hone my storytelling skills through it, and data visualization happens to be an excellent medium for practice.

I’ve worked on a few projects on and off before, but they always felt a bit rushed without enough time to polish the details. Starting from this project, I decided to properly organize frequently used components.

• Major Labor Events built in 2017
• Year In Review built in 2017
• Fukuoka COVID-19 Infection Status built in April 2020: The layout of the charts is completely broken now—I never anticipated the pandemic would last this long back then.

Data Preparation

Most of the data comes from the Ministry of Health and Welfare, and it’s quite detailed. However, the data was mostly provided in Excel format, so converting it into a more manageable data format took a fair amount of time.

Implementation

On the tech side, I used Svelte and d3 for development. My goal is to gradually build a set of chart components that fit my own workflow. I’m still exploring different use cases, so the components are currently hardcoded to some extent, but they can be improved over time.

Elements to consider even for a simple line chart:

• x, y axis and ticks
• x and y scale configuration
• Styling for vertical and horizontal lines
• Chart title and units
• Text settings
• Transitions
• Tooltips: interactions when hovering over the line chart

As for d3, I only used d3-scale here. I didn’t use d3’s typical patterns like:

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

The main reason is that I wanted to delegate all these DOM manipulations to Svelte. However, this felt somewhat restrictive when implementing transitions and enter/exit patterns; with d3, you can handle them directly via its API, whereas in Svelte, you need to handle them separately. I’ll have to see how to fine-tune this approach going forward. I also used the relatively new Snowpack this time, and the development experience was genuinely smooth—highly recommended.

For the backend, I used Kotlin as the API Server. The main reason was that I really enjoyed writing it for the first time, plus I might want to handle scheduled tasks or multithreading in the future, where using Kotlin directly would be much more convenient. The server was deployed directly to App Engine; paired with Gradle, the workflow was pretty seamless.

Reflections

It took about two days to implement the core features, and the rest of the time was spent polishing details and interactions. To be honest, there isn’t much interaction this time around; the primary focus was figuring out the best way to present the information. This project focused mainly on simply displaying data. For future projects, I want to explore more possibilities and interactions, as well as how to tell compelling stories through interactivity.