A10_Part 4 Black & White Hat

100%

A10_Part 4 Black & White Hat

✓ Published0🌍 Public

Last edited Apr 15, 2024

Created on Apr 15, 2024

Forked from A10_Part 3 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.

AI-generated description

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

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

90% match

Loading thumbnail…

A4_BoxplotPlot

This example visualizes the salary distribution across different job types using boxplots, highlighting the minimum, maximum, median, and quartile ranges for each category. The chart is rendered as an SVG using D3 v7, with interactive hover effects that display the exact max, min, and median values as text annotations. It loads the dataset from an external CSV file containing job titles and salaries, then computes quartiles and draws rectangles, lines, and axes. The code relies on D3 scales like `d3.scaleBand` and `d3.scaleLinear`, along with statistical methods such as `d3.quantile` and `d3.median`.

DDuc Pham

85% 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

85% match

Loading thumbnail…

Final Project Box Plot

This visualization presents box plots comparing salary distributions across the top ten job categories, sorted by median salary in descending order. The chart uses a horizontal layout with a linear scale for salary values and a band scale for job types, rendering each box plot with quartiles, median line, and whiskers. Interactive tooltips appear on hover, highlighting the box in orange and displaying the job type, median, minimum, and maximum salary. The implementation uses D3 v7 APIs (d3.scaleBand, d3.quantile, d3.median) within a React framework, drawing SVG shapes and axes, with data loaded from a CSV file.

DDuc Pham

84% 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

84% match

Loading thumbnail…

Fork of Final Project Bar Chart

This example visualizes the salary distribution of the top 10 job categories, sorted by median salary, using horizontal boxplots rendered in SVG. The visualization uses D3 v7 to compute quartiles, medians, and whiskers from a CSV dataset, with each boxplot showing salary spread via light blue boxes, red median lines, and black whiskers. Interactive tooltips appear on hover, and checkbox controls (though incomplete in the code) allow users to filter which job categories remain visible. The axes use D3’s `scaleBand`, `scaleLinear`, and `axisLeft`/`axisBottom` APIs.

DDuc Pham

82% 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

81% match

Loading thumbnail…

Fork of Final Project Box Plot

This fork of a final project displays a horizontal box plot of salary distributions across ten job categories, sorted by median salary in descending order. The visualization uses D3 v7 to compute quartiles, medians, and whiskers from a CSV dataset, rendering the chart as an SVG. Interactive checkboxes allow users to toggle the visibility of job categories, and hovering over a box highlights it in orange while displaying a tooltip with the job title and salary statistics.

DDuc Pham

81% match