There are many libraries and apps that can help with displaying your data, but what would be the fun in that?
ZSONS tries to sheet light on how data can be presented via Javascript, through SVG’s. The project has spanned from Fall 2023 to Spring 2024.
During development there wasn’t as much information available about the topic - therefor maybe ZSONS can help others out there with making their own visual data project!
Development
The 5 graph types was made first, starting with Yarn. During this stage the code was rework midway through, to have better and easier to read code.
Branding
Before the design of the webpage, time was spent on figuring out the logo. Afterwards the focus was set on making art visuals to help present the graphs.
Web design
The web design was the last thing to be made after Stage 1 & 2 was completed. The objective was to make a modern design with some edge, with help from the art made during Stage 2.
all kinds of visual material.
custom art was made to bring life to zsons!
The
Typography
Picking the right font can most of the time be very hard - since it will have a big impact on the visual expression of the website.
The font ZSONS needed had to be modern and after some trial & error, it was decided to go with a sans-serif font.
Geist
Geist mono
Luckily at the time of the web design stage, Vercel & Basement studio released their colabroative fonts, Geist.
So of cause the fonts was going to be used on ZSONS.
-
The learnings
-
Make a plan, before during anything!
-
Decide what general things the graphs should be able to do - afterwards make a overview list.
-
Before coding the graphs - layout the design/specs for each graph.
-
Designing the data structure.
-
Research other graphs beforehand - then research the technical limitations/posibilites.
-
Have examples of what types of data, should be displayed via the graphs.