· 3 min read

Data Visualization — Taiwan Sexual Assault Statistics

# Frontend
This article was auto-translated from Chinese. Some nuances may be lost in translation.

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.

Screenshot 2020-11-23 23.20.38

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.

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.