Fork of Bar Chart with Highlighting

100%

Fork of Bar Chart with Highlighting

✓ Published0🌍 Public

Last edited Jun 24, 2021

Created on Jun 24, 2021

This bar chart visualizes survey responses about motivations for playing video games, with average scores for generalized anxiety disorder assessment grouped by gender and reason. It uses d3.scaleLinear for the x-axis and d3.scaleBand for the y-axis, rendering SVG rectangles with colors assigned based on score thresholds. Interactive highlighting is implemented through mouseover and mouseout events, which adjust bar opacity and display a tooltip showing the data values. The chart is built with d3.csv to load the data.csv file and includes axes generated via d3.axisLeft and d3.axisBottom.

AI-generated description

This is my code after following a video tutorial by Curran Kelleher.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Bar Graph - New York Homeless Population (2009-2012)

This visualization displays GAD-7 scores (a measure of anxiety) grouped by reason for playing games and gender, using a nested bar chart that compares average scores across four motivational categories. The bars are color-coded by gender (male, female, other) and positioned side-by-side within each reason group. The code uses D3 v5’s `csv`, `scaleLinear`, `scaleBand`, and `scaleOrdinal` to parse the data from `data.csv` and render SVG rectangles with axes. The rendering is entirely SVG-based, with a title and axis labels added as text elements.

GGeorgeVard

82% match

Loading thumbnail…

Fork of Customizing Axes

This bar chart visualizes survey responses about why people play games, with average scores for categories like having fun, improving, winning, and all of them. The data comes from a CSV file loaded using `d3.csv`. The chart customizes D3 axes by removing domain lines, styling tick labels with CSS, and formatting tick values with `d3.format`. It uses `d3.scaleLinear` and `d3.scaleBand` for positioning, with `d3.axisBottom` and `d3.axisLeft` for rendering. Population data from the United Nations is referenced in the README but not used in the chart itself.

GGeorgeVard

80% match

Loading thumbnail…

WORK

The visualization displays average GAD-7 scores by employment status and reason for playing games, with each employment category further divided into gender-based sub-bars using a grouped bar chart. It shows the complete dataset without aggregation, rendering all 16 data points from the CSV file. The implementation uses d3.csv for data loading, scaleBand for both the primary and nested categorical scales, scaleOrdinal with explicit RGB color values for gender encoding, and scaleLinear for the y-axis. Axes are rendered with d3.axisLeft and d3.axisBottom, while SVG rectangles draw the bars.

GGeorgeVard

79% match

Loading thumbnail…

Fork of d3.js learning

This stacked bar chart visualizes survey data on gadget usage, showing how different work statuses (such as Employed and School Student) rate various motivations like "Winning" and "Having Fun." The chart uses d3.layout.stack to layer series representing each motivation, with d3.scale.ordinal and d3.svg.axis handling the x and y axes. SVG rectangles render each segment, and a tooltip displays the average gadget value on mouseover. A legend at the right identifies the series, with data from dataset.csv.

GGeorgeVard

77% match

Loading thumbnail…

Fork of Bar Chart - Project

This bar chart visualization displays the global sales of video games by genre, using data loaded from a CSV file. The chart uses D3 v6 scales (`scaleBand`, `scaleLinear`) and axes (`axisBottom`, `axisLeft`) to render the bars, which are colored steel blue. It includes interactive hover effects, where bars transition to orange on mouseover and return to steel blue on mouseout, with the color change animated over 250 milliseconds using D3's transition API.

Rrajasrilekkala

76% match

Loading thumbnail…

Fork of Exploring survey data interactively - y-axis

This interactive bar chart explores survey data by grouping respondents by their academic subject preference on the x-axis while a dropdown menu selects the y-axis variable, such as average height or stress levels. The visualization uses d3.scaleBand and d3.scaleLinear to map the data, and a d3.select form element triggers a `selectionChanged` handler that updates the axis and bar heights using the general update pattern. Data is loaded from a remote JSON source and processed with d3.nest, d3.mean, and d3.sum to aggregate values per preference group.

DDhiva21

76% match

Loading thumbnail…

Vedio Games Bar Chart

This example visualizes video game data as a bar chart, with bars rendered in blue that highlight yellow on hover. The SVG chart is built using D3 version 6, with data loaded from a CSV file via `d3.csvParse`. The code defines scales and axes in the script, though the specific axis and bar positioning setup is incomplete. The implementation uses `d3.select` and `svg.append` to create the chart structure, and includes tooltip and axis placeholders. The static bar sizing is set to 500 by 100 pixels.

RRED98310

76% match

Loading thumbnail…

Fork of Bar Chart

This bar chart visualizes global video game sales by genre, from Action’s 563 million units to Strategy’s 23 million. Built with D3 v6, it uses `scaleBand` for the categorical x-axis and `scaleLinear` for the numeric y-axis, drawing SVG rectangles from CSV data. Interactive hover effects transition bars from steelblue to orange, and mouseout reverts them via `transition.attr` over 250 milliseconds. Axis labels and titles are appended as SVG text elements.

AAkrutiKhurana2103

75% match