GeorgeVard

@GeorgeVard·12 public vizzes

Fork of Customizing Axes

This bar chart displays the average SPIN score for four playstyles, colored by category. The data is loaded from a CSV file and rendered as horizontal bars using D3 v5’s `scaleLinear` for the x-axis and `scaleBand` for the y-axis. The chart uses `axisBottom` and `axisLeft` for tick marks, with custom tick formatting via `d3.format`. Grid lines, axis labels, and a title are added with SVG styling.

Jun 28, 2021

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.

Jun 28, 2021

Loading thumbnail…

Total Vaccinations by Manufacturer

This bar chart displays total vaccination counts by manufacturer across selected countries as of May 19, 2021, with Pfizer/BioNTech leading at over 235 million doses. The visualization uses d3.scaleLinear and d3.scaleBand to map vaccination values and manufacturer names, while d3.axisBottom and d3.axisLeft generate the axes. Rendered as an SVG with d3.v5, the chart features interactive tooltips that appear on hover, showing exact vaccination numbers via the D3 mouse event handlers. The data comes from a CSV file loaded with d3.csv.

Jun 28, 2021

Loading thumbnail…

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

This grouped bar chart compares average gadget usage across employment statuses and motivations, with each employment category subdivided by reason. The SVG visualization uses d3.scaleBand for both the main and nested categories, d3.scaleLinear for the value axis, and d3.scaleOrdinal with RGB color encoding. Data is loaded via d3.csv from a local file, and axes are rendered using d3.axisLeft and d3.axisBottom. A legend maps the ordinal colors to the employment groups.

Jun 24, 2021

Loading thumbnail…

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

This grouped bar chart displays the unsheltered homeless population in New York across five boroughs and surface/subway locations from 2009 to 2012, with each year color-coded. Built with D3 v5, it uses `scaleBand` for categorical axes and `scaleOrdinal` for the color legend, rendering SVG rectangles per data point. The y-axis scales linearly to the maximum population value, while tooltips or interactivity are absent, focusing instead on static comparison of year-over-year totals from the provided CSV dataset.

Jun 24, 2021

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.

Jun 24, 2021

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.

Jun 24, 2021

Loading thumbnail…

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

This grouped bar chart visualizes average gadget usage across different employment statuses, broken down by reasons for play. The visualization uses a nested bar structure where each employment category contains sub-bars for each play motivation. It employs `d3.scaleBand` for both the main and subgroup positioning, `d3.scaleLinear` for the y-axis, and `d3.scaleOrdinal` for color encoding. The SVG renderer draws axes with `d3.axisLeft` and `d3.axisBottom`, while data is loaded asynchronously from a CSV file using `d3.csv`. A legend maps years to colors, though the data actually represents employment categories rather than homeless population counts.

Jun 24, 2021

Loading thumbnail…

Fork of Bar Chart with Highlighting

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.

Jun 24, 2021

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.

Jun 24, 2021

Loading thumbnail…

Fork of Stylized Bar Chart

This fork of the stylized bar chart displays the top 10 most populous countries, using horizontal bars to encode population values from the United Nations World Population Prospects 2019 dataset. The chart is rendered as an SVG within a React application, leveraging D3 v5's `scaleBand` and `scaleLinear` for axes and mark positions. The code defines custom `AxisBottom`, `AxisLeft`, and `Marks` components to draw the tick lines, labels, and rectangular bars, with a tooltip showing the formatted population value. The visualization uses a clean, minimal aesthetic with a Poppins font and a teal color scheme.

Jun 24, 2021

Loading thumbnail…

Why play

This bar chart shows total COVID-19 vaccination counts by manufacturer across given countries, as of May 19, 2021, with Pfizer/BioNTech leading by a wide margin. The visualization uses D3 v5’s `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to map vaccination numbers to bar lengths along a log-free linear scale, with a custom `.tickFormat` for compact labels. Horizontal bars are rendered as SVG rectangles, and the data is loaded from a CSV file via `d3.csv`.

Jun 24, 2021