iiinova — where your digital self keeps evolving

Sebastian Lammers @sebastianlammers.com · 13/01/2024

Prototyping some dataviz stamp designs 📊 and I could do this forever 😻 Do you recognize the well known tool whose design I tried to pay homage to?

240

Sebastian Lammers @sebastianlammers.com · 06/01/2024

I had some fun creating this responsive waffle chart #svelte component. 📊 The clever part is that the blocks are positioned *not* by #d3 scales, but simply by #css flexbox! Since gifs don't work here yet, visit the live chart and play with it yourself: svelte.dev/repl/2e51fd4...

Screenshot of a waffle chart. One half is light themed, the other is dark themed. The upper part show a waffle chart with 100 blocks, of which 5 are highlighted in red. Below is another waffle chart that consists only of 10 blocks, of which 2 are highlighted in red.

172

Sebastian Lammers @sebastianlammers.com · 20/11/2023

The legendary FREE Inter typeface just got a major upgrade! Version 4: - six additional "Display" designs for large delicious type! - added OpenType features - redesigned tabular figures are now "uniwidth"; the same width across all 12 designs! - more... Check out the new website: rsms.me/inter/

Screenshot of the newly designed website for the Inter Typeface. It consists of black letters on white background. The large title reads "The Inter typeface family".

Screenshot from the Inter website showing the new tabular figures that ensures similar width across different Inter fonts. In the image there are 5 rows of numbers and mathematical operators in different font weights and display styles that are all in the same width.

031

Sebastian Lammers @sebastianlammers.com · 13/10/2023

Here are some more little teaser-images. Let me know if you have comments or questions :)

$Screenshot that covers some text and a chart. There is a heading that reads "Finding historic events" and the text underneath reads "Next to considering the Wikipedia Timelines, I also played around with the Archive API of the New York Times, which goes back all the way to 1851! But while that is impressive, it’s just a tiny fraction of what was needed to match the star distances in light years." Then there is a chart. It's a histogram. The title says "NYT Range covers only a fraction of the distances". On the horizontal axis the "Light Years" are shown, ranging from 0 to ~3200. The vertical axis shows "Count of Stars" and ranges from 0 to ~220. The histogram shows the majority of stars somewhere between 0 and 800 Light years with two peaks overshooting 200. However there is a long tail of the distribution that goes all the way across the horizontal axis up to ~3200 Light Years.$ A screenshot that shows four panels or cards, each coloured differently and containing a title with two bullet points inside. They read:
1) Dark Blue: Background color, hsl(238, 80%, 6%)
2) Purple: Accent color, hsl(238, 80%, 66%)
3) Light Medium: Fonts, hsl(238, 80%, 96%)
4) Light Bright: Tooltip Background, hsl(238, 98%, 98%)

A screenshot that shows four panels or cards, each coloured differently and containing a title with two bullet points inside. They read:
1) Dark Blue: Background color, hsl(238, 80%, 6%)
2) Purple: Accent color, hsl(238, 80%, 66%)
3) Light Medium: Fonts, hsl(238, 80%, 96%)
4) Light Bright: Tooltip Background, hsl(238, 98%, 98%)

Screenshot showing some text with some larger text-snippets in the middle and a blue Button on the bottom.
The text reads from top to bottom:
(In normal font-size, italic)
"Distance to go once around Earth (tap to toggle units):"
(In larger font-size)
"28,100 km"

(In normal font-size, italic)
"Distance from Sun to Earth (tap to toggle units):"
(In larger font-size)
"150,000,000 km"

(In normal font-size)
"Adding a toggle button or another way to centrally control this feature would have been possible too, but I opted for the more subtle inline-text version."
Then the button reads
"Toggle Units to Miles".

Screenshot of some text and an animation.
The text reads:
"I decided to cut those out for the final piece to guide the reader faster to the centerpiece: the map of the night sky. But I’m still fond of the little interactive dot plot animation I developed, and therefore, I’ll share it with you right here, right now. Here is how long the light needs to travel from Sirius to Earth if 1 light year would take 1 second:"

Below that there is a dark-blue rectangle with some white text in upper half that reads "Toggle animation". This is the label of a switch/toggle that let's the user switch between "hide" and "show". It has been switched to "show", as is indicated by a white circle that is moved to the side of the "show"-label.
Below that is the animation. There are two circles. One is larger and labelled "Sirius". It is positioned on the left side. On the opposite side, there is a smaller circle, labelled "Earth" and between the two circles is a grey line. Above, a label "6.0 light years".

000

Sebastian Lammers @sebastianlammers.com · 13/10/2023

I published a new blog post that shows some peeks behind the curtain of how I made my "Stories from the night sky" project (an interactive datadriven map of stars and their "link" to historical events). I talk about data, design and some components I developed: sebastianlammers.com/posts/making...

Screenshot of a blog post. The title reads "Making of Stories from the night sky", Tags read "Projects", "Map", "Interactive", "Historic Data". Below that is an image with some stars and control buttons. One star is hovered and a tooltip is shown.

Screenshot of a blog post. Two images are shown and in between some text. The text talks about the frustrating experience of aiming the mouse cursor exactly at a tiny circle inside the map of stars. It goes on to say that the solution to this problem is called "Voronoi".
The image above the text has just some white circles (stars), while the image below looks much denser, because additional lines have been added.

221

Sebastian Lammers @sebastianlammers.com · 27/09/2023

My latest project: storiesfromthenightsky.netlify.app The light from the stars travels for years (and years) until it reaches your eyes. This interactive map of the night sky shows you for each star what happened on Earth when the light started traveling from the star to you.

000