Stylized Attendance

100%

Stylized Attendance

✓ Published0🌍 Public

Last edited May 30, 2022

Created on May 30, 2022

This bar chart displays attendance counts by year. The graph uses a linear scale for the attendance values and a band scale for the years, with the bars extending from the left axis. Built with React and D3 v5, the visualization renders as SVG, pulling data from a CSV file via the `d3.csv` function. The chart includes custom axes (`AxisBottom`, `AxisLeft`) and rectangular marks (`Marks`) to represent each data point.

AI-generated description

Smiley face implementation with React & D3.

MIT Licensed

Similar vizzes

Loading thumbnail…

Attendance

This example displays a horizontal bar chart of attendance figures by year using React and D3.js. Data is loaded asynchronously from a CSV file via `d3.csv()`. The chart uses `d3.scaleBand()` for the categorical year axis and `d3.scaleLinear()` for the quantitative attendance axis, with magenta gridlines and value labels. SVG rectangles encode each year’s attendance, with a fixed 960×500 canvas and margins for axis labels.

EErick Brandao

88% match

Loading thumbnail…

Refactored Attendance

This example displays attendance counts by year as a horizontal bar chart. The bars, rendered as SVG rectangles, encode attendance values on a linear scale while the y-axis uses a categorical band scale for each year. Built with React and D3 v5, the code separates chart components into modular files, uses `scaleLinear` and `scaleBand` for scales, and fetches data from a CSV file via `d3.csv`. The visualization demonstrates a refactored approach to organizing D3 code within a React framework.

EErick Brandao

86% match

Loading thumbnail…

Stylised bar chart

A stylised bar chart displays population data for various countries, with horizontal bars ranked by value. The visualization uses React state management via a `useData` hook to load CSV data from a gist, while D3 v6 functions `scaleBand`, `scaleLinear`, and `max` handle scaling and layout. SVG rectangles render the bars, with axes generated by custom `AxisBottom` and `AxisLeft` components. Tick labels use D3’s `format` with SI prefixes, and a Poppins font styles the chart.

MmohitPassan

78% match

Loading thumbnail…

Stylized Bar Chart

A stylized bar chart displays event counts over time, with bars rendered as alternating solid blocks and gaps. The visualization uses a React class component with mouse event handlers to enable rectangular region selection, drawing a semi-transparent overlay as users drag. Data comes from the provided `inData` array, which combines actual document counts with randomized values. The chart uses D3 v5 scales (`scaleBand`, `scaleLinear`) for positioning, while axes and marks are custom React components. Hovering over a bar highlights it in orange, and tooltips show formatted dates for each data point.

OOsekovS

78% match

Loading thumbnail…

Stylized Bar Chart

The stylized bar chart displays monthly values from a CSV dataset, with horizontal bars extending rightward from a categorical y-axis of dates. The visualization uses D3 version 5's `scaleLinear` for the x-axis and `scaleBand` for the y-axis, with `axisLeft` and `axisBottom` generating the labels. Rendering as SVG, bars are filled with steelblue and styled using the Poppins font, offering a clean, modern presentation of the temporal data trend.

Mmisferswift

78% match

Loading thumbnail…

Stylized Bar Chart

A stylized bar chart visualizes time-series data, mapping document counts to vertical bars. The chart displays data points over a date range, with the y-axis auto-scaled to the data's extent. Built with React and D3 v5, it uses `scaleTime` and `scaleLinear` for positioning, rendering SVG rectangles as bars. The data comes from a local JavaScript array simulating a time series, with axes created from custom React components rather than D3 axis generators.

OOsekovS

77% match

Loading thumbnail…

Stylized bar chart with React & D3

This stylized bar chart displays the population of 15 countries, with horizontal bars scaled proportionally to their 2020 population estimates and a custom tooltip showing the formatted value on hover. Built with React and D3 v7, the chart uses D3's `scaleBand` for the categorical y-axis, `scaleLinear` for the continuous x-axis, and renders SVG elements via React components for axes and marks. The styling employs a light gray grid and dodgerblue bars, with the data loaded from a remote CSV using D3's `csv` parser and formatted with the `format` function.

Rrvdv

77% match

Loading thumbnail…

Stylized Bar Chart

This interactive visualization displays the cumulative count of cases over time as a horizontal bar chart, showing daily recorded values from March to April 2020. The chart uses React to render SVG elements, with d3.scaleBand for the categorical date axis and d3.scaleLinear for the value axis. Each bar includes a tooltip via SVG title elements, while axes are constructed using d3's tick generation through custom React components. The data comes from a local CSV file, parsed with d3.csv, and styled with a custom Poppins font.

PProger666

77% match