Skip to main content
SimilarExport ZIP
100%

Fork of MrW's VizHub Experience 2020 (BACKUP)

✓ Published0🌍 Public
SSampras Dsouza
Last edited Jun 21, 2022
Created on Jun 21, 2022

This example is a backup of a journal-style dashboard showing a data visualization course experience. It displays a digital LED clock-style rendering of the year "2020" and a VizHub logo using HTML and CSS, with text styled via the LED Digital 7 webfont and layered text shadows for a neon glow effect. The page is rendered in SVG format and includes links to external resources like mrwatson.de and VizHub. The visualization is purely presentational, using CSS flexbox for centering and custom fonts for aesthetic emphasis.

AI-generated description

Prehistory

<img src="https://mediaprocessor.websimages.com/width/240/crop/0,0,240x180/www.fmworkmate.com/profile/profile-image-display-small.png" style="float:right;margin-left:10px;margin-bottom:5px;width:90px;height:90px;"/>

I'm MrWatson of mrwatson.de, an age-old programmer and database developer, and work with the FileMaker / Claris platform.

Due to an up and coming closer integration of the platform with the web - and the general rise of the API-age - at the end of 2019 I realised the need to get up to speed with web technologies, and set myself the personal aim of learning how to programme in JavaScript and implement data visualisations in d3.

In summer 2019 I started looking at Node.js, learnt about npm, and the purpose of CDNs.

<img src="https://upload.wikimedia.org/wikipedia/commons/2/2b/Node-red-icon.png" style="float:left;margin-right:10px;margin-bottom:5px;width:40px;height:40px;"/>

I discovered the awesome NODE-Red visual IoT workflow editor from Nick O'Leary, and realised the power, potential and importance of JavaScript.

<img src="https://github.githubassets.com/images/modules/logos_page/Octocat.png" style="float:right;margin-left:10px;margin-bottom:5px;width:40px;height:40px;"/> <img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Visual_Studio_Code_1.35_icon.svg" style="float:right;margin-left:10px;margin-bottom:5px;width:40px;height:40px;"/> I prepared the journey to text-based programming including installing Visual Studio Code towards the end of August - the #1 trending Editor in the GitHub State of the OctoVerse Top Project.

<img src="https://d3js.org/preview.png" style="float:right;margin-left:10px;margin-bottom:5px;width:90px;height:auto;"/>

I had come across d3 several years ago, was totally awed by it, but did not have the time, nor motivation back then to 'get into it'.

In Sep. 2019 I rediscovered d3 (wow again!) and started experimenting.

<img src="https://static.observablehq.com/summary.b695b7f2cd01db2f157a3d2dccaba70ff06af11bf98299ebebb188140ad2c17f.png" style="float:left;margin-right:10px;margin-bottom:5px;width:60px;height:60px;"/>

Within a month I had discovered observablehq - awed again by Mike Bostock's genius ... but this time - with the help of the reactive envionment - I was able to quickly achieve some results ... but it soon became clear that my rusty JavaScript basics needed refreshing.

<img src="https://upload.wikimedia.org/wikipedia/commons/9/99/Unofficial_JavaScript_logo_2.svg" style="float:right;margin-left:10px;margin-bottom:5px;width:60px;height:60px;"/> Things like:

As ever, I was always helped by my old companions Google and StackOverflow!

At the start of Nov. 2019 I found a cool youtube d3 course from freecodecamp.

Three weeks later via the freecodecamp website I found Curran's marvellous 13-hour long Data Visualization with D3.js - Full Tutorial Course - which I watched from end to end over the following weeks! (Aside: desparately need to index that video!)

<img src="https://yt3.ggpht.com/a/AGF-l79y46yTIJmZmZydLCTh1EDCZHG18R1j0nFuHA=s288-c-k-c0xffffffff-no-rj-mo" style="float:left;margin-right:10px;margin-bottom:5px;width:40px;height:40px;"/> December was filled mostly with christmas preparations, a small excursion into tableau. Just at the turn of the year I then discovered vizhub - and from there everything is exploding! :-)

<img src="https://datavis.tech/wp-content/uploads/2019/12/image-46.png" style="float:right;margin-left:10px;margin-bottom:5px;width:auto;height:90px;"/>

Vizhub

I've had the huge luck to have stumbled across vizhub just as Curran was starting the datavis-2020 course :D

<img src="https://pbs.twimg.com/profile_images/841287627009609728/-8eDHLAU_400x400.jpg" style="float:left;margin-right:10px;margin-bottom:5px;width:40px;height:40px;"/> Loving what Curran is doing, I immediately supported his Kickstarter Vizhub Launch Project.

[MORE TO COME]

2020-01-20 JetBrains Mono Font arrives

2020-02-02 A very special date-viz

Notes to Self

2020-02-05

MIT Licensed

Similar vizzes

Loading thumbnail…

MrW's VizHub Experience 2020 (BACKUP)

This backup page displays a stylized digital clock for 2020, using a glowing “LED Digital 7” font and a minimal layout. The text (the year “2020”) and a VizHub logo are centered on screen, with CSS flexbox handling alignment. The page loads the font via an `@import` URL, and uses inline SVG for the logo. The HTML and CSS files provide the structure and styling, while no external JavaScript is used for interactions or animation.

RRussell Watson
87% match
Loading thumbnail…

MrW's VizHub Experience 2020

A self-referential digital clock animates through the year 2020, using a blinking LED-style font to symbolize the passage of time in MrW's VizHub learning journey. The display shows the VizHub logo and a link to the author's site, rendered as static SVG elements. The clock's time updates via JavaScript within a React-based environment, with styling driven by CSS custom properties and a web font loaded from an external CDN.

RRussell Watson
80% match
Loading thumbnail…

Fork of Hello VizHub!

This example displays the text “Fork of Hello VizHub!” in a large, centered Ubuntu font on a dark background, with the message rendered via a simple HTML div element. The page uses D3 v5, loaded from a CDN, and relies on CSS for styling—setting a near-black background, light gray text, and full-viewport alignment. No interactive behavior or data binding is present; the visualization is purely static, demonstrating a minimal setup where D3 is included but not yet applied to any data or graphical computation.

Aavirathtib
75% match
Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a minimal visualization that displays a static text message, "Hello VizHub!", centered on the page using a large font. It shows how to set up a basic VizHub project by loading D3 via UNPKG, importing D3 in the main JavaScript file, and separating code into local ES6 modules. The page structure is defined in HTML with a `<pre>` element, while the message is exported from a separate module and injected into the DOM. Styling is handled through a simple CSS rule that centers the text and sets its font size.

Ssangeetha-gandhi
74% match
Loading thumbnail…

Fork of Hello VizHub

This example showcases a minimal SVG scene composed of circles and rectangles in both black and red, rendered within an 960x500 viewport. The page demonstrates VizHub’s module system by importing D3 v5 via UNPKG for DOM selection, specifically using `select` to set the text of a message div. A local ES6 module supplies the greeting text, while CSS styles the message with large, centered typography.

AadbSalam
74% match
Loading thumbnail…

Fork of Hello VizHub

The visualization greets its audience with a massive, centered “Hello VizHub!” message, rendered as plain text on a white background. It demonstrates the core workflow of the VizHub platform by importing D3’s `select` function to target the `#message` div and apply the text, while a local ES6 module exports the message string. The page loads D3 v5 via UNPKG and uses a custom CSS file to style the oversized typography, highlighting how external libraries and local modules integrate within a simple HTML shell.

MMannava Priyanka Chowdary
73% match
Loading thumbnail…

Fork of Hello VizHub

This example demonstrates the basic setup and rendering workflow of a VizHub project. It uses React 18.2.0 and ReactDOM to render an `h1` heading, while an inline SVG contains a static circle with a radius of 100 pixels. The code imports D3 via UNPKG, though the commented-out script tag indicates the library is not actively used in the visualization. Local ES6 modules, such as `myMessage.js`, are included to show modular code organization. The rendered output is static, focusing on minimal component integration rather than dynamic data or interactions.

RRia Patel
73% match
Loading thumbnail…

Fork of Hello VizHub

This example displays a simple SVG path rendered as a blue-filled, red-stroked shape, repositioned with a CSS transform. It demonstrates VizHub’s core workflow: loading D3 v5 via UNPKG, using the `select` function from D3 to set text content, and importing a local ES6 module for a greeting message. The SVG markup is static, with styling applied through an external stylesheet.

PPiotr Paszek
73% match