holtzy / data_to_viz

Leading to the dataviz you need

---

data-to-viz.com

Overview

From Data to Viz.com is a website aiming to help in your chart decision. It classifies most of the chart types based on their input data format. It comes in the form of a decision tree leading to a set of potentially appropriate visualizations to represent your dataset.

Sections

The project is composed by several sections:

• Decision Tree - leads you from your data format to a set of potential graphics.
• Data story - for each data format, an example of data analysis based on real data is performed.
• All graphics - an overview of all graphics presented in the website. A set of explanation and advices is provided for each.
• Caveats - a gallery of comon caveats in dataviz, with explanation and workarounds.

Poster

The decision tree offered in the website are also avilable in a high quality poster. Buy it to support the project!

Feedbacks

From Data to Viz.com is currently in beta version and any feedback is highly encouraged. You can fill an issue on Github, drop us a message on Twitter, or send an email pasting yan.holtz.data with gmail.com.

Acknowledgment

See a complete list of acknowledgment here

data_to_viz's Issues

Some assorted issues on the site

If you'd prefer a separate github issue for each one, let me know and I'll split them up.

When on the homepage, following 3 types of numeric, the bottom one, with the annotation "3D scatter or surface" doesn't have a link associated with it, and no pop-up appears when clicking it.

The following don't show a pop-up, while they do have working links (not an exhaustive list I assume, just the ones I found):
https://www.data-to-viz.com/#pca
https://www.data-to-viz.com/#groupedbarplot
https://www.data-to-viz.com/#stackedbar
https://www.data-to-viz.com/#waffle

In num&cat -> several cat, one num -> nested -> one obs per group, sunburst is mistakenly written as sunburt

Hope this helps, great project!

Idea

https://xdgov.github.io/data-design-standards/components/

caveat: big list

https://twitter.com/storywithdata/status/1384884620194369541

Add some examples from the web to give design inspiration

I need to develop a process that would allow to quickly add some examples to each chart page.

I should just have to update a js object and add a screenshot to make it update. Hard since everrything is done in R Markdown.. 🤔

Awesome site

This isn't really a GitHub issue, but 1) I just want to say how incredible this site is, and how useful it will be for me in my own work, and for some lectures I give on visual display; and 2) there are quite a few minor and unimportant grammatical errors in English--if there was any reason to fix these, I would be happy to assist, if there was some convenient file I could edit and send back to you?

issue with stacking

https://www.icem7.fr/datavisualisation/le-syndrome-de-l-empilement/

Adding title on Sankey (while using R)

Thank you for data to viz website. I am learning Sankey diagram. On this web page : https://www.data-to-viz.com/graph/sankey.html , how can I add title to the first plot? I want to use R as done in this web page. Thanks a lot in advance.

Python examples

Hello,
I would like to help the project adding a section of Python examples. Is it possible or should I fork?

Pie plot code improvement.

Suggested by Cédric Scherer

original ---------------------------------------------------------------------

Libraries

library(tidyverse)
library(hrbrthemes) ## not needed
library(viridis) ## not needed
library(patchwork)

create 3 data frame:

data1 <- data.frame( name=letters[1:5], value=c(17,18,20,22,24) )
data2 <- data.frame( name=letters[1:5], value=c(20,18,21,20,20) )
data3 <- data.frame( name=letters[1:5], value=c(24,23,21,19,18) )

Plot

plot_pie <- function(data, vec){

ggplot(data, aes(x="name", y=value, fill=name)) +
geom_bar(width = 1, stat = "identity") + ## why not geom_col?
coord_polar("y", start=0, direction = -1) +
scale_fill_viridis(discrete = TRUE, direction=-1) + ## ggplto2 has its own viridis scale
geom_text(aes(y = vec, label = rev(name), size=4, color=c( "white", rep("black", 4)))) + ## sizeand color should NOT be listed inside aes(). Plus, colors could be handled dynamically
scale_color_manual(values=c("black", "white")) + ## not used at all
theme_ipsum() + ## just use theme_void?
theme(
legend.position="none",
plot.title = element_text(size=14),
panel.grid = element_blank(),
axis.text = element_blank(),
legend.margin=unit(0, "null")
) +
xlab("") + ## not needed in combination with theme_void(), and if better use xlab(NULL)
ylab("") ## not needed in combination with theme_void(), and if better use ylab(NULL)

}

a <- plot_pie(data1, c(10,35,55,75,93))
b <- plot_pie(data2, c(10,35,53,75,93))
c <- plot_pie(data3, c(10,29,50,75,93))
a + b + c

updated ----------------------------------------------------------------------

Libraries

library(tidyverse)
library(patchwork)

Create 3 data sets:

data1 <- data.frame( name = letters[1:5], value = c(17,18,20,22,24) )
data2 <- data.frame( name = letters[1:5], value = c(20,18,21,20,20) )
data3 <- data.frame( name = letters[1:5], value = c(24,23,21,19,18) )

Plot

plot_pie <- function(data, vec){

retrieve number of slices

n <- nrow(data)

ggplot(data, aes(x = "name", y = value, fill = name)) +
geom_col(width = 1) +
geom_text(
aes(y = vec, label = rev(name)),
## dynamic mapping of colors depending on position -> fill of slice
color = c(rep("black", floor(n / 2)), rep("white", ceiling(n / 2))),
size = 8, fontface = "bold"
) +
coord_polar("y", start = 0, direction = -1) +
scale_fill_viridis_d(end = .9, guide = "none") +
theme_void()
}

a <- plot_pie(data1, c(10,36,56,75,93)) ## adjust label positions
b <- plot_pie(data2, c(9,31,51,71,90)) ## adjust label positions
c <- plot_pie(data3, c(8,28,48,70,93)) ## adjust label positions
a + b + c

Links at the bottom

Nice site!

When clicking on acknowledgement or so at the bottom I get a grey cover on the screen and cannot click on e.g the book links.

Modal content is not scrollable

In the main page, when clicking on a chart type, modal content is not scrollable (due to pointer-events: none), so text is truncated.

.modal-dialog {
    pointer-events: all;
}

or

.portfolio-modal .modal-dialog {
    max-height: unset;
}

Some tooltips are not working

The basic tooltip and the the one with html are not working.

This might be related to this js error spotted in the console:
Uncaught TypeError: Cannot read property 'top' of undefined
at o (agency.min.js:1)

https://www.d3-graph-gallery.com/graph/interactivity_tooltip.html

Cheers,

Package names not written correctly in acknowledgement

TidyR -> tidyr for instance

Are there related resources, for more in-depth info?

I'd love to know if you have any recommendations for getting deeper into this, like books, courses, etc... Do you have anything like that, or recommendations of outside resources? I think they would be a great addition to the project.

[BUG] Barplot href link not going to the barplot page

In the page
https://www.data-to-viz.com/graph/histogram.html

in the "common mistakes" section where the barplot hyperlink in the third bullet point goes back to the histogram page ironically unless that is purposeful.
It should be going to https://www.data-to-viz.com/graph/barplot.html

Provided a picture below

Scroll down not working on data to viz

Hey, first of all, love you website. I always use as a reference. I recommend it to everyone who do data viz. So in the data- to - viz section, the popup scroll down is not working. https://www.data-to-viz.com/#circularpacking

Menu is missing in chart pages

It is very hard to close a pop-up

To close a popup panel, you need to click on a big cross. The issue is, you need to click exactly on black pixels, which are very few. Miss them — and you are redirected to some page, or at best, nothing happens.

Annotation ideas

https://twitter.com/CedScherer/status/1493345985958924291

License type

Please add a LICENSE file to define terms of use. Thanks!

Scrollbar in popup not draggable

Hello,

The scrollbar in a popup is not draggable. If you try to drag the scrollbar by clicking and holding a mouse button, the popup doesn't scroll. On release of the mouse button the popup closes.

Scrolling the popup by using the mousewheel does work.

Tested on Chrome 67.0.3396.99 on Ubuntu 17.10

Broken link in story pages

In the header, it is written a few analytics idea by ... --> does not work

Boxplot explanation are wrong

Some mistake in the boxplot blogpost. See christophe email.

Remove links to flourish tool

Top menu does not always switch to mobile mode

On my iPad the top menu remains in desktop mode so all titles are overlapping. Will have to check if my browser is not out of date, but double check. Since conference people may have iPads, it may be worth fixing before release.
++

Some tooltips are not working

The basic tooltip and the the one with html are not working.

This might be related to this js error spotted in the console:
Uncaught TypeError: Cannot read property 'top' of undefined
at o (agency.min.js:1)

https://www.d3-graph-gallery.com/graph/interactivity_tooltip.html

Cheers,

'Ordered' is a weak term, perhaps time-dependent is better?

I think that any numerical variable has an ordering, otherwise it would be hard to map it to an axis anyway. If a numerical variable has no meaningful ordering, it's more like a categorical variable. I don't know what would be the correct term though. The graphs shown with 'ordered' variables are primarily used with an x-axis that corresponds with time, so perhaps that's a better name for them?

Licensing Information

Great website consolidating web charting libraries and examples of it.
However, the licensing information is also important.
I believe d3js is BSD license, however, R falls under GPL license.
As for the example codes, a lot of them includes additionally third party libraries which may fall under yet another licensing.

Amazing Porftlio Website

Hi Yan, nice meeting you here! I just recently begin my data analysis journey as a recent graduate and thinking about building my own portfolio website.

The project section from your site is definitely what I am looking to add to my site. I am not sure if I can reuse some of your code, so I am here to ask for your consent.

If you have time by any chance would you mind letting me know your decision? Thanks

Link in Treemap page drives to Area Chart

The link in the treemap page (https://www.r-graph-gallery.com/treemap.html) linking to data-to-viz.com directs users to area charts (https://www.data-to-viz.com/graph/area.html) not the treemap page (https://www.data-to-viz.com/graph/treemap.html).

Fix:
Change data-to-viz.com link in the opening paragraph from:
https://www.data-to-viz.com/graph/area.html
to:
https://www.data-to-viz.com/graph/treemap.html

(btw - fantastic resource!)

missing: idea of 2-, 3- n-way frequency tables, mosaic plots

You need to strongly consider adding a category for cross-classified frequency tables, often most usefully displayed in mosaic plots, marimekko charts etc.

library(vcd)
data(HairEyeColor)
mosaic(~Hair + Eye, data=HairEyeColor, shade=TRUE)

List of caveats to add in the collection

• caveat: dendrogram and clusterisation method: see RGGdendextend post (at the end)
• axis label big enough
• histogram is not bar
• what's in your heatmap?
• title doesn't repeat axis
• https://twitter.com/Botanygeek/status/1151752645243219970
• correlation and euclidean dist
• Sometimes a chart is not helpful: like to show one number
• Choropleth map gold tweet: https://twitter.com/karim_douieb/status/1181695687005745153
• https://twitter.com/efernandez/status/1188333336164306944
• https://twitter.com/volayaf/status/1191983395766755329
• https://www.knowablemagazine.org/article/mind/2019/science-data-visualization
• mercatort
• https://coolinfographics.com/dataviz-guides
• https://www.williamrchase.com/slides/assets/player/KeynoteDHTMLPlayer.html#0
• https://twitter.com/wgeary/status/1252636419111165953

Missing file bike.csv

I was trying to make the time-serie graph reported on the site:

https://r-graph-gallery.com/318-custom-dygraphs-time-series-example.html

Which loads the following dataframe:
https://python-graph-gallery.com/wp-content/uploads/bike.csv

But I realized the dataframe bike.csv is not longer present in your site. Is it possible to restore or provide an alternative link?

Overplotting page crashes in firefox

Hey, I have been browsing your cool website, but this page crashes in Firefox (consistently):

https://www.data-to-viz.com/caveat/overplotting.html

It might be those huge embedded images that cause this. It works fine in Chrome, though.

I am using Firefox 60 on Linux Mint.

Edit:
I suddenly see that there is also a cool interactive 3D plot in there. Might be the issue as well, since other pages work fine. Maybe disable that one by default (if it really is the issue), and load in on demand? So that the content is also visible for those that do not think of using another browser.

[BUG] Circular barplot section a href wrong

On this page :

https://www.data-to-viz.com/caveat/circular_bar_yaxis.html

at the line 394 :

https://github.com/holtzy/data_to_viz/blob/master/caveat/circular_bar_yaxis.html

The a href link is local.
Change it to http link.

<a href="http://www.data etc...

small comments

regarding: cut_y_axis.Rmd

• I took out the "bla" at around line 51--not sure if that was intentional or not. Seems like the Tufte quote could use a chart too?

• Also, the "Read more" section to does not really relate to the issue be discussed?

---

regarding: consistency.Rmd

• I would consider making the lines a bit wider, which would also make it easier to connect the two charts. This would also help the yellow line which is almost invisible as I am looking at it on my split screen now.

Put URL in repo description?

I mean at the top near "Leading to the dataviz you need "

Caveat ideas

https://github.com/veltman/principles

Remove/fix dead link to ggplot2-exts

Under R packages on the about page:
Remove/fix the link to http://www.ggplot2-exts.org/gallery/
I don't recommend clicking it.

Add left menu like in python gallery

issue to scroll on Safari

i can't scroll the diagrams pop

up

Hey man , was just checking out your data to viz site really amazing stuff . I was schooled when I saw you’re based at Montpellier. I’m an aspiring data analyst with very little experience but currently undergoing training and I’m starting at Montpelier business school(MSc digital transformation) . I’m trying to build my portfolio here on GitHub so I thought it’d be nice to reach out to you maybe you might have some tips for me to go about building the right portfolio that could land me an internship in the near future in France currently I’m working with Rstudio, very little Excel and just registered for tableau courses on Udemy but I’d like to focus on working on projects . Okay maybe this is too long but I’d be glad to here from you . Have a great weekend . Ciao

URL a href links into current folder.

Hello bro.

I was checking out your website to see if I can include some of the metrics into some of my works.
I found this little thing here. I'll put a gif to explain the stuff.

Because sometimes a GIF is worth a thousand words. :p

If I find the time I'll try and dig

https://github.com/holtzy/data_to_viz/blob/master/story/OneNumOneCat.html#L50

It's this URL here that loops into the same folder rather than returning to the index.

Correct the spelling of rapper everywhere

https://www.data-to-viz.com/#pca doesn't work

The popup page for pca doesn't appear - a broken link or issue with the popup window?

Epic site!!! Thanks!!!

caveat: hidden dual y axis

https://twitter.com/adam_tooze/status/1283355279925616649

Include this GIF somewhere

https://twitter.com/beeonaposy/status/1410409252431306755

Wrong Rmd files

The following Rmd files do not match their corresponding html files. They appear to have been overwritten with an unfinished file about histograms.

caveat/connect_your_dot.Rmd
caveat/rainbow.Rmd
caveat/small_multiple.Rmd

Do not use modals for chart explanation preview. Go to dedicated URL instead.

good input for area is bad to encode value

https://observablehq.com/@mizinov/area-comparison