Exercise:
- Fork the scatter plot we made
- Visualize a different dataset
See also Preparing Data for Visualization to learn how to put data into a Gist.
This time Iām going to invite anyone to join the live audio. Hereās the joining info:
To join the video meeting, click this link: https://meet.google.com/cun-bxhs-qgc
Otherwise, to join by phone, dial +1 316-413-2020 and enter this PIN: 586 917 944#
To view more phone numbers, click this link: https://tel.meet/cun-bxhs-qgc?hs=5
Hey @curran thatās the way I found to give the dot a title to it when hovering it.
The way that I did was passing the information inside the āmarksā as p_x and p_y, and appending the title to the circle getting p_x and p_y.
PS: It is inspired on your video of Cheap Tricks.
This scatterplot shows the time series of daily new cases of Covid pandemic in Italy.
- x-axis exploits
scaleTime - the radius of points is proportional (i.e.,
scaleLinear) to the amount of patients in intensive care on a daily basis - the button in the top-left corner toggles the path to switch from a connected scatterplot to a pure scatterplot and viceversa
1 Like
Hey Felipe @maion, I tried with Google Chrome but I couldnāt visualize titles. Should those be visualized as a kind of tooltips?
Another example mimicking tooltips with alerts. Hover the mouse pointer over a point to get its coordinates
Edit: it looks like I cannot post three times in a row in the same thread, therefore I edit this post to put another different exercise. And here it is:
More about Irises. The rationale behind this new exercise is plotting all the pairwise comparisons of all the numeric fields in the iris dataset (ie. 4 variables => 2^4 scatterplots). I built a 4x4 matrix of 16 distinct svg elements, sticking with a Vanilla fashion as much as I could (e.g., no modules, even if, to be honest, I still donāt feel confident with ES6 modules 
). Thus, in order not to repeat code, each scatterplot is plotted by a function which is invoked for each āx vs. yā pair.
Colors denote members of the three iris species. Inspired by this
Ooooh that works! Thanks!
Hey Andrea @floatingpurr, the ātitlesā are not very fast response, but it is working under chrome & safari (here), the mouse pointer is not visible during screen capture, but the title yes.
1 Like
@Andre cool that it worked for you!!
And thank you, Iāve learned a new word in your code āpeskyā lol!
1 Like
Hi Felipe @maion, I tried with Google Chrome but I couldnāt visualize titles yes It works here too. I donāt know the reason why the first time I tried it hadnāt worked. Maybe, as you pointed out, browsers render titles tag with a little lag and I was hovering the pointer over points too quickly.
PS: if you donāt want to pollute your mark objects with extra attributes for unscaled values, you can apply the inverse scaling function to build your titles with original unscaled data, e.g.:
.text((d) => (`( ${x.invert(d.x)}, ${y.invert(d.y)} )`));
1 Like
Andrea @floatingpurr, thank you!!
I was pretty sure that there was an inversion somewhere to do it. I was not able to find it. So, I thought "It will just be faster to just add this 2 lines in āmarksā! lol hahah
1 Like
You are welcome! : ) See you all next exercise
Hello @curran,
As my exercise Iāve played around with the same data input, and my goal was to try to have all the information in the same Scatter Plot (with title).
Although, I think I should somehow normalize the data for the radius. If I change the data (sepal <-> petal) the radius gets really small, and the ellipse almost vanishes.
Iāve planed to add menus to it, so I could fast change the data, but it seems a big step for how the code is right now.
My fork uses the Dinosaur Directory Dataset, courtesy of the Natural History Museum, London (nhm.ac.uk).
It plots the length (x-axis) against the weight (y-axis) of the dinosaur.
Thanks to @maion for the awesome tip about hovering tooltips. Iāve added them to include extra information about the name of the dinosaur, the period when they ruled the earth, their diet type, length, and weight.
2 Likes
For this exercise I created a scatter plot comparing EU fertility rate with urban population %
Based on the table I found here: https://www.worldometers.info/population/countries-in-the-eu-by-population/
I created this gist repository for my data: https://gist.github.com/yiorgosbagakis/c3bb0aa590d0685c484b2459be4a7b75
For my scatter plot I added the text showing which country is represented by each dot. I changed a bit the colours to test how I can modify the axis styles. It was a bit tricky to display the text without overlapping since some of the dots are very close to each other. I used ternary operators for this - I am sure there is a more elegant way for this 
1 Like
Created scatterplot based on table diabetic for food vet, kcal, carbonhydrate