In this second episode, we’ll use SVG to create graphics that approximate visualizations.
Reference links:
Exercise:
- Re-create a pseudo visualization from one of these visualization taxonomies
Post the VizHub link here.
4 Likes
Exercise 1
6 Likes
Here is my Pseudo Visualization of a Gantt Chart (reference: https://datavizcatalogue.com/methods/gantt_chart.html )
7 Likes
Here is a pseudo slope graph. 
6 Likes
Here’s an attempt at a spider chart!
5 Likes
While doing this, I was reminded of the question you visited (in last year’s course) on how the size of a circle should be determined from the underlying data.
6 Likes
Hey @curran , not directly related to this class, but somehow related to the course: Check it out this site http://viruspatterns.com/ I’m not sure how he does the models, and interaction. Is it SVG? Pure JS?
Pretty good content and site.
See you Saturday (may be not alive… let’s see)
1 Like
That’s very nice! I see by inspecting the DOM that he is using Canvas for the graphics.
Also in the scripts you can see that page loads ThreeJS, which is what seems to be used for the graphics and interaction.
2 Likes
Pseudo joyplot imported from Figma!
3 Likes
I did not 
I pasted copied a picture from the web to figma, then traced the path.
That is a smart move!
1 Like
Just a very side question (sorry for that) How did @curran make a column selection harnessing the Vim mode in the VizHub editor?
You can enter that selection mode with CTRL+v, same as in real Vim.
More info here: http://vimcasts.org/episodes/selecting-columns-with-visual-block-mode/
2 Likes
My Homework
Pictorial Stacked Chart
Source: https://datavizproject.com/data-type/pictorial-stacked-chart/
2 Likes
A pseudo cluster analysis chart:
for a reason my visuals are not previewed
Sorry, sometimes the image generation service goes down. It’s back up now and your previews are showing. Very nice work!