Fork of Responsive Bar Chart

Last edited Mar 21, 2024

Created on Mar 21, 2024

This example visualizes currency exchange rates over time as a grouped bar chart. It fetches CSV data from an external file, parses it into rows and columns, and assigns each currency series a random color. The chart is rendered on a canvas using the Chart.js library, with dates as category labels and currency values as the bar heights. The code uses the `fetch` API to load the CSV, splits it into arrays, and builds datasets dynamically before initializing the chart.

AI-generated description

MIT Licensed

Similar vizzes

Fork of Responsive Bar Chart

This responsive bar chart visualizes furniture dataset values using D3 v7, fetching JSON data from a GitHub gist. It renders vertical steel-blue bars with ordinal x-axis labels and a linear y-axis, using margins and scales to map data points to screen coordinates. The chart adapts to its container while maintaining a fixed 600x400 SVG viewport.

76% match

Fork of Fork of Barchart of the restaurant data

This example visualizes the annual gold rate data by rendering a horizontal bar chart where each bar represents a date, with the bar length encoding the gold price in USD. The chart uses D3.js v5 for scales and data processing, while React 16.9 handles the component lifecycle and SVG rendering. The code employs `scaleBand` for the y-axis date categories, `scaleTime` for the x-axis temporal values, and explicitly maps over the data to draw each rectangle. The visualization reads from a CSV file hosted on GitHub and filters the dataset to the first 30 entries, with axes labeled to clarify the date and USD units.

75% match

Fork of Responsive Scatter Plot

This example visualizes global GDP data as a responsive scatter plot using Chart.js, rendering points on a canvas. It shows yearly GDP values fetched from a CSV file hosted on GitHub, with point colors encoding value ranges: orange below 30 trillion, blue between 30 and 60 trillion, and green above 60 trillion. The code parses the CSV with `split` and `parseInt`/`parseFloat`, filters invalid rows, and configures axes labeled "Year" and "Value". The chart uses the `scatter` type, with `backgroundColor` set per data point for categorical coloring.

RRakesh Kumar Chekuri

74% match

Ssridhardubala106@gmail.com

Fork of Responsive Bar Chart

This example displays a horizontal bar chart showing visitors per year for different states, with each bar labeled by its numeric value. It uses D3 v5 to fetch CSV data from a remote gist and render the visualization as an SVG. The code employs `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis, appending rectangles for bars and text elements for labels. The chart highlights the relative visitor counts across states, with the data source directly loaded via `d3.csv`.

73% match

Fork of Simple Bar Chart

This example shows the distribution of products across categories in a furniture dataset, using a bar chart to compare category counts. It fetches CSV data from a remote URL, parses it with `d3.csvParse`, and aggregates counts with `d3.rollup`. The visualization renders bars with `d3.scaleBand` and `d3.scaleLinear`, styled in steelblue, and includes axes via `d3.axisBottom` and `d3.axisLeft`. The SVG is created dynamically with `d3.create` and appended to the document body.

Fork of Fork of Fork of ICE-6 Bar Graph

This example displays a horizontal bar chart comparing monthly basic Amazon costs across different countries, using the first twelve rows of a CSV dataset. The visualization renders SVG elements through React components, with D3 v5 handling data loading via `d3.csv`, scale construction using `scaleBand` and `scaleLinear`, and axis generation through `axisBottom` and `axisLeft`. The chart includes red gridlines with tick labels, country names along the y-axis, and colored rectangles representing costs. Data updates occur after the CSV loads, triggering React state changes that re-render the SVG. The visualization appears within a React app, with D3’s `max` function setting the x-axis domain.

Aajaysonu

Cchamarthisreenivasvarma@gmail.com

Fork of Fork of Fork of Fork of Fork of Loading and Parsing CSV Data

This example demonstrates loading and parsing a CSV dataset of CSS named colors and rendering it as an interactive bar chart using Chart.js within a React application. The visualization aggregates the frequency of each team's colors, displaying the counts as vertical bars colored by the team’s primary color. The chart is rendered on an HTML canvas, with a clean, sky-blue background. The data, sourced from a CSV of NCAA team colors, is parsed and processed in JavaScript, with team names on the x-axis and color counts on the y-axis. The visualization highlights how color usage varies across teams, with bars colored to match each team's primary color.

Cchamarthisreenivasvarma@gmail.com

Fork of Fork of Fork of Fork of Fork of Loading and Parsing CSV Data