marksampras

@marksampras·11 public vizzes

Fork of Gender Distribution Chart

A stacked bar chart shows the gender distribution of students across university modules, with male and female counts represented per module. The visualization includes a radio-button toggle to switch between absolute counts and percentages, animating the bars and y-axis scale accordingly. Built with D3.js v3, it uses d3.layout.stack for stacking, d3.svg.axis for axes, and transitions to update the chart. Data is loaded from a CSV file, and the chart is rendered as an SVG.

May 3, 2021

Loading thumbnail…

Fork of Fork of Gender Distribution Chart

This interactive stacked bar chart displays the gender distribution of students across university course modules, with bars sorted alphabetically by module name. Users can toggle between absolute counts and percentage views via radio buttons, triggering smooth transitions between the two representations. Built with D3.js v3, the visualization uses the stacked layout, ordinal and linear scales, SVG axes, and categorical color encoding, with data loaded from a CSV file. Hover effects highlight individual bars, while a legend identifies the two gender categories.

May 3, 2021

Loading thumbnail…

Fork of Gender Distribution Chart

This example visualizes the gender distribution across university modules, presenting the counts of male and female students as stacked bars for each course. It uses D3.js with an ordinal x-axis and linear y-axis to display the data. The chart supports switching between raw counts and percentage-based views via radio buttons, animating the transitions with `transition()` and `duration()`. Course names are listed vertically on the x-axis, and a legend identifies the gender categories. The visualization reads from a CSV file and employs D3’s stack layout to compute the bar segments.

May 3, 2021

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries, using horizontal bars that extend from the left axis to represent population sizes. The visualization employs React with D3 v5 functions like `scaleBand` and `scaleLinear` for positioning, while rendering as an SVG. The chart includes customized Poppins typography, styled axes with muted tick colors, and a teal fill for the bars. Data comes from the United Nations World Population Prospects 2019, loaded via D3's `csv` function, with tooltips formatting values using D3's `format` to display billions.

Jun 3, 2020

Loading thumbnail…

Stylized Bar Chart

Jun 3, 2020

Loading thumbnail…

Gender Distribution Chart

This chart shows the gender distribution of students across numerous game design and media modules, with stacked bars representing males and females for each course. A radio button toggle switches between absolute counts and percentage-based views, animating the transitions smoothly. The visualization uses D3.js version 3.5.6, leveraging the `d3.layout.stack()` API with dynamic offset switching ("zero" vs. "expand"). The SVG rendering, driven by a CSV data file, sorts modules alphabetically and employs category colors with a custom legend. Hovering highlights individual bars through CSS opacity changes.

May 11, 2020

Loading thumbnail…

Gender Distribution Chart

This stacked bar chart visualizes the gender distribution of students across university modules, with bars representing counts of males and females for each course. Users can toggle between absolute counts and percentage-based views via radio buttons, which recalculates the stack layout with d3.layout.stack and triggers smooth transitions. Built with D3.js version 3.5.6, the chart loads data from a CSV file and renders as SVG, featuring rotated x-axis labels and a color-coded legend to distinguish genders.

May 11, 2020

Loading thumbnail…

Gender Distribution Chart

This chart displays the gender distribution of students across numerous game and media production modules, with each bar representing a module and its segments showing male and female counts. The visualization uses D3.js with a stacked bar layout, giving users a radio-button toggle to switch between absolute counts and percentage-based views. The x-axis lists all module names, and the legend identifies the two gender categories. The chart is rendered as an interactive SVG, and users can inspect the gender breakdown for each module.

May 11, 2020

Loading thumbnail…

Student count for Each department

A scatter plot presents the average female student count against the average male student count for each department, with color encoding for the major category and tooltips revealing the specific module. Data is loaded from a CSV file via d3.csv. The visualization is built using the vega-lite-api, which layers vega-lite specifications and renders with the vega engine. Circle size is fixed, while axis and style configurations improve readability.

May 11, 2020

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries for 2020, sourced from the United Nations World Population Prospects 2019 dataset. Rendered as an SVG using React and D3 v5, the chart maps population values horizontally with a linear scale, while countries are positioned vertically using a band scale. The bars are styled with a distinctive teal fill, and the chart includes custom axes, tick formatting that abbreviates large numbers (e.g., "1.4B"), and interactive tooltips showing exact values. The code leverages `scaleBand`, `scaleLinear`, `max`, and `format` from D3 to build the visualization.

May 8, 2020

Loading thumbnail…

Stylized Bar Chart

This visualization displays the top 10 most populous countries as horizontal bars, with country names on the y-axis and population values on the x-axis. Built with React and D3 v5, it uses `scaleBand` for the categorical axis, `scaleLinear` for the numeric scale, and SVG rectangles for the bars. The data comes from the United Nations World Population Prospects 2019 CSV, filtered to the ten largest entries. Axis components render ticks and labels, while a Poppins font and teal color scheme give the chart its stylized appearance.

May 8, 2020