My bar chart

100%

✓ Published0🌍 Public

Last edited Jul 22, 2023

Created on Jul 22, 2023

This bar chart visualizes the distribution of traveler counts across four travel classes: Economy, Business, First Class, and Private, with values of 100, 50, 20, and 3 respectively. The chart uses Chart.js version 2.9.4 and renders to an HTML canvas element. The data is hardcoded as arrays in the script, with the chart configured to display a title describing the dataset as "World Wine Production 2018," though the labels suggest travel categories. The legend is hidden, and the chart is styled responsively with a maximum width of 600 pixels.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

My bar chart

This example shows a stacked bar chart comparing the counts of four travel classes: Economy, Business, FirstClass, and Private, with a title labeling the data as “World Wine Production 2018.” The chart is rendered on a canvas element using the Chart.js library, with its `Chart` constructor configuring the chart type as `stacked` and providing the data arrays for labels and values. The visualization sets the legend to hidden and displays only the title, using the canvas’s default styling for a simple, single-dataset presentation.

Ssaipaidipalli

90% match

Loading thumbnail…

Untitled

This example uses Chart.js 2.9.4 to render a static bar chart on a Canvas element. It displays a single dataset of four values—100, 50, 20, and 3—labeled by flight class, including Economy, First Class, Business, and Private. The chart’s title, “People travelling in a flight,” appears above the bars, and the legend is hidden. The code creates the chart by passing a canvas ID and configuration object, specifying the chart type, data labels, and visual options directly in the script.

Ssaipaidipalli

78% match

Loading thumbnail…

Bar chart

This example shows a horizontal bar chart comparing the "population" values of four crews across three categories: State, Stop, and Idle. The visualization displays the data from the provided `data.csv` file, with each bar’s length representing the numeric population value. Using the D3.js library (version 5.11.0), the code employs `scaleTime` for the x-axis and `scaleBand` for the y-axis, along with `axisLeft` and `axisBottom` to render the chart’s axes. The bars are drawn as rectangles with a fixed green fill, and the data is loaded asynchronously via `csv('data.csv')`. The rendering is delivered as an SVG element within an HTML page.

GGeolffrey S Mena

70% match

Loading thumbnail…

[A2] Revenue by Class (Bar Chart)

This bar chart visualizes the total revenue collected from first, second, and third class passengers on the Titanic, revealing that second class generated the least income. The chart is rendered using p5.js, with data loaded from a CSV file via `loadTable`. The `setup()` function creates a full-window canvas, and `draw()` computes cumulative fares per class from the `Pclass` and `Fare` columns, then draws horizontal bars scaled to revenue values along labeled axes. Axis tick marks increment by thousands to indicate revenue amounts.

Cctan13@dons.usfca.edu

69% match

Loading thumbnail…

Bar Chart

This example presents a series of pie charts analyzing hotel booking data from a cleaned.csv file. The first chart displays the average price per year, while the second shows the count of bookings per year. Using D3 v6 with SVG rendering, the code applies d3.pie and d3.arc to generate pie slices, d3.scaleOrdinal with d3.schemeCategory10 for coloring, and d3.group for data aggregation. Hover interactions scale slices and change their fill color.

Kkakumanusreya

69% match

Loading thumbnail…

Bar Chart

This example visualizes hotel booking data from a cleaned CSV file, showing both the average price per year and the booking count per year in two separate pie charts. The code uses D3 version 6 to load the data, group it by year, and compute aggregate values. Each chart uses the d3.pie and d3.arc generators to create slices, with d3.scaleOrdinal and d3.schemeCategory10 for coloring. Interactive hover effects highlight slices by changing their fill color and scale, while legends display the year and corresponding values. The visualization is rendered as SVG elements.

Kkakumanusreya

69% match

Loading thumbnail…

Bar Chart

A bar chart displays population counts for four countries, with horizontal bars ordered by country name and a log-free linear scale. The visualization uses D3 v7’s `csv` loader to parse `data.csv`, `scaleLinear` and `scaleBand` for axes, and `axisBottom` with a custom tick formatter to abbreviate numbers. Rendered as SVG rectangles filled with steelblue, the chart maps population values to bar widths and country names to row positions, with axes and margins computed from the viewport dimensions.

Oorihash

69% match

Loading thumbnail…

Bar Chart I

A basic bar chart visualizes a small fixed dataset of six numeric values, with each bar’s length and label representing its value. The chart uses green horizontal bars with white text, positioned through inline styles. This example, from the “Let’s Make a Bar Chart” tutorial, is built with D3 v3 and an HTML `<div>` per bar instead of SVG. The code employs the `d3.scale.linear` API to map data values to pixel widths, and uses D3’s selection and data-joining methods to create the bars.

MMTClass

69% match