From 2d0228995e0d19a0a6d0e575a0187b97d27d2088 Mon Sep 17 00:00:00 2001 From: Yan Holtz Date: Thu, 20 Jun 2024 14:38:47 +0200 Subject: [PATCH] update declutter.html --- caveat/declutter.Rmd | 12 +- caveat/declutter.html | 2562 ++++++++++++++++++++++++++++--- caveat/small_multiple.Rmd | 2 +- caveat/small_multiple.html | 2854 ++++++++++++++++++++++++++++++++--- caveat/template_caveat.html | 97 +- 5 files changed, 5060 insertions(+), 467 deletions(-) diff --git a/caveat/declutter.Rmd b/caveat/declutter.Rmd index 259dee7..82e0205 100644 --- a/caveat/declutter.Rmd +++ b/caveat/declutter.Rmd @@ -25,7 +25,7 @@ Getting rid of all the unnecessary elements can greatly improve the quality and Here is a good example that takes a cluttered graphic from [viz.wtf](http://viz.wtf) and gets rid of the unnecessary elements. This example comes from the website [Storytelling with data](http://www.storytellingwithdata.com/blog/2017/3/29/declutter-this-graph) by [Cole Nussbaumer Knaflic](http://www.storytellingwithdata.com/about/). -#Initial graphic +# Initial graphic *** The idea of the chart is to show that women tend to begin Christmas shopping earlier than men: @@ -36,7 +36,7 @@ The idea of the chart is to show that women tend to begin Christmas shopping ear
-#Final appearance: +# Final appearance: ***
@@ -48,7 +48,7 @@ The idea of the chart is to show that women tend to begin Christmas shopping ear -#Step by step +# Step by step *** Here are the components you can consider removing when making a chart: @@ -74,7 +74,7 @@ Here is an animation showing the evolution of the previous chart at each step of
-#Going further +# Going further *** - Visit the website [Story Telling with data](http://www.storytellingwithdata.com/) @@ -82,10 +82,6 @@ Here is an animation showing the evolution of the previous chart at each step of - [Data looks better naked](https://www.darkhorseanalytics.com/blog/data-looks-better-naked), by Dark Horse Analytics. -#Comments -*** -Any thoughts on this? Found any mistake? Disagree? Please drop me a word on [twitter](https://twitter.com/R_Graph_Gallery) or in the comment section below: -
diff --git a/caveat/declutter.html b/caveat/declutter.html index 4acc354..6ae740e 100644 --- a/caveat/declutter.html +++ b/caveat/declutter.html @@ -1,270 +1,1928 @@ + + + + + Decluttering your chart + + + + + + + + + + + + + + + +
+
+ +

+

+

Decluttering your chart

+
+
+ A collection of common + dataviz caveats + by Data-to-Viz.com +
+
+

+ + + +
+ + + + + + + + + + + + + - - - - - - - - - + page.setRows(rows); + } + + // The goal of this function is to add as many columns as possible + // starting from left-to-right, when the right most limit is reached + // it tries to add columns from the left as well. + // + // When startBackwards is true columns are added from right-to-left + me.fitColumns = function(startBackwards) { + measurer.calculate(measuresCell); + columns.calculateWidths(measurer.measures); + + if (tableDiv.clientWidth > 0) { + tableDiv.style.opacity = 1; + } + + var visibleColumns = tableDiv.clientWidth <= 0 ? Math.max(columns.min, 1) : 1; + var columnNumber = columns.number; + var paddingCount = 0; + + // track a list of added columns as we build the visible ones to allow us + // to remove columns when they don't fit anymore. + var columnHistory = []; + + var lastTableHeight = 0; + var backwards = startBackwards; + + var tableDivStyle = window.getComputedStyle(tableDiv, null); + var tableDivPadding = parsePadding(tableDivStyle.paddingLeft) + + parsePadding(tableDivStyle.paddingRight); + + var addPaddingCol = false; + var currentWidth = 0; + + while (true) { + columns.setVisibleColumns(columnNumber, visibleColumns, paddingCount); + currentWidth = columns.getWidth(); + + if (tableDiv.clientWidth - tableDivPadding < currentWidth) { + break; + } + + columnHistory.push({ + columnNumber: columnNumber, + visibleColumns: visibleColumns, + paddingCount: paddingCount + }); + + if (columnHistory.length > 100) { + console.error("More than 100 tries to fit columns, aborting"); + break; + } + + if (columns.max !== null && + columns.visible + columns.getPaddingCount() >= columns.max) { + break; + } + + // if we run out of right-columns + if (!backwards && columnNumber + columns.visible >= columns.total) { + // if we started adding right-columns, try adding left-columns + if (!startBackwards && columnNumber > 0) { + backwards = true; + } + else if (columns.min === null || visibleColumns + columns.getPaddingCount() >= columns.min) { + break; + } + else { + paddingCount = paddingCount + 1; + } + } + + // if we run out of left-columns + if (backwards && columnNumber == 0) { + // if we started adding left-columns, try adding right-columns + if (startBackwards && columnNumber + columns.visible < columns.total) { + backwards = false; + } + else if (columns.min === null || visibleColumns + columns.getPaddingCount() >= columns.min) { + break; + } + else { + paddingCount = paddingCount + 1; + } + } + + // when moving backwards try fitting left columns first + if (backwards && columnNumber > 0) { + columnNumber = columnNumber - 1; + } + + if (columnNumber + visibleColumns < columns.total) { + visibleColumns = visibleColumns + 1; + } + } + + var lastRenderableColumn = { + columnNumber: columnNumber, + visibleColumns: visibleColumns, + paddingCount: paddingCount + }; + + if (columnHistory.length > 0) { + lastRenderableColumn = columnHistory[columnHistory.length - 1]; + } + + columns.setVisibleColumns( + lastRenderableColumn.columnNumber, + lastRenderableColumn.visibleColumns, + lastRenderableColumn.paddingCount); + + if (pagedTable.offsetWidth > 0) { + page.setVisiblePages(Math.max(Math.ceil(1.0 * (pagedTable.offsetWidth - 250) / 40), 2)); + } + + registerWidths(); + }; + + me.fit = function(startBackwards) { + me.fitRows(); + me.fitColumns(startBackwards); + } + + me.render = function() { + me.fitColumns(false); + // render header/footer to measure height accurately + renderHeader(); + renderFooter(); + me.fitRows(); + renderBody(); + // re-render footer to match new rows + renderFooter(); + } - + + + + + + + + + - - -
- - - - - - - - - - - - - - - - -

+ + + +

-

Getting rid of all the unnecessary elements can greatly improve the quality and impact of your chart. First, the chart will be cleaner and thus more likely to be read by people. Second, it will allow people to target directly what is important on the chart, and thus to get your point.

-

Here is a good example that takes a cluttered graphic from viz.wtf and gets rid of the unnecessary elements. This example comes from the website Storytelling with data by Cole Nussbaumer Knaflic.

-

Initial graphic

+

Getting rid of all the unnecessary elements can greatly improve the +quality and impact of your chart. First, the chart will be cleaner and +thus more likely to be read by people. Second, it will allow people to +target directly what is important on the chart, and thus to get your +point.

+

Here is a good example that takes a cluttered graphic from viz.wtf and gets rid of the unnecessary +elements. This example comes from the website Storytelling +with data by Cole Nussbaumer +Knaflic.

+
+

Initial graphic

-

The idea of the chart is to show that women tend to begin Christmas shopping earlier than men:

+

The idea of the chart is to show that women tend to begin Christmas +shopping earlier than men:


img


-

Final appearance:

+
+
+

Final appearance:


img


-

Step by step

+
+
+

Step by step

-

Here are the components you can consider removing when making a chart:

+

Here are the components you can consider removing when making a +chart:

  • 3D (always)
  • Color effects for decoration (always)
  • Grid lines (if unnecessary only)
  • Axis
  • Decimals
    • -
  • Play with font and text size: some text is more important than others
    • +
  • Play with font and text size: some text is more important than +others
-

Here is an animation showing the evolution of the previous chart at each step of the improvement:

+

Here is an animation showing the evolution of the previous chart at +each step of the improvement:



img
-The impact of decluttering your graph by Storytelling with data +The +impact of decluttering your graph by Storytelling with data


-

Going further

+
+
+

Going further

-

Comments

-
-

Any thoughts on this? Found any mistake? Disagree? Please drop me a word on twitter or in the comment section below:

- - - - - -
-
- - -
- - - - -  +
+
+
+
+

+ Dataviz decision tree +

+

+ Data To Viz is a + comprehensive classification of chart types organized by + data input format. Get a high-resolution version of our decision + tree delivered to your inbox now! +

+
+ +
+
+
+ High Resolution Poster +
+
+
+
+ +  

A work by Yan Holtz for data-to-viz.com

- +

@@ -274,37 +1932,561 @@

Comments

- +var data = { +"resource": { + "version":"1", + + "macros":[{"function":"__e"}], + "tags":[{"function":"__ogt_1p_data_v2","priority":2,"vtp_isAutoEnabled":true,"vtp_autoCollectExclusionSelectors":["list",["map","exclusionSelector",""]],"vtp_isEnabled":true,"vtp_autoEmailEnabled":true,"vtp_autoPhoneEnabled":false,"vtp_autoAddressEnabled":false,"vtp_isAutoCollectPiiEnabledFlag":false,"tag_id":6},{"function":"__ccd_ga_first","priority":1,"vtp_instanceDestinationId":"UA-79254642-3","tag_id":9},{"function":"__rep","vtp_containerId":"UA-79254642-3","vtp_remoteConfig":["map"],"tag_id":1},{"function":"__zone","vtp_childContainers":["list",["map","publicId","G-LHSDT02JTJ"]],"vtp_enableConfiguration":false,"tag_id":3},{"function":"__ccd_ga_last","priority":0,"vtp_instanceDestinationId":"UA-79254642-3","tag_id":8}], + "predicates":[{"function":"_eq","arg0":["macro",0],"arg1":"gtm.js"},{"function":"_eq","arg0":["macro",0],"arg1":"gtm.init"}], + "rules":[[["if",0],["add",2,3]],[["if",1],["add",0,4,1]]] +}, +"runtime":[ [50,"__ccd_ga_first",[46,"a"],[2,[15,"a"],"gtmOnSuccess",[7]]] + ,[50,"__ccd_ga_last",[46,"a"],[2,[15,"a"],"gtmOnSuccess",[7]]] + ,[50,"__e",[46,"a"],[36,[13,[41,"$0"],[3,"$0",["require","internal.getEventData"]],["$0","event"]]]] + ,[50,"__ogt_1p_data_v2",[46,"a"],[50,"j",[46,"m","n","o"],[22,[20,[16,[15,"n"],"type"],[15,"o"]],[46,[22,[28,[15,"m"]],[46,[3,"m",[8]]]],[22,[28,[16,[15,"m"],[15,"o"]]],[46,[43,[15,"m"],[15,"o"],[16,[15,"n"],"userData"]]]]]],[36,[15,"m"]]],[50,"k",[46,"m","n"],[52,"o",[16,[15,"a"],[15,"m"]]],[41,"p"],[22,[20,[15,"o"],"CSS_SELECTOR"],[46,[3,"p","css_selector"]],[46,[22,[20,[15,"o"],"JS_VAR"],[46,[3,"p","js_variable"]]]]],[36,[8,"selector_type",[15,"p"],"value",[16,[15,"a"],[15,"n"]]]]],[50,"l",[46,"m","n","o","p"],[22,[28,[16,[15,"a"],[15,"p"]]],[46,[36]]],[43,[15,"m"],[15,"n"],["k",[15,"o"],[15,"p"]]]],[22,[28,[17,[15,"a"],"isEnabled"]],[46,[2,[15,"a"],"gtmOnSuccess",[7]],[36]]],[52,"b",[13,[41,"$0"],[3,"$0",["require","internal.getFlags"]],["$0"]]],[52,"c",["require","internal.getDestinationIds"]],[52,"d",["require","internal.getProductSettingsParameter"]],[52,"e",["require","internal.detectUserProvidedData"]],[52,"f",["require","internal.setRemoteConfigParameter"]],[52,"g",["require","internal.registerCcdCallback"]],[52,"h",[30,["c"],[7]]],[52,"i",[8,"enable_code",true]],[22,[17,[15,"a"],"isAutoEnabled"],[46,[53,[52,"m",[7]],[22,[1,[17,[15,"a"],"autoCollectExclusionSelectors"],[17,[17,[15,"a"],"autoCollectExclusionSelectors"],"length"]],[46,[53,[41,"o"],[3,"o",0],[63,[7,"o"],[23,[15,"o"],[17,[17,[15,"a"],"autoCollectExclusionSelectors"],"length"]],[33,[15,"o"],[3,"o",[0,[15,"o"],1]]],[46,[53,[52,"p",[17,[16,[17,[15,"a"],"autoCollectExclusionSelectors"],[15,"o"]],"exclusionSelector"]],[22,[15,"p"],[46,[2,[15,"m"],"push",[7,[15,"p"]]]]]]]]]]],[52,"n",[39,[17,[15,"a"],"isAutoCollectPiiEnabledFlag"],[17,[15,"a"],"autoEmailEnabled"],true]],[43,[15,"i"],"auto_detect",[8,"email",[15,"n"],"phone",[17,[15,"a"],"autoPhoneEnabled"],"address",[17,[15,"a"],"autoAddressEnabled"],"exclude_element_selectors",[15,"m"]]]]]],[22,[17,[15,"a"],"isManualEnabled"],[46,[53,[52,"m",[8]],[22,[17,[15,"a"],"manualEmailEnabled"],[46,["l",[15,"m"],"email","emailType","emailValue"]]],[22,[17,[15,"a"],"manualPhoneEnabled"],[46,["l",[15,"m"],"phone","phoneType","phoneValue"]]],[22,[17,[15,"a"],"manualAddressEnabled"],[46,[53,[52,"n",[8]],["l",[15,"n"],"first_name","firstNameType","firstNameValue"],["l",[15,"n"],"last_name","lastNameType","lastNameValue"],["l",[15,"n"],"street","streetType","streetValue"],["l",[15,"n"],"city","cityType","cityValue"],["l",[15,"n"],"region","regionType","regionValue"],["l",[15,"n"],"country","countryType","countryValue"],["l",[15,"n"],"postal_code","postalCodeType","postalCodeValue"],[43,[15,"m"],"name_and_address",[7,[15,"n"]]]]]],[43,[15,"i"],"selectors",[15,"m"]]]]],[65,"m",[15,"h"],[46,[53,[41,"n"],[3,"n",[15,"i"]],[22,[1,[20,[2,[15,"m"],"indexOf",[7,"G-"]],0],[28,[16,[15,"b"],"enableEuidAutoMode"]]],[46,[53,[52,"q",[8,"enable_code",true,"selectors",[16,[15,"i"],"selectors"]]],[3,"n",[15,"q"]]]]],["f",[15,"m"],"user_data_settings",[15,"n"]],[52,"o",[16,[15,"n"],"auto_detect"]],[22,[28,[15,"o"]],[46,[6]]],[52,"p",[51,"",[7,"q"],[52,"r",[2,[15,"q"],"getMetadata",[7,"user_data_from_automatic"]]],[22,[15,"r"],[46,[36,[15,"r"]]]],[52,"s",["e",[8,"excludeElementSelectors",[16,[15,"o"],"exclude_element_selectors"],"fieldFilters",[8,"email",[16,[15,"o"],"email"],"phone",[16,[15,"o"],"phone"],"address",[16,[15,"o"],"address"]]]]],[52,"t",[1,[15,"s"],[16,[15,"s"],"elements"]]],[52,"u",[8]],[22,[1,[15,"t"],[18,[17,[15,"t"],"length"],0]],[46,[53,[41,"v"],[53,[41,"w"],[3,"w",0],[63,[7,"w"],[23,[15,"w"],[17,[15,"t"],"length"]],[33,[15,"w"],[3,"w",[0,[15,"w"],1]]],[46,[53,[52,"x",[16,[15,"t"],[15,"w"]]],["j",[15,"u"],[15,"x"],"email"],[22,[16,[15,"b"],"enableAutoPiiOnPhoneAndAddress"],[46,["j",[15,"u"],[15,"x"],"phone_number"],[3,"v",["j",[15,"v"],[15,"x"],"first_name"]],[3,"v",["j",[15,"v"],[15,"x"],"last_name"]],[3,"v",["j",[15,"v"],[15,"x"],"country"]],[3,"v",["j",[15,"v"],[15,"x"],"postal_code"]]]]]]]],[22,[1,[15,"v"],[28,[16,[15,"u"],"address"]]],[46,[43,[15,"u"],"address",[15,"v"]]]]]]],[2,[15,"q"],"setMetadata",[7,"user_data_from_automatic",[15,"u"]]],[36,[15,"u"]]]],["g",[15,"m"],[51,"",[7,"q"],[2,[15,"q"],"setMetadata",[7,"user_data_from_automatic_getter",[15,"p"]]]]]]]],[2,[15,"a"],"gtmOnSuccess",[7]]] + +] +,"entities":{ +"__ccd_ga_first":{"2":true,"4":true} +, +"__ccd_ga_last":{"2":true,"4":true} +, +"__e":{"2":true,"4":true} +, +"__ogt_1p_data_v2":{"2":true} -  +} +,"blob":{"1":"1"} +,"permissions":{ +"__ccd_ga_first":{} +, +"__ccd_ga_last":{} +, +"__e":{"read_event_data":{"eventDataAccess":"specific","keyPatterns":["event"]}} +, +"__ogt_1p_data_v2":{"detect_user_provided_data":{"limitDataSources":true,"allowAutoDataSources":true,"allowManualDataSources":false,"allowCodeDataSources":false}} +} -
- + + +  + + + diff --git a/caveat/small_multiple.Rmd b/caveat/small_multiple.Rmd index 21c7197..65684b9 100644 --- a/caveat/small_multiple.Rmd +++ b/caveat/small_multiple.Rmd @@ -12,7 +12,7 @@ output: number_section: FALSE df_print: "paged" code_folding: "hide" - includes: + includes: after_body: footer.html --- diff --git a/caveat/small_multiple.html b/caveat/small_multiple.html index c21da4d..b77b912 100644 --- a/caveat/small_multiple.html +++ b/caveat/small_multiple.html @@ -1,252 +1,2145 @@ + + + + + Visualizing a unique Numeric variable + + + + + + + + + + + + + + - +
+
+ +

+

+

Visualizing a unique Numeric variable

+
+
+ A collection of common + dataviz caveats + by Data-to-Viz.com +
+
+

+ + + +
+ + + + + + + + + + + + + - - - - - - - - - + var pageSeparator = document.createElement("div"); + pageSeparator.setAttribute("class", "pagedtable-index-separator-left"); + pageSeparator.appendChild(document.createTextNode("...")) + pageNumbers.appendChild(pageSeparator); + } + + for (var idxPage = pageRange.start; idxPage < pageRange.end; idxPage++) { + var pageLink = createPageLink(idxPage); + + pageNumbers.appendChild(pageLink); + } + + if (pageRange.last) { + var pageSeparator = document.createElement("div"); + pageSeparator.setAttribute("class", "pagedtable-index-separator-right"); + pageSeparator.appendChild(document.createTextNode("...")) + pageNumbers.appendChild(pageSeparator); + + var pageLink = createPageLink(page.total - 1); + pageNumbers.appendChild(pageLink); + } + + if (data.length > page.rows) footer.appendChild(pageNumbers); + + var previous = document.createElement("a"); + previous.appendChild(document.createTextNode("Previous")); + previous.onclick = function() { + page.setPageNumber(page.number - 1); + renderBody(); + renderFooter(); + triggerOnChange(); + }; + if (data.length > page.rows) footer.appendChild(previous); - + var infoLabel = document.createElement("div"); + infoLabel.setAttribute("class", "pagedtable-info"); + infoLabel.setAttribute("title", getLabelInfo()); + infoLabel.appendChild(document.createTextNode(getLabelInfo())); + footer.appendChild(infoLabel); + + var enabledClass = "pagedtable-index-nav"; + var disabledClass = "pagedtable-index-nav pagedtable-index-nav-disabled"; + previous.setAttribute("class", page.number <= 0 ? disabledClass : enabledClass); + next.setAttribute("class", (page.number + 1) * page.rows >= data.length ? disabledClass : enabledClass); + }; + + var measuresCell = null; + + var renderMeasures = function() { + var measuresTable = document.createElement("table"); + measuresTable.style.visibility = "hidden"; + measuresTable.style.position = "absolute"; + measuresTable.style.whiteSpace = "nowrap"; + measuresTable.style.height = "auto"; + measuresTable.style.width = "auto"; + + var measuresRow = document.createElement("tr"); + measuresTable.appendChild(measuresRow); + + measuresCell = document.createElement("td"); + var sampleString = "ABCDEFGHIJ0123456789"; + measuresCell.appendChild(document.createTextNode(sampleString)); + + measuresRow.appendChild(measuresCell); + + tableDiv.appendChild(measuresTable); + } + + me.init = function() { + tableDiv = document.createElement("div"); + pagedTable.appendChild(tableDiv); + var pagedTableClass = data.length > 0 ? + "pagedtable pagedtable-not-empty" : + "pagedtable pagedtable-empty"; + + if (columns.total == 0 || (columns.emptyNames() && data.length == 0)) { + pagedTableClass = pagedTableClass + " pagedtable-empty-columns"; + } + + tableDiv.setAttribute("class", pagedTableClass); + + renderMeasures(); + measurer.calculate(measuresCell); + columns.calculateWidths(measurer.measures); + + table = document.createElement("table"); + table.setAttribute("cellspacing", "0"); + table.setAttribute("class", "table table-condensed"); + tableDiv.appendChild(table); + + table.appendChild(document.createElement("thead")); + + var footerDiv = document.createElement("div"); + footerDiv.setAttribute("class", "pagedtable-footer"); + tableDiv.appendChild(footerDiv); + + // if the host has not yet provided horizontal space, render hidden + if (tableDiv.clientWidth <= 0) { + tableDiv.style.opacity = "0"; + } + + me.render(); + + // retry seizing columns later if the host has not provided space + function retryFit() { + if (tableDiv.clientWidth <= 0) { + setTimeout(retryFit, 100); + } else { + me.render(); + triggerOnChange(); + } + } + if (tableDiv.clientWidth <= 0) { + retryFit(); + } + }; + + var registerWidths = function() { + columns.subset = columns.subset.map(function(column) { + column.width = columns.widths[column.name].inner; + return column; + }); + }; + + var parsePadding = function(value) { + return parseInt(value) >= 0 ? parseInt(value) : 0; + }; + + me.fixedHeight = function() { + return options.rows.max != null; + } + + me.fitRows = function() { + if (me.fixedHeight()) + return; + + measurer.calculate(measuresCell); + + var rows = options.rows.min !== null ? options.rows.min : 0; + var headerHeight = header !== null && header.offsetHeight > 0 ? header.offsetHeight : 0; + var footerHeight = footer !== null && footer.offsetHeight > 0 ? footer.offsetHeight : 0; + + if (pagedTable.offsetHeight > 0) { + var availableHeight = pagedTable.offsetHeight - headerHeight - footerHeight; + rows = Math.floor((availableHeight) / measurer.measures.height); + } + + rows = options.rows.min !== null ? Math.max(options.rows.min, rows) : rows; + + page.setRows(rows); + } + + // The goal of this function is to add as many columns as possible + // starting from left-to-right, when the right most limit is reached + // it tries to add columns from the left as well. + // + // When startBackwards is true columns are added from right-to-left + me.fitColumns = function(startBackwards) { + measurer.calculate(measuresCell); + columns.calculateWidths(measurer.measures); + + if (tableDiv.clientWidth > 0) { + tableDiv.style.opacity = 1; + } + + var visibleColumns = tableDiv.clientWidth <= 0 ? Math.max(columns.min, 1) : 1; + var columnNumber = columns.number; + var paddingCount = 0; + + // track a list of added columns as we build the visible ones to allow us + // to remove columns when they don't fit anymore. + var columnHistory = []; + + var lastTableHeight = 0; + var backwards = startBackwards; + + var tableDivStyle = window.getComputedStyle(tableDiv, null); + var tableDivPadding = parsePadding(tableDivStyle.paddingLeft) + + parsePadding(tableDivStyle.paddingRight); + + var addPaddingCol = false; + var currentWidth = 0; + + while (true) { + columns.setVisibleColumns(columnNumber, visibleColumns, paddingCount); + currentWidth = columns.getWidth(); + + if (tableDiv.clientWidth - tableDivPadding < currentWidth) { + break; + } + + columnHistory.push({ + columnNumber: columnNumber, + visibleColumns: visibleColumns, + paddingCount: paddingCount + }); + + if (columnHistory.length > 100) { + console.error("More than 100 tries to fit columns, aborting"); + break; + } + + if (columns.max !== null && + columns.visible + columns.getPaddingCount() >= columns.max) { + break; + } + + // if we run out of right-columns + if (!backwards && columnNumber + columns.visible >= columns.total) { + // if we started adding right-columns, try adding left-columns + if (!startBackwards && columnNumber > 0) { + backwards = true; + } + else if (columns.min === null || visibleColumns + columns.getPaddingCount() >= columns.min) { + break; + } + else { + paddingCount = paddingCount + 1; + } + } + + // if we run out of left-columns + if (backwards && columnNumber == 0) { + // if we started adding left-columns, try adding right-columns + if (startBackwards && columnNumber + columns.visible < columns.total) { + backwards = false; + } + else if (columns.min === null || visibleColumns + columns.getPaddingCount() >= columns.min) { + break; + } + else { + paddingCount = paddingCount + 1; + } + } + + // when moving backwards try fitting left columns first + if (backwards && columnNumber > 0) { + columnNumber = columnNumber - 1; + } + + if (columnNumber + visibleColumns < columns.total) { + visibleColumns = visibleColumns + 1; + } + } + + var lastRenderableColumn = { + columnNumber: columnNumber, + visibleColumns: visibleColumns, + paddingCount: paddingCount + }; + + if (columnHistory.length > 0) { + lastRenderableColumn = columnHistory[columnHistory.length - 1]; + } + + columns.setVisibleColumns( + lastRenderableColumn.columnNumber, + lastRenderableColumn.visibleColumns, + lastRenderableColumn.paddingCount); + + if (pagedTable.offsetWidth > 0) { + page.setVisiblePages(Math.max(Math.ceil(1.0 * (pagedTable.offsetWidth - 250) / 40), 2)); + } + + registerWidths(); + }; + + me.fit = function(startBackwards) { + me.fitRows(); + me.fitColumns(startBackwards); + } + + me.render = function() { + me.fitColumns(false); + + // render header/footer to measure height accurately + renderHeader(); + renderFooter(); + + me.fitRows(); + renderBody(); + + // re-render footer to match new rows + renderFooter(); + } + + var resizeLastWidth = -1; + var resizeLastHeight = -1; + var resizeNewWidth = -1; + var resizeNewHeight = -1; + var resizePending = false; + + me.resize = function(newWidth, newHeight) { + + function resizeDelayed() { + resizePending = false; + + if ( + (resizeNewWidth !== resizeLastWidth) || + (!me.fixedHeight() && resizeNewHeight !== resizeLastHeight) + ) { + resizeLastWidth = resizeNewWidth; + resizeLastHeight = resizeNewHeight; + + setTimeout(resizeDelayed, 200); + resizePending = true; + } else { + me.render(); + triggerOnChange(); + + resizeLastWidth = -1; + resizeLastHeight = -1; + } + } + + resizeNewWidth = newWidth; + resizeNewHeight = newHeight; + + if (!resizePending) resizeDelayed(); + }; +}; + +var PagedTableDoc; +(function (PagedTableDoc) { + var allPagedTables = []; + + PagedTableDoc.initAll = function() { + allPagedTables = []; + + var pagedTables = [].slice.call(document.querySelectorAll('[data-pagedtable="false"],[data-pagedtable=""]')); + pagedTables.forEach(function(pagedTable, idx) { + pagedTable.setAttribute("data-pagedtable", "true"); + pagedTable.setAttribute("pagedtable-page", 0); + pagedTable.setAttribute("class", "pagedtable-wrapper"); + + var pagedTableInstance = new PagedTable(pagedTable); + pagedTableInstance.init(); + + allPagedTables.push(pagedTableInstance); + }); + }; + + PagedTableDoc.resizeAll = function() { + allPagedTables.forEach(function(pagedTable) { + pagedTable.render(); + }); + }; + + window.addEventListener("resize", PagedTableDoc.resizeAll); + + return PagedTableDoc; +})(PagedTableDoc || (PagedTableDoc = {})); + +window.onload = function() { + PagedTableDoc.initAll(); +}; + + + - - - - + + + + + + + + + - - -
- - - - - - - - - - - - - - - - -

+ + + +

-




This document gives a few suggestions to analyse a dataset composed by a unique numeric variable.
It considers the night price of about 10,000 Airbnb appartements on the French Riviera in France.
This example dataset has been downloaded from the Airbnb website and is available on this Github repository. Basically it looks like the table beside.

+




This document gives a few suggestions to analyse a +dataset composed by a unique numeric variable.
It considers the +night price of about 10,000 Airbnb +appartements on the French Riviera in France.
This example dataset +has been downloaded from the Airbnb website and +is available on this Github +repository. Basically it looks like the table beside.

-
# Libraries
-library(tidyverse)
-library(hrbrthemes)
-library(kableExtra)
-options(knitr.table.format = "html")
-
-# Load dataset from github
-data <- read.table("https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/1_OneNum.csv", header=TRUE)
-
-# show data
-data %>% head(6) %>% kable() %>%
-  kable_styling(bootstrap_options = "striped", full_width = F)
+
# Libraries
+library(tidyverse)
+library(hrbrthemes)
+library(kableExtra)
+options(knitr.table.format = "html")
+
+# Load dataset from github
+data <- read.table("https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/1_OneNum.csv", header=TRUE)
+
+# show data
+data %>% head(6) %>% kable() %>%
+  kable_styling(bootstrap_options = "striped", full_width = F)
@@ -290,42 +2183,14 @@
-

Histogram

-
-
- - - - - -
-
- - -
- - - - -  +

#Histogram ***

+
 

A work by Yan Holtz for data-to-viz.com

- +

@@ -335,37 +2200,562 @@

Histogram

- +var data = { +"resource": { + "version":"1", + + "macros":[{"function":"__e"}], + "tags":[{"function":"__ogt_1p_data_v2","priority":2,"vtp_isAutoEnabled":true,"vtp_autoCollectExclusionSelectors":["list",["map","exclusionSelector",""]],"vtp_isEnabled":true,"vtp_autoEmailEnabled":true,"vtp_autoPhoneEnabled":false,"vtp_autoAddressEnabled":false,"vtp_isAutoCollectPiiEnabledFlag":false,"tag_id":6},{"function":"__ccd_ga_first","priority":1,"vtp_instanceDestinationId":"UA-79254642-3","tag_id":9},{"function":"__rep","vtp_containerId":"UA-79254642-3","vtp_remoteConfig":["map"],"tag_id":1},{"function":"__zone","vtp_childContainers":["list",["map","publicId","G-LHSDT02JTJ"]],"vtp_enableConfiguration":false,"tag_id":3},{"function":"__ccd_ga_last","priority":0,"vtp_instanceDestinationId":"UA-79254642-3","tag_id":8}], + "predicates":[{"function":"_eq","arg0":["macro",0],"arg1":"gtm.js"},{"function":"_eq","arg0":["macro",0],"arg1":"gtm.init"}], + "rules":[[["if",0],["add",2,3]],[["if",1],["add",0,4,1]]] +}, +"runtime":[ [50,"__ccd_ga_first",[46,"a"],[2,[15,"a"],"gtmOnSuccess",[7]]] + ,[50,"__ccd_ga_last",[46,"a"],[2,[15,"a"],"gtmOnSuccess",[7]]] + ,[50,"__e",[46,"a"],[36,[13,[41,"$0"],[3,"$0",["require","internal.getEventData"]],["$0","event"]]]] + ,[50,"__ogt_1p_data_v2",[46,"a"],[50,"j",[46,"m","n","o"],[22,[20,[16,[15,"n"],"type"],[15,"o"]],[46,[22,[28,[15,"m"]],[46,[3,"m",[8]]]],[22,[28,[16,[15,"m"],[15,"o"]]],[46,[43,[15,"m"],[15,"o"],[16,[15,"n"],"userData"]]]]]],[36,[15,"m"]]],[50,"k",[46,"m","n"],[52,"o",[16,[15,"a"],[15,"m"]]],[41,"p"],[22,[20,[15,"o"],"CSS_SELECTOR"],[46,[3,"p","css_selector"]],[46,[22,[20,[15,"o"],"JS_VAR"],[46,[3,"p","js_variable"]]]]],[36,[8,"selector_type",[15,"p"],"value",[16,[15,"a"],[15,"n"]]]]],[50,"l",[46,"m","n","o","p"],[22,[28,[16,[15,"a"],[15,"p"]]],[46,[36]]],[43,[15,"m"],[15,"n"],["k",[15,"o"],[15,"p"]]]],[22,[28,[17,[15,"a"],"isEnabled"]],[46,[2,[15,"a"],"gtmOnSuccess",[7]],[36]]],[52,"b",[13,[41,"$0"],[3,"$0",["require","internal.getFlags"]],["$0"]]],[52,"c",["require","internal.getDestinationIds"]],[52,"d",["require","internal.getProductSettingsParameter"]],[52,"e",["require","internal.detectUserProvidedData"]],[52,"f",["require","internal.setRemoteConfigParameter"]],[52,"g",["require","internal.registerCcdCallback"]],[52,"h",[30,["c"],[7]]],[52,"i",[8,"enable_code",true]],[22,[17,[15,"a"],"isAutoEnabled"],[46,[53,[52,"m",[7]],[22,[1,[17,[15,"a"],"autoCollectExclusionSelectors"],[17,[17,[15,"a"],"autoCollectExclusionSelectors"],"length"]],[46,[53,[41,"o"],[3,"o",0],[63,[7,"o"],[23,[15,"o"],[17,[17,[15,"a"],"autoCollectExclusionSelectors"],"length"]],[33,[15,"o"],[3,"o",[0,[15,"o"],1]]],[46,[53,[52,"p",[17,[16,[17,[15,"a"],"autoCollectExclusionSelectors"],[15,"o"]],"exclusionSelector"]],[22,[15,"p"],[46,[2,[15,"m"],"push",[7,[15,"p"]]]]]]]]]]],[52,"n",[39,[17,[15,"a"],"isAutoCollectPiiEnabledFlag"],[17,[15,"a"],"autoEmailEnabled"],true]],[43,[15,"i"],"auto_detect",[8,"email",[15,"n"],"phone",[17,[15,"a"],"autoPhoneEnabled"],"address",[17,[15,"a"],"autoAddressEnabled"],"exclude_element_selectors",[15,"m"]]]]]],[22,[17,[15,"a"],"isManualEnabled"],[46,[53,[52,"m",[8]],[22,[17,[15,"a"],"manualEmailEnabled"],[46,["l",[15,"m"],"email","emailType","emailValue"]]],[22,[17,[15,"a"],"manualPhoneEnabled"],[46,["l",[15,"m"],"phone","phoneType","phoneValue"]]],[22,[17,[15,"a"],"manualAddressEnabled"],[46,[53,[52,"n",[8]],["l",[15,"n"],"first_name","firstNameType","firstNameValue"],["l",[15,"n"],"last_name","lastNameType","lastNameValue"],["l",[15,"n"],"street","streetType","streetValue"],["l",[15,"n"],"city","cityType","cityValue"],["l",[15,"n"],"region","regionType","regionValue"],["l",[15,"n"],"country","countryType","countryValue"],["l",[15,"n"],"postal_code","postalCodeType","postalCodeValue"],[43,[15,"m"],"name_and_address",[7,[15,"n"]]]]]],[43,[15,"i"],"selectors",[15,"m"]]]]],[65,"m",[15,"h"],[46,[53,[41,"n"],[3,"n",[15,"i"]],[22,[1,[20,[2,[15,"m"],"indexOf",[7,"G-"]],0],[28,[16,[15,"b"],"enableEuidAutoMode"]]],[46,[53,[52,"q",[8,"enable_code",true,"selectors",[16,[15,"i"],"selectors"]]],[3,"n",[15,"q"]]]]],["f",[15,"m"],"user_data_settings",[15,"n"]],[52,"o",[16,[15,"n"],"auto_detect"]],[22,[28,[15,"o"]],[46,[6]]],[52,"p",[51,"",[7,"q"],[52,"r",[2,[15,"q"],"getMetadata",[7,"user_data_from_automatic"]]],[22,[15,"r"],[46,[36,[15,"r"]]]],[52,"s",["e",[8,"excludeElementSelectors",[16,[15,"o"],"exclude_element_selectors"],"fieldFilters",[8,"email",[16,[15,"o"],"email"],"phone",[16,[15,"o"],"phone"],"address",[16,[15,"o"],"address"]]]]],[52,"t",[1,[15,"s"],[16,[15,"s"],"elements"]]],[52,"u",[8]],[22,[1,[15,"t"],[18,[17,[15,"t"],"length"],0]],[46,[53,[41,"v"],[53,[41,"w"],[3,"w",0],[63,[7,"w"],[23,[15,"w"],[17,[15,"t"],"length"]],[33,[15,"w"],[3,"w",[0,[15,"w"],1]]],[46,[53,[52,"x",[16,[15,"t"],[15,"w"]]],["j",[15,"u"],[15,"x"],"email"],[22,[16,[15,"b"],"enableAutoPiiOnPhoneAndAddress"],[46,["j",[15,"u"],[15,"x"],"phone_number"],[3,"v",["j",[15,"v"],[15,"x"],"first_name"]],[3,"v",["j",[15,"v"],[15,"x"],"last_name"]],[3,"v",["j",[15,"v"],[15,"x"],"country"]],[3,"v",["j",[15,"v"],[15,"x"],"postal_code"]]]]]]]],[22,[1,[15,"v"],[28,[16,[15,"u"],"address"]]],[46,[43,[15,"u"],"address",[15,"v"]]]]]]],[2,[15,"q"],"setMetadata",[7,"user_data_from_automatic",[15,"u"]]],[36,[15,"u"]]]],["g",[15,"m"],[51,"",[7,"q"],[2,[15,"q"],"setMetadata",[7,"user_data_from_automatic_getter",[15,"p"]]]]]]]],[2,[15,"a"],"gtmOnSuccess",[7]]] + +] +,"entities":{ +"__ccd_ga_first":{"2":true,"4":true} +, +"__ccd_ga_last":{"2":true,"4":true} +, +"__e":{"2":true,"4":true} +, +"__ogt_1p_data_v2":{"2":true} -  +} +,"blob":{"1":"1"} +,"permissions":{ +"__ccd_ga_first":{} +, +"__ccd_ga_last":{} +, +"__e":{"read_event_data":{"eventDataAccess":"specific","keyPatterns":["event"]}} +, +"__ogt_1p_data_v2":{"detect_user_provided_data":{"limitDataSources":true,"allowAutoDataSources":true,"allowManualDataSources":false,"allowCodeDataSources":false}} +} - - + + + +  + + + diff --git a/caveat/template_caveat.html b/caveat/template_caveat.html index eac472b..5dfbe3e 100644 --- a/caveat/template_caveat.html +++ b/caveat/template_caveat.html @@ -22,14 +22,20 @@ content="Data,Dataviz,Datavisualization,Plot,Chart,Graph,R,Python,D3,Learning,Caveat,Pitfall,Mistake,Classification" /> - + - + $date$ $endif$ $if(toc_float)$ $else$ $if(toc)$
$toc$
- $endif$ $endif$ $body$ - - - -
-
- - -
- - $for(include-after)$ $include-after$ $endfor$ $if(theme)$ - $if(toc_float)$ + $endif$ $endif$ $body$ $if(theme)$ $if(toc_float)$ $endif$ + +
+
+
+

+ Dataviz decision tree +

+

+ Data To Viz is a + comprehensive classification of chart types organized by + data input format. Get a high-resolution version of our decision + tree delivered to your inbox now! +

+
+ +
+
+
+ High Resolution Poster +
+
+
+
+ + $for(include-after)$ $include-after$ $endfor$