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.
AI-generated description#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.
<img src="https://github.githubassets.com/images/modules/logos_page/Octocat.png" class="fr w40 h40"/> <img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Visual_Studio_Code_1.35_icon.svg" class="fr w40 h40"/> 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" class="fr w90 ha"/>
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)
- …
<img src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded" class="fr w40 ha"/> Along the way my companions Google and StackOverflow have always helped!
</div>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" class="fl w40 ha"/> 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://cdn.pixabay.com/photo/2019/09/19/05/38/happy-4488255_1280.jpg">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" class="fl w40 ha"/> Loving what Curran is doing, I immediately supported his Kickstarter Vizhub Launch Project.
…
Early VizHub
I started the VizHub way ... by forking examples:
<div class="fr w90 ha"><svg height="40" viewBox="0 0 12 16"><path fill="currentcolor" d="M5.3 10.742A2.422 2.422 0 0 0 3.933 8.9C2.576 8.278 1.7 6.883 1.7 5.342V4.88C.716 4.568 0 3.618 0 2.494 0 1.116 1.075 0 2.4 0s2.4 1.116 2.4 2.494c0 1.124-.716 2.074-1.7 2.385v.463c0 .964.548 1.838 1.397 2.227.56.256 1.037.644 1.405 1.119a3.78 3.78 0 0 1 1.63-1.442c.85-.39 1.398-1.262 1.398-2.227v-.13c-1-.302-1.73-1.26-1.73-2.395C7.2 1.116 8.275 0 9.6 0S12 1.116 12 2.494c0 1.112-.702 2.055-1.67 2.376v.15c0 1.54-.876 2.935-2.233 3.557-.809.37-1.344 1.18-1.393 2.09.017.15.026.304.026.459v.004c.968.321 1.67 1.264 1.67 2.376C8.4 14.884 7.325 16 6 16s-2.4-1.116-2.4-2.494c0-1.124.716-2.074 1.7-2.385v-.318-.061zm-2.9-7.21c.552 0 1-.465 1-1.038 0-.574-.448-1.04-1-1.04s-1 .466-1 1.04c0 .573.448 1.038 1 1.038zm7.2 0c.552 0 1-.465 1-1.038 0-.574-.448-1.04-1-1.04s-1 .466-1 1.04c0 .573.448 1.038 1 1.038zM6 14.545c.552 0 1-.465 1-1.039 0-.573-.448-1.038-1-1.038s-1 .465-1 1.038c0 .574.448 1.04 1 1.04z"></path></svg></div>- 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
:
:
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
<div style="width:200px;height:auto;"> <a title="CSS Neon Text with Google Font" href="/mrwatson-de/3856a7dd7b484565afaba21f20e13caa" style="padding:0px;margin:0px;" class="m0 p0"> <div class="p0 tac"> <img src="/api/visualization/thumbnail/3856a7dd7b484565afaba21f20e13caa.png" style="width:200px;height:auto;padding:0px;margin:0px;"/></div> <div class="m0 bgwht p0 tac">CSS Neon Text with Google Font</div> </a> </div>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?
2020-01-20 JetBrains Mono Font arrives
</div>:
:
:
[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.
<div class="fr fs80"></div>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!
<img src="https://vizhub.com/api/visualization/thumbnail/354f6fecf7764b73b233c26af6504de8.png"/>
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)
- thus the need to use
(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:
- selectAll("text")
- enter selection
enter.transition- update selection
update.transition- exit selection
- exit.transition
- merged selection (merged enter + update selections)
- 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)
<img src="https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg" class="fr w90"/>
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.
<img src="https://redux.js.org/img/redux.svg" class="fr w40 bgwht"/>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.
<img src="https://svelte.dev/svelte-logo-horizontal.svg" class="fr w130 bgwht"/>
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
<div class="fr aside w190"> <div class="fr fs40"></div>New webp image format
There is a new image format for the web: webp
- lossless / lossy = 26% smaller / 25-34% smaller
- Uses 'predictive coding' = predicts difference to neighbors.
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
<div class="fl fs40"></div> 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 ...
<div class="fl fs40">♻️</div> <div class="fr aside w190 tac"><img src="https://svelte.dev/svelte-logo-horizontal.svg" class="w130 bgwht"/>
2020-02-13 Time to start going through the Svelte tutorial
</div>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>
Need to check my CSS against this cool list of methods to organize your css
</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
<div class="fr bgblk w40 h40 tac vac"> <div> <svg width="30" height="30" viewBox="0 0 24 25" xmlns="http://www.w3.org/2000/svg"><path d="M11.47 24.75c6.833 0 12.376-5.542 12.376-12.375C23.846 5.543 18.303 0 11.47 0c-.271 0-.452.023-.588.045l12.33 12.33-12.33 12.33c.136.023.317.046.588.046zm-.995-2.533L.634 12.375l9.84-9.841a3.42 3.42 0 00-.587-.045C4.434 2.489 0 6.923 0 12.375c0 5.453 4.434 9.887 9.887 9.887.271 0 .452-.023.588-.045zm7.534-9.842c0-4.05-3.303-7.352-7.353-7.352-.272 0-.453.022-.588.045l7.307 7.307-7.307 7.308c.135.023.316.045.588.045 4.05 0 7.353-3.303 7.353-7.353zm-7.195 4.797l-4.796-4.797 4.796-4.796a3.424 3.424 0 00-.588-.045 4.847 4.847 0 00-4.842 4.841 4.847 4.847 0 004.842 4.842c.271 0 .452-.023.588-.045z" fill="#FFF" fill-rule="nonzero"></path></svg> </div> </div>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
<div class="prel"> <div class="par aside w190 z2 mr10">I've just used the CSS scale() transform function to reduce the size of the embedded page.
(but the SPACE it occupies is NOT scaling = problem for later)
</div> <div class="embed scale95 z1"> # Cheatsheet for SVG Path DataStraight line commands
+------------+-------------------+--------+
| *M* or *m* | moveto | (x y)+ |
+------------+-------------------+--------+
| *Z* or *z* | close path | (none) |
+------------+-------------------+--------+
| *L* or *l* | lineto | (x y)+ |
+------------+-------------------+--------+
| *H* or *h* | horizontal lineto | (x)+ |
+------------+-------------------+--------+
| *V* or *v* | vertical lineto | (y)+ |
+------------+-------------------+--------+
Curve commands
+------------+----------------------------+--------------------+
| *C* or *c* | Bézier curveto | (x1 y1 x2 y2 x y)+ |
+------------+----------------------------+--------------------+
| *S* or *s* | Shorthand Bézier curveto | (x2 y2 x y)+ |
+------------+----------------------------+--------------------+
| *Q* or *q* | Quadratic bézier curveto | (x1 y1 x y)+ |
+------------+----------------------------+--------------------+
| *T* or *t* | Shorthand/Smooth Quadratic | |
| | bézier curveto | (x y)+ |
+------------+----------------------------+--------------------+
| *A* or *a* | Elliptical arc | (rx ry |
| | | x-axis-rotation |
| | | large-arc-flag |
| | | sweep-flag x y)+ |
+------------+----------------------------+--------------------+
Notes
Uppercase commands uses absolute positions, lowercase commands uses relative positions.
For further descriptions check: http://www.w3.org/TR/SVG/paths.html#PathDataClosePathCommand
Examples
Simple Triangle
<path fill="white" d="M 0,200 h 200 L 100,0 z" />
See http://codepen.io/spoike/pen/ogMGoJ
Cloud
<!-- Note: Needs to be scaled up because it is 2x4 px -->
<path
fill="#333333"
d="M 1,2
h 2
c 1,0,1,-1.4,0,-1.4
a 1.075,1.1,1,0,0,-2,0.3
c -0.8,0,-0.8,1.1,0,1.1
z" />
See http://codepen.io/spoike/pen/NPBbpN
</div>...and now I need to understand the error
...which I think is something to do with the last path in the SVG
... maybe it's turning (clockwise/anti-clockwise)?
<div class="par fs80 p6" style="z-index:1">Help! </div><?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 25" class="fm_fill">
<path d="M11.47 24.75
c6.833 0 12.376-5.542 12.376-12.375C23.846 5.543 18.303 0 11.47 0
c-.271 0-.452.023-.588.045
l12.33 12.33-12.33 12.33
c.136.023.317.046.588.046z
m-.995-2.533L.634 12.375
l9.84-9.841a3.42 3.42 0 00-.587-.045C4.434 2.489 0 6.923 0 12.375
c0 5.453 4.434 9.887 9.887 9.887.271 0 .452-.023.588-.045z
m7.534-9.842
c0-4.05-3.303-7.352-7.353-7.352-.272 0-.453.022-.588.045
l7.307 7.307-7.307 7.308
c.135.023.316.045.588.045 4.05 0 7.353-3.303 7.353-7.353z
m-7.195 4.797
l-4.796-4.797 4.796-4.796a3.424 3.424 0 00-.588-.045 4.847 4.847 0 00-4.842 4.841 4.847 4.847 0 004.842 4.842
c.271 0 .452-.023.588-.045z
"
fill="#FFF" fill-rule="nonzero"/>
</svg>
Interesting stuff to check out later
<div class="fr"> </div>Icons
- Iconify Universal/Unified icons framework & code
- Iconify Material Design Icons
More CSS Stuff
CSS Selector-Fun
<img src="https://s.w.org/images/core/emoji/11.2.0/svg/1f579.svg" class="fr w40"/>- First learn The 30 CSS Selectors You Must Memorize
- and then test yourself :D
CSS Variables
At last, we can make our CSS modular using CSS var(--s) !
See Using CSS custom properties (variables) for detais.
<div class="sheet psheet scale95">How?
You can define a custom property using a double-dash like this:
#blog {
--corners: 4px;
}
[or - if you want it defined globally - use the :root pseudo-class (and a longer name!)]
and then reference it like this
var(--variable-name, default-value);
For example:
#blog .aside {
border:1px solid green;
border-radius:var(--corners,6px);
background-color:#ffeebb;
padding:0px 10px;
color:#333;
}
#blog .embed {
border:1px solid grey;
border-radius:var(--corners,6px);
background-color:#eee;
padding:10px;
}
#blog .sheet {
box-shadow: 5px 10px rgba(0,0,0,0.1);
border-radius:var(--corners,6px);
background-color:white;
}
'Standard' structures in d3?
Q. asked by Mark Hughes on the D3 help slack channel & Curran replied:
| Struture | represented as |
|---|---|
| A record | An Object, where each property corresponds to a column |
| A table | An Array of Object records |
| …with metadata | The Array returned by d3.csvParse includes a property array.columns which returns an Array of column-names. |
| A network | See d3-force |
| A tree | See d3-hierarchy |
<div class="fr aside p6 w190"> <img src="https://avatars0.githubusercontent.com/u/40338071?s=200&v=4" class="fr w60"/>There are also ways to get "from here to there" (e.g. from database to JS), such as https://github.com/d3/d3-dsv and https://github.com/d3/d3-hierarchy#stratify
VSCodium
A less sinister version of VSCode!
Free/Libre Open Source Software Binaries of VSCode
Removes telemetry but needs somw workarounds to get all features working
</div>Advanced Animation: JS, CSS, CPU or GPU?
2020-02-17 GPU Animation: Doing it right - a very interesting article about (pros and cons of) getting the GPU (Graphics Processor Unit) to do the animation rather than the CPU.
For example, here the upper square is animated via CSS by the GPU, the lower square by JS + the CPU.
Whilst a couple of heavy JS-functions steal the CPU time from the lower square, the GPU-animation is smooth.
<div class="tac"><iframe src="https://sergeche.github.io/gpu-article-assets/examples/js-vs-css.html" height="180" frameborder="no" allowtransparency="true" style="width:550px" class="sheet"></iframe></div> <div class="fr"><svg xmlns="http://www.w3c.org/2000/svg" xmlns:xlink="http://www.w3c.org/1999/xlink" version="1.1" width="206" height="134" viewport="0 0 200 100"> <title>A RegEx Logo</title> <rect transform="translate(45, 1) skewX(-18)" width="156" height="130" fill="yellow"/> <rect transform="translate(55,10) skewX(-18)" width="130" height="70" fill="green"/> <rect transform="translate(60,20) skewX(-18)" width="82" height="50" fill="#900"/> <rect transform="translate(70,30) skewX(-18)" width="42" height="30" fill="blue"/> <text transform="translate(70,51)" stroke="#fff" stroke-opacity="0.2" fill="#fff" stroke-width="4" style="font-size:20px;font-family:sans-serif;">/^$/  g    \1</text> <text transform="translate(17,118) skewX(-18)" stroke="#000" stroke-opacity="0.2" fill="#000" stroke-width="4" style="font-size:44px;font-family:sans-serif;">RegEx</text> </svg> </div>More RegEx Stuff
- Here's a good Regex Cheat-Sheet which explains RegEx with code examples.
- regex101.com is great for analysing regexes, BUT…
- regexr.com seems to be a great place to test using regex replace
More CSS Stuff
Need to consider the BEM CSS model.
<img src="https://internetingishard.com/img/interneting-is-hard-logo-97b225.svg" class="fr w90" />
The HTML & CSS Is Hard website appears to have great tutorials about:
CSS positioning
<span class="this fs40">☝ THIS ☝</span>
"Float-based layouts have mostly been replaced with Flexbox in modern websites."
<img src="https://internetingishard.com/html-and-css/flexbox/flexbox-layouts-7abd58.png" class="w33pc"/> - [Advanced Positioning](https://internetingishard.com/html-and-css/advanced-positioning/) <img src="https://internetingishard.com/html-and-css/advanced-positioning/css-positioning-schemes-790d5b.png" class="w33pc"/>- Responsive Design
- and loads of other stuff
- ooh! …also including Web Typography
SVG Animation using SMIL <animate>, <animateMotion>
Tom Steeples just turfed up a great thing ... animation in SVG using the <animate> tag. See his animated smiley.
- Check out the animate element
- It seems to be based on SMIL
- Check out this really cool Toy train SMIL Animation
Munging data - some places to learn
2020-03-04 Getting started with VSCode and Node.js < 3 minutes
Visual Studio Code: Javascript, Node.js Hello World you tube
Wow - mermaid for markdown-like quick-charts
See mermaid-js or [mermaid githubgithub] (https://github.com/mermaid-js/mermaid)
This text…
sequenceDiagram
VizHub User-->>VizHub:Looks at
Note right of VizHub User: Impressed, but...
VizHub User->>Curran: What about XYZ?
Curran->>VizHub User: XYZ sounds cool!
Curran->>User Forum: Proposes Feature XYZ
VizHub User->>User Forum: Like
Note right of User Forum: Idea discussed and refined
User Forum-->>Curran: Uses details
Curran-->>VizHub: Implements Feature XYZ
Curran-->>VizHub User: Announces cool new Feature XYZ!
produces this cool SVG:
(Open the VizHubFeatureProposalAndImplementationSequence.svg file, which I can't embed here)
Have a look at the results on this gist
-- Embedded Gist-Script doesn't work
<script src="https://gist.github.com/mrwatson-de/6a259e2217cbd01bb7c08e4f9ca6cfec.js"></script>-- img with svg-source doesn't work
<img src="https://gist.githubusercontent.com/mrwatson-de/6a259e2217cbd01bb7c08e4f9ca6cfec/raw/d3e38efd77c1e5825242ad53fc2c4af7c2ef4a25/VizHubFeatureProposalAndImplementationSequence.svg"/> --2020-03-09 Thoughts on further R&D
So, I'm getting on well with JavaScript, D3, VizHub and Observable. I shall keep on learning in these areas.
However, I am aware that D3 is a nuts and bolts technology. You need to learn quite a lot of stuff to get things working.
Vega and Vega-Lite seem to simplify things and provide a lot more sensible logic out of the bag.
2020-03-10 Latest CSS Grid Design breakthrough
Responsive Grid Magazine Layout in just 20 lines of css by ... my brother! (small world)
:
:
:
/Blog
<p style="text-align:center;font-size:xx-large;margin:0px"></p>
</div>