Skip to main content
SimilarExport ZIP
100%

A10 - Black Hat & White Hat Visualization

✓ Published1🌍 Public
DDuc Pham
Last edited Apr 15, 2024
Created on Apr 9, 2024

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

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
78% 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
77% 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
76% 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
76% match
Loading thumbnail…

A10 Black and White Hat Visualization

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.

Nnathanjmuljadi@gmail.com
75% match
Loading thumbnail…

A4 - Introduction to D3

This example introduces D3.js through a collection of four interactive visualizations: a bar chart, a scatter plot, a boxplot, and a strip plot with a logarithmic scale. Each chart uses D3’s core modules—`d3.scaleLinear`, `d3.scaleLog`, `d3.axisBottom`, and `d3.axisLeft`—to map data to pixel coordinates and render SVG elements like `rect`, `circle`, and `line`. The visualizations draw from datasets embedded in the accompanying script files, with the boxplot summarizing distributions via quartile calculations. The code is structured as separate VizHub projects linked from a single HTML page, demonstrating basic chart construction without external data files.

DDuc Pham
74% match
Loading thumbnail…

A11 - Interaction

This example showcases interactive data visualization techniques, including filtering, brushing, zooming, and panning, implemented with HTML, CSS, and JavaScript within the React framework. Two linked visualizations demonstrate these interactions; the primary view, embedded from Vizhub, supports all four operations, while a secondary example further applies the same features. The code leverages standard web technologies and the visualization likely uses D3.js for rendering, though the specific APIs are not detailed in the provided files.

DDuc Pham
74% match
Loading thumbnail…

Data Visualization Project

This example presents a gallery of visualizations, beginning with an embedded Tableau public dashboard and including multiple iframes of D3-based charts such as bar, pie, scatter, tree, and 3D bar graphs hosted on VizHub. The page also references Google Colab and Figma-embedded screenshots. Built with React, the code uses standard HTML, CSS, and JavaScript to lay out these components, with the Tableau Viz API script loading the interactive dashboard and VizHub iframes displaying the individual charts.

Aav.dj.2000@gmail.com
73% match