Skip to main content
SimilarExport ZIP
100%

making a barchart

✓ Published0🌍 Public
JJIAHAO LAI
Last edited Dec 14, 2022
Created on Dec 14, 2022

This visualization displays the total number of bike rides for various New York City zones as horizontal bars, ranking locations from JFK Airport to TriBeCa/Civic Center. The data is loaded from a CSV file using the `csv` method from d3, with numeric ride counts parsed for scaling. The chart uses `scaleLinear` for the x-axis width and `scaleBand` for the y-axis categorical zone positions, rendering rectangles as SVG elements. The example relies on d3 v5 APIs including `select`, `max`, and the scale functions.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Test Bar chart

This bar chart displays the number of bike trips starting from each station in Jersey City for a selected month, based on the Citi Bike 2020 dataset. It uses a range slider to switch between monthly views. The visualization is built with D3 v5, using `scaleLinear` and `scaleBand` for axes, and `axisLeft` and `axisBottom` for rendering, with data loaded via `csv`.

MMillycc
75% match
Loading thumbnail…

Stylised Bar Chart with React & D3

This stylized bar chart displays the total number of available bikes per hour, aggregated from a CSV file of Vélib’ station data. Built with React and D3 v7, the visualization loads the dataset via `d3.csv`, groups entries with `d3.rollups`, and sorts the results to highlight the top ten busiest hours. The code uses `d3.scaleBand` and `d3.scaleLinear` to position colored rectangles, with SVG axes and labels rendered through custom React components, all styled with the Poppins font.

MManon ROMAIN
73% match
Loading thumbnail…

Making a barchart

A horizontal bar chart displays population figures for major global cities, sorted alphabetically by city name. The visualization uses D3 v5 with SVG rendering to draw steel-blue bars whose widths represent each city's population value. It employs `d3.csv` to load the data, `scaleLinear` and `scaleBand` for positioning, and `axisBottom` with a custom tick formatter that abbreviates numbers using SI prefixes converted from G to B. The chart includes a title and removes extraneous domain lines from the categorical y-axis.

OOliver Wills
73% match
Loading thumbnail…

Interactive Visulization

This interactive visualization shows the number of bike rides, broken down by rideable type, filtered by user type (casual or member), quarter, and year. The chart updates dynamically, rendering a horizontal bar chart for each selected combination. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` to map the categorical and quantitative axes, and renders the bars as SVG `<rect>` elements within a `<g>` transform. A `<title>` element provides tooltips on each bar, while the data is loaded from a CSV file.

SSamir Nandardhane
73% match
Loading thumbnail…

Bar Chart with React & D3

This bar chart displays the top 10 hour-level time slots with the highest average number of available bikes, drawn as horizontal rectangles. It loads CSV data from a GitHub-hosted Velib bike-sharing dataset through D3’s `csv` and aggregates values with `d3.rollups` and `d3.mean`. React manages the component state and renders an SVG, while D3’s `scaleBand` and `scaleLinear` position the bars; axes and marks are defined as reusable React components.

MManon ROMAIN
73% match
Loading thumbnail…

G. Riha Citibike Analysis

This scatter plot reveals the relationship between CitiBike trip counts and the percentage of workers who commute without driving alone, with each circle representing a New York City neighborhood. The visualization uses d3.csv to load the dataset and d3.scaleLinear to map bike trip counts and commute percentages to x- and y-axes, with axes formatted using d3.axisLeft and d3.axisBottom. Circles are rendered as SVG elements with d3.selectAll, and the y-axis is inverted to display higher commuter percentages at the top. The chart includes labeled axes and a title, styled through a separate CSS file.

Ggarrettriha
72% match
Loading thumbnail…

Tax Payers: Occupation Vs Income

This bar chart shows the number of bike trips starting at each station in Jersey City, with a slider to filter by month from January to September. It uses D3 v5 to load the CSV data with `d3.csv`, scale the bars with `scaleLinear` and `scaleBand`, and render the axes with `axisLeft` and `axisBottom`. The SVG is 800 by 900 pixels, with bars styled in steelblue and an interactive range input controlling the displayed month. The x-axis is labeled "station" and the chart title is "Bikers start from."

MMillycc
72% match
Loading thumbnail…

Making a Bar Chart

This example visualizes NYC Air Quality during COVID-19 using a horizontal bar chart, where each bar represents a region’s PM2.5 level, with longer bars indicating higher pollution. The chart loads CSV data with d3.csv, parses the airquality values as numbers, and renders SVG rectangles scaled by d3.scaleLinear and d3.scaleBand. It uses d3.axisLeft and d3.axisBottom to display region labels and a numeric axis, with gridlines and a custom axis title. The bars are styled in lavender with a cornflowerblue background.

Wwaqaschughtai
72% match