Route

100%

✓ Published0🌍 Public

Last edited May 16, 2023

Created on May 16, 2023

This visualization displays the number of rides for different bike types, filtered by member type and season through two dropdown menus. The horizontal bar chart, rendered with SVG in a React component, uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis. Data comes from a CSV file loaded via `d3.csv`, and the interactive dropdowns update the chart by filtering the dataset. The bars include a native SVG `<title>` tooltip on hover to show exact ride counts.

AI-generated description

This visualization is based on the dataset of cocktails collected by alcohol importer and distiller Hotaling & Co. The original dataset was modified to parse out and clean up the ingredients into rows.

The chart can be interactive using the ingredient drop down. The user can enter an ingredient to filter on. The chart will return all of the ingredients included in cocktails containing the selected ingredients.

MIT Licensed

Similar vizzes

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

86% match

Loading thumbnail…

End Station

This bar chart displays the top ten end stations for bike rides, with a dropdown menu to toggle between casual and member riders. The horizontal bars show the number of rides per station, sorted by station name using a band scale. The visualization uses React for the interface, d3.scaleBand and d3.scaleLinear for positioning, and d3.csv to load the ride data from a GitHub gist. SVG rendering and React dropdown menus handle the interactive filtering.

SSamir Nandardhane

81% match

Loading thumbnail…

Bike

This interactive visualization displays bike ride data as an arc diagram, with each arc representing a ride type. Users can filter the data by year and membership type using dropdown menus, which updates the visualization dynamically. The chart is built using Vega-Lite API within a React framework, with Vega and Vega-Lite handling the rendering. Data is loaded from a CSV file using D3’s `csv` function, and the visualization computes quantitative theta values from the ride type field, encoding color by the same nominal attribute.

SSamir Nandardhane

80% match

Loading thumbnail…

Start Station

A horizontal bar chart ranks the ten most popular start stations for a selected member type, casual or member, based on the number of rides. The visualization uses React with D3 v5 scales and SVG rendering, loading data from a CSV via `d3.csv`. A dropdown menu filters the dataset, while `scaleBand` and `scaleLinear` position bars and axes, with tooltips showing ride counts.

SSamir Nandardhane

77% 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

74% 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

74% match

Loading thumbnail…

E23 - Refactoring a Bar Chart

This bar chart shows the number of trips per region, rendered as horizontal bars using SVG within a React component. The code imports `scaleBand` and `scaleLinear` from d3 to map data to pixel coordinates, while React’s `useState` and `useEffect` handle asynchronous CSV loading via d3’s `csv` method. The `AxisBottom`, `AxisLeft`, and `Marks` components are separated for reuse, producing a clean, refactored visualization with a left margin aligned to the region labels.

VVanessa

73% match

Loading thumbnail…

E24 - STYLISED a Bar Chart

This stylized bar chart visualizes regional trip volumes using an SVG-based React interface. It loads a CSV dataset via the `csv` function from D3 v5 and maps the data to horizontal bars, with the y-axis displaying regions and the x-axis showing trips. The example clearly separates concerns across three modular files: `AxisBottom.js`, `AxisLeft.js`, and `Marks.js`, which utilize D3's `scaleBand`, `scaleLinear`, and `format` utilities for scaling and tick formatting. The chart uses a linear scale for the x-axis, with tick labels formatted using a custom two-significant-figure format, and includes a tooltip for each bar.

VVanessa

72% match