In the l8p
Published in

In the l8p

ReactiveConf — In the loop with Shirley Wu

Get to know speakers before meeting them at the conference


Yay! We are getting so close to the conference that I can start feeling the butterflies in my stomach. I just want to be there already! Lol… How are you living the wait? Hope you are as excited as I am. For today’s interview I am really happy to talk to Shirley Wu. She is really fun to hang out with and I had the privilege to meet her recently at ReactNext in Tel Aviv. She will be talking about what she loves most which is data visualisation!

Note: questions and answers have not been transcribed but adapted from notes.

Hi Shirley! Very happy to talk to you again. What can you tell me about yourself?

Hi Gerard! I’m Shirley, a freelance Software Engineer and I concentrate on data visualisations. I primarily work with D3, and a lot of my projects use React. I love building data visualisations that are really interactive and that can be explored in many different ways. To achieve this level of interactivity, React has proven very useful.

I also help organise the Bay Area D3 User Group and the annual D3 unconference in San Francisco, which by the way was super fun! 🎉

data sketches

I am one half of data sketches together with Nadieh Bremer. This was initially a 12 months project where we would pick a topic each month and build a visualisation. For each topic we would gather data, prepare sketches for the overall design and code our way to a whole visualisation. We do a whole write-up of our process and people really liked it, as they get to see the thought process behind each visualisation.

I have a D3 course at Frontend Masters, which is an introduction series on D3. Totally check it out if you are planning to get started in D3.

I’m recently back into K-pop music and last year I was really into the Hamilton musical. I can’t forget to mention I am a huge huge huge fan of Harry Potter, Pixar and Hayao Miyazaki (Ghibli Studios) movies.

Sweet! I dig K-pop. What are you preparing for ReactiveConf?

My talk is on Thursday morning and is about using React and D3 to create interactive data visualisations. This is a retrospective on everything that I have learned in the last few years. It will cover how I use React and D3 together and the best practices I have learnt.

Data visualisations are still pretty niche. I want to show everyone what you can do, so more people get into it and try to push the limits of what’s possible. We are no longer limited to a static medium, but have access to the browser which brings many opportunities to create immersive and powerful interactions. I really want to see how we can push data visualisations forward!

Funny story is that, by chance, I helped find a performance regression bug in Chrome. Somehow a change in a recent Chrome update made one of my visualisations perform really slowly, which made this bug very apparent. So by pushing what we can do in the browser, we can look for ways to make our code more performant and help move the Web forward!

All of these technical challenges make me love writing visualisations. All of these details that I have to think about, that I have to try and solve, are what make me happy and remind me that I am first and foremost a front-end developer.

That’s awesome! Some of these visualisations are just beautiful. What can you tell us about the process you follow?

These are the steps that I’ve found bring the best results:

  • Find a central idea. This is a topic which you are really passionate and curious about. The passion will keep you motivated throughout the project.
  • Find the data. This is where you get your initial data mash up, involving automated scripts or manual data entry. In this step you will also discard any non-related data.
  • Explore your data. In this step you look for extremes, interesting trends, insights, etc; anything that could be the centrepiece of your visualisation. You can use specific questions you have in mind and use them as hypotheses.
  • Design phase. Sketch out ideas and draw down things that are interesting in the data and build your designs around that. By doing the design first instead of coding straight away, you don’t let the technology limit you but work for you.
  • Coding phase. This for me usually involves using lots of D3 and React. It’s especially powerful to learn SVG path commands, as with them you can draw anything you want with code.

Thanks a lot for your insights. It’s really interesting to know about the steps involved. What do you think makes React great to use along with D3?

I’ve always had a framework to help me with the architecture and interactions and D3 to handle the data visualizations, and when I first started out, I used Backbone but as I started building more complex interactions and visual tools, I realised Backbone wasn’t the right tool for the job. Bugs became very difficult to handle and spaghetti events grew out of hand. So I started looking into React and Flux. I really liked the idea of unidirectional data flow where all events go in one direction.

Today I use React mostly because it promotes best practices. The way that it forces me to think about state and components, it’s really a great way of organising and architecting my code. I could do everything with just D3, but by using React it makes my job a lot easier and it forces me to think in a way that follows best practices.

Besides the above, there’s quite a few people that want me to look into Vue at this time. It’s funny because my picture on the ReactiveConf website is right between Evan You and Sarah Drasner, so maybe this is a sign! 😃

Cool! What side projects are you working on or any topics that you are interested in?

I am a big fan of Taylor Swift so I am doing a visualisation on the colours used in her music videos and I’m really excited about her new album coming out! 💖

Work in progress of my Taylor Swift color visualization

I have just finished getting the initial data, so the next step is exploring this data and sketching out ideas and designs. Make sure you follow along as I broadcast live in Twitch the remaining steps!

Taylor Swift music videos visualisation series

Other than that, I want to play more with generative art and Processing. I just bought Nature of Code by Daniel Shiffman, and I am really excited about digging into it. I have also been interested in immersive physical installations. There is something special about physical spaces and things I can touch. I want to see what I can do once I have taken this data out of a 2-dimensional world.

Sounds great! Last question: what talks or topics are you looking forward to at ReactiveConf?

I always enjoy Sarah Drasner talks. I feel like she can talk about anything and it will be interesting, educational and inspiring. There is also a talk about RxJS and Reactive Programming that I am very interested as I want to get better at working with live data. I am also looking forward to Evan You talk as I have heard so many good things about Vue!

So many great topics to keep up! Thanks a lot Shirley. Looking forward to meet you again at ReactiveConf!

Thank you. It was great talking to you. I really want to get everyone up to speed with D3 and React so we can push data visualisations forward!



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store