Skip to main content
SimilarExport ZIP
100%

MrW's VizHub Experience 2020 (BACKUP)

✓ Published1🌍 Public
RRussell Watson
Last edited Feb 7, 2020
Created on Feb 7, 2020

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.

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…

Fork of MrW's VizHub Experience 2020 (BACKUP)

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.

SSampras Dsouza
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
87% match
Loading thumbnail…

Hello VizHub

A simple web page renders the text “Hello VizHub!” in large, centered white type against a dark navy background. It demonstrates VizHub’s ability to combine an HTML container, a CSS stylesheet with a Google Font, and an ES6 module that exports a string constant. Using D3.js’s `select` API, the JavaScript imports the message and sets the inner text of a `<div>` element. This example shows basic modular code organization and D3’s DOM manipulation in a minimal, single-purpose visualization.

Ccliffng
69% match
Loading thumbnail…

Hello VizHub

This example demonstrates a minimal “Hello VizHub!” webpage with large, centered text styled via Google Fonts. The code uses an ES6 module (`myMessage.js`) to export the greeting string, which is imported into the main script and rendered through D3.js (`import d3 from 'd3'`). The page structure is defined in `index.html`, with styling in `styles.css` using the Ubuntu font and a dark background. The source data is purely textual, derived from the exported message constant.

3343251455@qq.com
68% match
Loading thumbnail…

Hello VizHub

This example displays a minimalist single-page visualization that renders the text "Hello VizHub!" in a large, centered Ubuntu font against a dark background. Built with D3.js v5, it dynamically sets the message text using the `select` API on an HTML div element. The page imports a custom ES6 module for the message string and incorporates a YouTube video tutorial in the README. The styling relies on CSS for contrast and typography.

Eexastat
67% match
Loading thumbnail…

Hello VizHub

This example displays a static, full-page “Hello VizHub!” message in large Ubuntu type on a dark navy background, demonstrating VizHub’s basic project structure. It uses D3 v5’s `select` method to set the text of a `div` element, pulling the string from an exported ES6 module (`myMessage.js`). The styling relies on an external Google Fonts import and plain CSS. The visualization is purely textual, showcasing how D3, JavaScript modules, and CSS combine in a minimal single-file setup.

YYehui Wang
67% match
Loading thumbnail…

Hello VizHub

This example displays a static, full-page “Hello VizHub!” message in large Ubuntu type on a dark navy background, demonstrating VizHub’s basic project structure. It uses D3 v5’s `select` method to set the text of a `div` element, pulling the string from an exported ES6 module (`myMessage.js`). The styling relies on an external Google Fonts import and plain CSS. The visualization is purely textual, showcasing how D3, JavaScript modules, and CSS combine in a minimal single-file setup.

YYehui Wang
67% match
Loading thumbnail…

Hello VizHub

This example displays a static, full-page “Hello VizHub!” message in large Ubuntu type on a dark navy background, demonstrating VizHub’s basic project structure. It uses D3 v5’s `select` method to set the text of a `div` element, pulling the string from an exported ES6 module (`myMessage.js`). The styling relies on an external Google Fonts import and plain CSS. The visualization is purely textual, showcasing how D3, JavaScript modules, and CSS combine in a minimal single-file setup.

YYehui Wang
67% match