Skip to main content
SimilarExport ZIP
100%

Fork of Stylized Bar Chart

✓ Published0🌍 Public
Bbenpedroscott
Last edited Oct 6, 2021
Created on Sep 27, 2021
Forked from Stylized Bar Chart

This visualization displays the University of Missouri's football statistics from 2010 onward as a horizontal bar chart, plotting either total points or win percentage per season. Built with React and D3.js (specifically d3.scaleBand and d3.scaleLinear), the chart uses an SVG rendering with animated transitions from d3.transition. Users select between the two metrics via a dropdown menu, with tooltips showing exact values. The data comes from a CSV file loaded asynchronously via d3.csv.

AI-generated description

A program that shows the top 10 most populous countries as a bar chart.

Data: United Nations World Population Prospects 2019.

MIT Licensed

Similar vizzes

Loading thumbnail…

Refactored Mizzou

This bar chart displays points scored by Mizzou football across seasons, with animated bars growing horizontally. Built with React and D3 v5, it uses `d3.scaleLinear` for the x-axis, `d3.scaleBand` for categorical seasons, and `d3.axisBottom` and `d3.axisLeft` for labeled ticks. Data loads from a CSV via `useEffect` and `d3.csv`, while `.transition().duration(1500)` animates bar widths. SVG rendering includes full-width gridlines, a title, and axis labels.

Bbenpedroscott
85% match
Loading thumbnail…

Custom Bars v1

This D3 v5 visualization displays the points scored by the Mizzou football team for each season from 2010 to 2020, using a custom bar chart with animated bars that grow over 1.5 seconds. The chart, built within a React framework and rendered as SVG, uses `d3.scaleLinear` and `d3.scaleBand` to map points and season labels. The y-axis labels are styled with a Lato font, and the bars are filled with a golden color. The data is loaded from a remote CSV file with `d3.csv`.

Bbenpedroscott
84% match
Loading thumbnail…

Menus Mizzou Bars v2

This visualization shows the number of points scored by the Mizzou football team by season, with an interactive dropdown to switch between displaying points and games won. The data from `data.csv` is rendered as horizontal bars within an SVG element, using D3 v5 to manage scales, axes, and animated bar width transitions over 1.5 seconds. The interface relies on React and the React Dropdown library for user input, while all chart elements and text styling, including bold Lato font titles, are defined in the included CSS.

Bbenpedroscott
82% match
Loading thumbnail…

Fork of HTML Starter

This visualization presents a grouped bar chart of Champions League team statistics, comparing goals scored, matches played, and wins for each team. The code loads a CSV dataset from a GitHub gist, aggregates the data using d3.rollup and d3.sum, and renders three colored bars per team using SVG rectangles. D3 v7 handles the scales, axes, and legend, with x-axis labels rotated for readability. The chart uses d3.scaleBand for categorical positioning and d3.scaleLinear for the numeric y-axis, providing a clear side-by-side comparison of these metrics.

BBALAJI MANDAVA
74% match
Loading thumbnail…

Fork of Fork of Fork of Rendering Data with React & D3

This visualization displays a horizontal bar chart comparing student marks, using a dataset loaded from a CSV file and limited to the first 10 students. The chart renders as an SVG, with blue bars representing each student’s score on a linear scale, while a band scale positions the student names on the y-axis. The code combines React hooks for state management and data loading with D3 utilities such as `csv`, `scaleBand`, `scaleLinear`, and `max` to compute scales and render tick marks and rectangles.

Kkirangithub23
74% match
Loading thumbnail…

Fork of HTML Starter

This visualization displays bar charts for Champions League team statistics, comparing goals, matches played, and wins. It employs a group bar chart where each team’s metrics are shown side-by-side in steelblue, orange, and green bars. The D3.js library (v7) is used for data parsing, aggregation, and rendering to SVG, with scales and axes built using `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft`. The data is fetched from a CSV URL and aggregated via `d3.rollup`. The SVG renders bars, axes, and a legend within an 800x600 canvas.

66264kusuma@gmail.com
74% match
Loading thumbnail…

Fork of Fork of Stylized Bar Chart

This is a horizontal bar chart of the running total of US states admitted to the Union from 1884 to 2010. The visualization uses React for rendering, with D3.js v5's `scaleLinear` and `scaleBand` functions to map years to bar widths and states to vertical positions. Data comes from a CSV file and is displayed with a tooltip showing the year value on hover. The chart uses a stylized layout with a Poppins font and custom colors.

YYongbobloomington
73% match
Loading thumbnail…

Fork Obope

This example presents an interactive stacked bar chart of university performance metrics, built with React and D3 v6. Users select a sorting methodology (e.g., Teaching, Research, Citations) and order (ascending/descending) from dropdowns, then confirm to re-render the visualization. The chart displays stacked bars for each university, with categories colored and a legend that highlights segments on hover. The axes and gridlines are styled minimally, and the chart supports dynamic re-sorting based on user input.

Oobope@proton.me
73% match