Skip to main content
SimilarExport ZIP
100%

A10_Bar Chart Black Hat

✓ Published1🌍 Public
DDuc Pham
Last edited Apr 15, 2024
Created on Apr 15, 2024
Forked from A4_Bar-chart

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.

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 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
92% match
Loading thumbnail…

A10_BarChart White Hat

This bar chart displays average salaries for various job titles, sourced from a CSV file fetched via `d3.text`. It uses `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, rendering bars as SVG rectangles with steelblue fill. Interactive tooltips appear on mouseover, changing the bar color to orange and showing the job title and salary. The chart includes axis labels, a title, and rotated x-axis tick labels. The code also appends an explanatory paragraph noting the visualization's "White Hat" status due to its clear labeling and complete data presentation.

DDuc Pham
91% 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
84% match
Loading thumbnail…

A4_Bar-chart

This bar chart visualizes average salaries for data science job titles, loaded from a CSV file via `d3.text`. The visualization uses `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis to render the SVG bars. Interactive tooltips appear on mouseover, changing the bar’s fill color to orange and displaying the job title and salary. Axis labels, a chart title, and rotated x-axis text are added using D3’s axis components.

DDuc Pham
83% match
Loading thumbnail…

Fork of A4_Bar-chart

This bar chart visualizes average salaries across different job titles using data from a CSV file loaded via D3.js. It displays the distribution of salaries with vertical bars, where hovering over a bar highlights it in orange and shows a tooltip with the exact salary amount. The visualization uses D3 v6's `scaleBand` and `scaleLinear` for positioning, with axes labeled and rotated for readability. The chart is rendered as an SVG element inside an HTML page, with the data fetched from an external GitHub Gist containing job title and salary pairs.

JJorge Melchor
83% match
Loading thumbnail…

A4_Bar-chart_LogScale

This bar chart visualizes average salaries by job title using a logarithmic y-axis, which makes it easier to compare values across a wide range, from 1 to $1,000,000. The chart is built with D3.js v6, using `d3.scaleBand` for the x-axis and `d3.scaleLog` for the y-axis, with bars colored steelblue that turn orange on hover. Tooltips appear on mouseover, displaying the job title and salary, while the x-axis labels are rotated for readability. Data is loaded from a CSV file containing job titles and salaries, and the visualization is rendered as an SVG element.

DDuc Pham
83% match
Loading thumbnail…

Fork of A4_Bar-chart

This bar chart visualizes average salaries across different job titles, with each bar colored steel blue and turning orange on hover. Tooltips displaying the job title and salary appear when users mouse over bars. The visualization uses D3 v6’s scales, axes, and event handlers to render data fetched from a CSV file. Salaries are parsed from the data source and displayed with a rotated x-axis label, chart title, and axis names.

Ppavan vasamsetti
82% match
Loading thumbnail…

Fork of A4_Bar-chart

This bar chart displays average salaries by job title, with a tooltip showing the exact salary on hover. The visualization uses D3 v6 to fetch a CSV file from a GitHub repository, parse the data, and render an SVG with scaled bars and axes. The code leverages `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`, with mouseover events that change bar color and reveal a tooltip displaying the job title and salary. The chart includes rotated x-axis labels and axis titles for clarity.

Ppavan vasamsetti
82% match