On my site RC Donkey we compare radio controlled cars 💥 One of the many specs we compare is the dimensions of the cars, so people for example can compare car lengths, heights, etc.
These dimensions are of course numbers, for example one car might have a length of "320 mm" while another car might have a length of "360 mm". Comparing numbers like that is difficult for us humans, so we decided to make diagrams that let people compare the dimensions in a better way.
Tech choices
At first we thought about generating the diagrams as images through PHP (RC Donkey is based on a modified Wordpress installation, so PHP is used heavily on the site). Considering we have hundreds of cars in our database and people can compare them in any way they want, it quickly became clear that we would end up with way too many images. The image generating idea was therefore dropped.
Luckily image generation wasn't the only option available. Another option was to generate the diagrams through Javascript.
Writing custom JS code for generating diagrams can quickly become a bit complicated, but luckily there are several diagramming libraries available. We ended up using paper.js and it turned out to be a great choice. It's easy to use and works really well for generating the diagrams we need.
Let's take a look at how we generate the diagram above that compares the dimensions of two cars seen from above (the two cars shown is the Traxxas HOSS and the Traxxas Maxx).
Building the diagram
All the car specs are in a database, so we start out by generating a JSON object containing the dimensions of the cars. The JSON object also contains various data like the names of the cars, so we can also add a legend to the diagram etc.
We then call a JS function that parses the JSON and builds the diagram. This function first check that the JSON is valid, for example that it actually contains some car dimensions. The function then setup the canvas that we will use to contain the diagram.
We have set the diagram to have a certain max. width depending on the device. So for desktop the max. width is 700px while it is max. 400px for mobile devices. The function therefore starts with determining the max. length of the cars. The max. length is compared with the diagram width. If the max. width is bigger, we set a multiplier to a number < 0 to make sure no car ends up being bigger than the diagram. If the max. width is smaller, the multiplier is set to a number > 0 to make the biggest car match the width of the diagram.
After the multiplier has been set, the function loops through the cars in the JSON and converts the dimensions into rectangles. This is quite simple to do with paper.js:
Notice how the multiplier is used to make sure the dimensions are modified to match the width of the diagram.
In the same loop, we also generate each car's part of the legend. Again something that is quite simple to do with paper.js. After all, the legend is just about generating some text:
The scale
Finally, we use paper.js to generate the scale to the right side of the diagram. To make the scale have the right intervals, we use the max. width of the cars. The highest point on the scale simply matches the max. width of the cars since the diagram shows the cars seen from above. If the cars were seen from the side, the highest point on the scale should simply match the max. height of the cars instead.
Diagram done
So that's it. The diagram is now done and people can check it out when they visit our site. You can check it out here, together with some other diagrams for the same car comparison.