A10 Black and White Hat Visualization

100%

A10 Black and White Hat Visualization

✓ Published0🌍 Public

Last edited Apr 17, 2025

Created on Apr 17, 2025

This side-by-side comparison demonstrates how truncating the y-axis distorts perception of differences in average female height across five countries. The black hat chart starts its y-axis at 62.5 inches, exaggerating small variations, while the white hat chart begins at zero for honest representation. Built with D3 v7, the example uses d3.scaleBand for the categorical x-axis, d3.scaleLinear for both y-axes, and d3.axisLeft with tick formatting to display inch marks. The fabricated dataset is rendered as SVG bar charts with different fill colors to distinguish the misleading and truthful versions.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

A10 White Hat Visualization

This visualization displays a bar chart comparing average female height across six countries, with each bar representing a country and its corresponding height value in inches. The chart uses D3 v7 to create an SVG rendering, employing `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the numeric y-axis. Bars are drawn as SVG rectangles, with value labels positioned above each bar. Axes are generated using `d3.axisBottom` and `d3.axisLeft`, with the y-axis formatted to show inch markers. The chart includes a title and axis labels for clarity.

Nnathanjmuljadi@gmail.com

84% match

Loading thumbnail…

A10 - Black Hat & White Hat Visualization

This example presents contrasting pairs of data visualizations, where a “black hat” version intentionally distorts data through misleading scales and truncated axes, while a “white hat” version corrects these issues for accurate representation. The project showcases four parts, including a redesigned boxplot assignment, and embeds multiple interactive charts within a single HTML page using React. The visualizations are built with D3.js, leveraging its data-binding and SVG rendering capabilities to create both the flawed and corrected charts, with links to each interactive version hosted on VizHub.

DDuc Pham

75% match

Loading thumbnail…

A10_Part 3 Black & White Hat

A bar chart displays average salaries by job title using data fetched from a CSV file, with bars colored steelblue and tooltips that reveal salary amounts on hover. The chart deliberately omits an x-axis, data labels, and a color legend to demonstrate misleading "black hat" visualization techniques. Using D3 v7, the code parses comma-separated text with the `d3.text` method, builds scales with `scaleBand` and `scaleLinear`, and appends SVG rectangles for each data point. An italicized note explains the chart's deceptive design, highlighting how missing contextual information can misrepresent information.

DDuc Pham

75% match

Loading thumbnail…

A10 Black Hat White Hat

This example contrasts a misleading bar chart with a corrected version of the same unemployment data. The good chart uses D3.js (v7) with an SVG rendering to display monthly unemployment rates for 2011, scaling the y-axis from a near-zero baseline and adding an interactive tooltip and an annotation that highlights the significant drop in November. The chart’s axes and labels are styled with the Alegreya Sans font, and the annotation is created using the `d3-annotation` library, with hover effects on bars. The data is loaded from a CSV file.

AAllen Jake Polintan

74% match

Loading thumbnail…

A10_ScatterPlot Black Hat

This scatter plot highlights deceptive visualization techniques by intentionally omitting a title, axis labels, and legend. It maps happiness scores against GDP per capita from a CSV dataset, coloring points by continent using a d3.scaleOrdinal with seven categorical colors. The chart renders circles positioned via d3.scaleLinear scales for x and y axes, with d3.axisLeft for the vertical ticks. A d3-legend ordinal legend is appended but left unlabeled, reinforcing the “Black Hat” approach to mislead viewers.

DDuc Pham

73% match

Loading thumbnail…

A10_Part 4 Black & White Hat

This example displays boxplots for salary distributions across five data science job types. The visualization uses an SVG rendering with D3.js v7, loading salary data from a CSV file hosted on GitHub. It includes interactive tooltips that appear on mouseover, showing the maximum, minimum, and median salary for each job category. The chart applies a black-and-white styling with red highlights during hover interactions, and uses d3.scaleBand and d3.scaleLinear to map the categorical and continuous axes.

DDuc Pham

72% match

Loading thumbnail…

A10_Bar Chart Black Hat

This chart displays average salaries by job title as a bar chart, but deliberately omits the x-axis labels, making it impossible to identify which bar corresponds to which job. The visualization uses D3.js v6 to load CSV data from a GitHub gist and render SVG rectangles in steel blue, with orange hover highlighting showing salary tooltips. A title and axis labels exist, but the missing categorical axis and lack of a legend exemplify a “Black Hat” technique for misleading viewers.

DDuc Pham

71% match

Loading thumbnail…

White hat in D3

This example presents a horizontal bar chart of 2015 global video game sales, with a single bar chart comparing CO2 emissions by country, highlighting China in red. The D3.js (v7) visualization encodes values as bar heights, with axes, data labels, and a title. It uses `d3.scaleBand` for the categorical x-axis, `d3.axisBottom` and `d3.axisLeft` for ticks, and applies hover styling via CSS. The sketch.js file, however, uses Processing to load a CSV and draw a similar chart for game sales, demonstrating a different rendering approach in the same gallery.

KKwasi Acquaye

70% match