The first interest in this project came from the fact that I often look up historic cars and their designers. I often have difficulty understanding the context of a single car or period in the career of a designer. I wanted to create Car Design History to give this context.
Initially, I had the idea to focus on the different designers. I had this picture in my head of a timeline with time on the x-axis and design studios on the y-axis. In theory, it would give a great insight into how the career of a designer developed, where they worked and what they did at each studio.
I started by creating a very basic prototype in Figma to explore if my idea had the desired outcome. In the first version, I placed time on the x-axis and the designers on the y-axis. Each bar signifies employment at a company and by clicking on a bar you would see the work of the designer at that studio.
When first playing with this limited prototype, I was positive that it would have the desired outcome. But to get a final judgment, I wanted to add some real data. And that is when I ran into the limitations of this visualization. In theory, this idea works well, but in practice, the career tracks of these designers are complex and non-linear. Immediately, I ran into some questions like how to deal with freelance work and consultancy jobs? I struggled to come up with a good answer on how to visualize this. And if I struggle to get good results, the visitors of the website will definitely struggle too. I, therefore, decided to change the focus to the two variables that were much clearer defined: time and cars. Instead of plotting the designers, I changed to car models. At this point, I started looking for possible ways to develop this. I am a designer and not a developer by profession so my software development skills are a design limitation. While browsing the documentation of D3 I came across the swarm plot and a couple of examples of websites that applied it very well. To start with the swarm plot, I created a small data set of a couple of cars. For each car I logged the following:
Image (from Wikipedia commons)
Youtube video (if available)
After plotting a couple of cars, I started refining the design. First, I added colored borders to each node in the graph that signifies the design studio.
Next, worked on ways to reduce the visual overload by using grayscale images and playing with the design studio colors.
A lot of thinking went into the color scheme. Finding a color scheme that is accessible, works well with the images, looks great, and has seven distinct colors is difficult. I spent a lot of time with coolors.io to come to this final one:
Last, I iterated on the information card design as you can see below.
With the main design in place, I spent many hours creating the final dataset of over 700 cars. This resulted in serious performance issues which lead me to use Cloudinary to host the images. Compared to my previous method, TinyPNG, it resulted in at least a 60% file size reduction.
You can see the final result below:
One of the main challenges was to get the filters to work. There are a lot of differences between browsers and also D3 has some limitations.
Below is a video of how it works today.
On launch, I shared my website on Hackernews and on Reddit. On both platforms, it managed to attract a big audience leading to more than 50,000 unique visitors. Today, 6 months after the first release, it has received 70,000 unique visitors.