<style> #blog { --corners: 3px; } #blog .aside { border:1px solid green; border-radius:var(--corners,6px); background-color:#ffeebb; padding:0px 10px; color:#333; } #blog .bgblk {background-color:black;} #blog .bgwht {background-color:white;} #blog pre { margin-left:36px; margin-right:36px; background-color:#eee; padding:6px; } #blog .embed { border:1px solid grey; border-radius:3px; background-color:#eee; padding:10px; } #blog .scale50 {transform: scale(0.5)} #blog .scale95 {transform: scale(0.95)} #blog .fl {float:left;margin-right:10px;margin-bottom:5px;} #blog .fr {float:right;margin-left:10px;margin-bottom:5px;} #blog .fs40 {font-size:40px;} #blog .fs80 {font-size:80px;} #blog .h40 {height:40px;} #blog .ha {height:auto;} #blog .m0 {margin:0px;} #blog .m10 {margin:10px;} #blog .mr10 {margin-right:10px;}

#blog .pal {position: absolute;left: 0;}
#blog .par {position: absolute;right: 0;}
#blog .prr {position: absolute;right: 0;}
#blog .p6 {padding:6px;}
#blog .psheet {padding:6px 40px;}

#blog .sheet {
  box-shadow: 5px 10px rgba(0,0,0,0.1);
  border-radius:var(--corners,6px);
  background-color:white;
}
#blog .tac {text-align:center;}
#blog .this {font-weight: bold;}
/* FIXME */
#blog .vac {display: table;}
#blog .vac * {display: table-cell;vertical-align: middle;
/* /FIXME */
}
#blog .w130 {width:130px;}
#blog .w190 {width:190px;}
#blog .w40 {width:40px;}
#blog .w33pc {width:33%;}
#blog .w60 {width:60px;}
#blog .w90 {width:90px;}
#blog .wa {width:auto;}
#blog .z1 {z-index:1;}
#blog .z2 {z-index:2;}
/* EXPERIMENTAL */
#blog table,th,td {
  border:1px solid green;
  padding:3px 8px;
  border-collapse:collapse;
}

</style>

This is my VizHub blog. Drop me a line, if you have any feedback on it!

Prehistory

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.

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

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.

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.

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.

Things like:

• stuff I had forgotten (Converting strings to numbers or Accessing Nested Objects)

• doing old stuff, but in JS, (Regex in JS)

• as well as getting up to speed on the state of JavaScript today (Gee! There sure has been some big changes in JS/ECMAScipt since 1999! Just a few ;-)), including:

  • discovering the cool, new ECMAScript 6: New Features
  • getting my head round all the different Javascript versions (and ways of naming them)
  • …

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!)

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! :-)

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

Loving what Curran is doing, I immediately supported his Kickstarter Vizhub Launch Project.

…

Early VizHub

I started the VizHub way ... by forking examples:

• Stylized Bar Chart
• Choropleth Map with Interactive Filtering
• Interactive Color Legend
• Locations of Datavis 2020 Students By Date (Forked=React without zoom-interaction)

I followed the course materials and got to grips with SVG + React

• Let's Make a Face Part I (.V)

:

:

I realised that if I am going to get this code under my skin, I need to get my rusty HTML + CSS back up to scratch

HTML & CSS

• Hello HTML5
• CSS Animation of Hello HTML
• CSS-Animation Sunrise Hello HTML

Notes to pad out some time

• Fill vs background-color
• CSS nth-of-type
• Text & box shadows
• CSS-Animation!

:

[LINKS NEEDED HERE]

Observable vs VizHub

I also wanted to see how Observable and VizHub compare

• can you embed them in other pages?
• how performant are they?

:

:

:

[LINKS NEEDED HERE]

Gaussian Primes

I found a very interesting(*) viz about Gaussian Primes by Jason Davies and was very happy to port this to Vizhub.

I adapted my gaussian primes visualisation from the fruit bowl, and tried to do too much at once, so after a long while I mananged to get it working at all.

It still needs animating, which I hope to do at a later date.

(*) OK, so I'm a bit of a mathemetician, who's interested in such things as Primes, Gaussian Primes and likes nothing better than a bit of mathematical youtubing with Numberphile, Matt Parker or Mathologer

02•02•20•20

2020-02-02 A very special viz for a very special date! (It wasn't just a palindrome day, but a whirligig day!) // The animation will be (extensively) extended as I develop the skills :D

Notes to Self

2020-02-05

• Centering stuff in CSS is a science unto it's own!
  • I used the 'Simulating table display' approach described in this StackOverflow answer
  • How hard this is is reflected in the number of views this question has received: 3.2m times! (and probably also in the number of duplicate questions of this nature)
• Need to Check out this cool D3 Real Time Chart with Multiple Data Streams (..for animated visualisation of data while it is loading)
• Watch out for OLD code that uses V3 or V4 of D3! (D3.3≠D3.5)
• Check out D3 Change history (∂-D3, so to speak)
  • It is an exceptionally good read!
  • AND!...check out contributor #2 of the changes file... Curran!
  • OMG!...check out contributor #2 of d3... Jason Davies! (Original author of my Gaussian Primes Visualisation)

2020-02-05 I am very frustrated!

Can't get anything to work.

• D3 word cloud (FAIL#1)
• D3 word cloud (FAIL#2)

2020-02-06 Hooray! By Jove I've got it!

Everything has just fallen into place!

• My first working animation !
• I couldn't make a word cloud, but I have made word-rain!

Breakthroughs =

• Local modules need to be referenced with the "./" path prefix!
• Got the hang of using .map(function) to munge data.
• Got the hang of using a color scale's domain and range to map a value to a color.
• Understood the use of .transition() and .duration() to animate
• Understood the difficulties I was having moving
  • from a simple viz - with straightfoward method chaining
  • to a more complicated viz with animation, where method chaining needs to be augmented due to the change of current objects
    • thus the need to use .call()
    • or join (func,func,func)

(d3.)selection.join

Yep, the crux if the problem is explained in the selection.join observable documentation.

The last paragraph says (my highlighting)

The return value of the enter and update function is important—it specifies the selections to merge and return by selection.join. To avoid breaking the method chain, use selection.call to create transitions. Or, return an undefined enter or update selection to prevent merging.

Here is the code with my current understanding of the method-chaining in the comments:

{
 const svg = d3.create("svg")
     .attr("width", width)
     .attr("height", 33)
     .attr("viewBox", `0 -20 ${width} 33`);

 while (true) {
   const t = svg.transition()
       .duration(750);

   svg.selectAll("text")                      // method chain 1 START
     .data(randomLetters(), d => d)           // method chain 1
     .join(
       enter => enter.append("text")          // method chain 2 START
           .attr("fill", "green")             // method chain 2
           .attr("x", (d, i) => i * 16)       // method chain 2
           .attr("y", -30)                    // method chain 2
           .text(d => d)                      // method chain 2
         .call(                               // .call branches method chain 2
           enter => enter.transition(t)       // method chain 3 START
           .attr("y", 0)                      // method chain 3 END
         )                                    // method chain 2 END
         ,  
       update => update                       // method chain 4 START
           .attr("fill", "black")             // method chain 4
           .attr("y", 0)                      // method chain 4
         .call(                               // .call branches method chain 4
           update => update.transition(t)     // method chain 5 START
           .attr("x", (d, i) => i * 16)       // method chain 5 END
         )                                    // method chain 4 END
         ,
       exit => exit                           // method chain 6 START
           .attr("fill", "brown")             // method chain 6
         .call(                               // .call branches method chain 6
           exit => exit.transition(t)         // method chain 7 START
           .attr("y", 30)                     // method chain 7
           .remove()                          // method chain 7 END
         )                                    // method chain 6 END
     )                                        // method chain 8 START (& 1 END)
     .attr("foo","bar")                       // method chain 8 
     .call(                                   // .call branches method chain 8
       merge => merge.transition(t)           // method chain 9 START
       .attr("foo", "baz")                    // method chain 9 END
     )                                        // method chain 8 END

   yield svg.node();
   await Promises.tick(2500);
 }
}

The method chains:

1. selectAll("text")
2. enter selection

3. enter.transition
   

4. update selection

5. update.transition
   

6. exit selection
7. exit.transition
8. merged selection (merged enter + update selections)
9. merged.transition

Maybe we can picture it like this:

  
selectAll("text").data().join()
 .------------------------´
 |`- enter selection
 |    `- enter.transition ---.
 |`- update selection        |
 |    `- update.transition --+
  `- exit selection          |
      `- exit.transition     |
 .--------------------------´
 `- merged selection
      `- merged.transition
  

Learning Javascript - by having Fun

Along the way I came across some fun places to learn JavaScript.

• JSFiddle For fiddling around with JavaScript online

• CodePen An elegant environment for coding, for example, this awesome CSS Sunrise Animation Pen by The Brutal Tooth

• WarriorJS A game to develop your JavaScript 'sword' by programming your warrior-bot to fight against foe ... and stuff.

• CodeWars is a ninja-like place to pit your coding skills against others

CodeWars offers small focussed tasks, which really help you to hone your skills by forcing you to APPLY any half-baked knowledge you have. I can really recommend it.

2020-02-25 RW: Note: CodeWars ranks place 7 in The 10 most popular coding challenge websites for 2020 AND in The Top 20 Websites to Learn Coding for Free

React, JSX, REDUX & Co. (Svelte)

React is currently the leading JavaScript Framework

JSX is a markup syntax - a mix of HTML+Javascript - which makes it possible to calculate attributes + code on the fly.

• It uses custom tags backed by JavaScript functions, and
• uses curly braces (in place of quotes) to allow dynamic calculation

      <MyTag attr={JavaScriptCode}>foo-bar</MyTag>

Checkout the JSX-intro.

In larger React projects, you might want to use Redux to (centrally) manage application state. (React Redux is the official React bindings for Redux)

If you need a small version of React, try Preact.

Virtual DOM vs Svelte

React uses a virtual DOM to decide what to change in the real DOM.

While making it possible to update just the necessary DOM elements, the virtual DOM method represents a heavy CPU-load on the device. https://twitter.com/0xca0a/status/1199997552466288641 and there are moves to counter this new programming language Svelte

Trends

Where to find out what is trending / changing in our world?

• https://octoverse.github.com/
• https://googletrends.github.io/data/
• to be continued…

2020-02-09 Back to the future with vizhub

Due to some bug in the works somewhere, I've just had to retype most of this page, as the first version got sucked up by a black hole in the ether.

That reminds me of my first experiences of programming back in the early 80s on a ZX Spectrum and Atari 400 ...

You could only save to cassette back then and the only validation method to check if it had saved correctly was just to reload it, and if didn't load, that confirmed it hadn't saved properly ... and you just stayed up half the night and programmed it again (and crossed your fingers a litle harder)

Defining local CSS (or how to pimp your blog)

2020-02-13 After a long conversation with Curran about the development of vizhub, one of the topics that was raised, was how to make CSS which is local to this readme - so I went searching…

Apparently, for a while (in the history of HTML) it was possible to scope styles to the current containing element using <style scoped> ... but the scoped attribute has now been dropped.

This Stackoverflow answer presented the following method to localize styles for a given div:

	<div id="blog">
	  <style>
	    #blog .bgblk {background-color:black;}
	    #blog .bgwht {background-color:white;}
	    #blog .fl {float:left;margin-right:10px;margin-bottom:0px;}
	    #blog .fr {float:right;margin-left:10px;margin-bottom:5px;}
	    #blog .m0 {margin:0px;}
	    #blog .p6 {padding:6px;}
	  </style>
	  PUT YOUR BLOG TEXT HERE
	</div>

…and if you look at the README file, you will see that this is exactly how I have implemented styles in this blog.

SVG Paths

I've got a (kind-of) broken SVG:

Well, at least, …

• it works in my browser,
• it works in my svg viewer "Gaplin",
• it breaks in my svg editor "Sketch",

• it breaks when I import it into FileMaker as an svg-button icon!

=> Time to learn about SVG Paths

... and before I summarize it myself check out this ideal gist