Skip to main content
SimilarExport ZIP
100%

barChart

✓ Published1🌍 Public
Hhollyjpotter
Last edited Feb 9, 2022
Created on Feb 8, 2022
Forked from p5.js example

This example displays a vertical bar chart of carbon intensity data (gCO2/kWh) for 2020, loaded from a CSV file hosted on a GitHub gist. Each bar’s height represents a data value, with categorical labels drawn beneath the bars and a rotated axis title at the bottom left. The visualization is built using the p5.js library, with custom functions `drawTickYAxes` and `drawTickXAxes` that render grid lines and tick marks on the plot. A maximum value from the data drives the y-axis scale, labeled in increments of 50.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

dotPlot

This dot plot visualizes carbon intensity (gCO2/kWh) for 2020 across multiple countries, with each circle representing a data point positioned along the y-axis based on its value. The chart includes labeled axes, tick marks, grid lines, and a rotated axis title indicating the measured metric. The visualization is built using p5.js, loading data from a CSV file via `loadTable()` and rendering circles with the `circle()` function. Data is processed from the `powerData.csv` source, with countries listed on the x-axis and carbon intensity values plotted vertically.

Hhollyjpotter
81% match
Loading thumbnail…

bar chart

This example shows a horizontal bar chart of sales figures per salesperson, with labeled x-axis ticks and y-axis categories. It loads CSV data from a remote gist using `d3.csv`, then renders the visualization as SVG with React components. The chart uses `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the numeric x-axis, and `d3.max` to determine the domain. Grid lines are drawn for each tick value, and bars are positioned and sized using the scales’ range and bandwidth.

JJack Elsey
76% match
Loading thumbnail…

Bar Chart

A bar chart displays categorical data as vertical bars, with height encoding numeric values. The visualization is built with React and rendered as SVG, using D3 v7's `select` and `attr` methods to configure the chart's width and height directly from the SVG element. The data is loaded from an external CSV file, and the chart uses a fixed 960x500 pixel viewport for consistent presentation.

BBenjamin Gorman
76% match
Loading thumbnail…

ICE-6 Bar Graph

This example displays the average carbon emissions of cars by model year as a horizontal bar graph. It uses React hooks to load and filter CSV data from a GitHub gist, then renders SVG rectangles scaled with `d3.scaleBand` and `d3.scaleLinear`. The chart includes custom axes via `d3.axisBottom`-style tick rendering, with red gridlines and a title above the visualization.

Llibramanju
75% match
Loading thumbnail…

boxPlot

This example visualizes a boxplot of CO2 levels (carbon intensity in gCO2/kWh) for European countries in 2020, displaying statistical summaries including minimum, maximum, median, and quartiles. The plot is drawn manually on a 1000x1000 canvas using p5.js, with loadTable() to import the CSV data and custom JavaScript functions for sorting and calculating median values. The visualization includes labeled axes and a title to communicate the distribution of carbon intensity across countries.

Hhollyjpotter
75% match
Loading thumbnail…

Making a barchart

This example shows a horizontal bar chart of tCO2 emissions by scope, with axes labeled and styled using CSS. The chart renders as an SVG, loading data from `data.csv` and using D3 v5’s `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to map values and draw the bars. The React framework is present in the project structure, though the visualization logic is handled imperatively via D3 selections.

Bbertieip
75% match
Loading thumbnail…

Bar Chart

This example shows a bar chart that visualizes numeric values associated with categorical labels from a CSV file. The chart is rendered on an HTML canvas using the Chart.js library, with data fetched from a remote GitHub gist. The code parses the CSV rows, extracts the label and value columns, and configures a bar chart with blue semi-transparent bars and an axis that begins at zero. No other interaction or animation is present.

Ssreesushmav
75% match
Loading thumbnail…

Stylizing Bar Chart

This example shows a horizontal bar chart of the top ten countries by 2020 population, rendered as SVG within a React component. The bars are styled with a teal fill, and both the plot area and labels use a Poppins font, with custom tick colors. The chart reads data from a CSV file provided by the `d3.csv` loader and uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis. The code manually creates axis tick marks and uses a `tickFormat` function with `d3.format` to abbreviate large numbers, converting units from "G" to "B".

Aangelathacker123
75% match