Skip to main content
SimilarExport ZIP
100%

Fork of Data Visualization - Project 1

✓ Published1🌍 Public
Rrajasrilekkala
Last edited Apr 10, 2023
Created on Apr 8, 2023

This bar chart displays hotel booking rates by country, ranking the top 100 countries based on the percentage of bookings they receive. The visualization uses D3.js v5 within a React component to render an SVG, with customized axes and red-styled gridlines and tick labels. Data is loaded from an external CSV via `d3.csv`, while `scaleBand` and `scaleLinear` map the categorical and numerical values to coordinates.

AI-generated description

This bar chart shows population of the top 10 most revenue atheletes. It also demonstrates customization of D3 axes.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Data Visualization - Project 1

This bar chart displays hotel booking rates by country, using the top 100 records from a CSV dataset. The visualization uses D3’s `scaleBand` and `scaleLinear` to map countries and booking percentages, with red bars on a pink background. Axes are customized manually, with red tick lines and large blue tick labels. React manages the component state, loading data via D3’s `csv` function, and renders the SVG chart with a gray border.

Kkakumanusreya
95% match
Loading thumbnail…

Fork ICE-6 Bar Graph

This bar graph, titled "Hotel Booking System," displays the cost per 24 hours for twelve different places. The visualization uses a horizontal bar chart, with each bar's length representing the cost, and a linear scale for the x-axis. Built with React and D3 v5, the code fetches data from a CSV file, uses `scaleBand` for the y-axis and `scaleLinear` for the x-axis, and renders the chart as an SVG with red gridlines and axis labels.

Pprathyusha-reddy-arch
80% match
Loading thumbnail…

Fork of ICE-6 Bar Graph Prathyusha

This bar chart visualizes hotel booking costs across 12 destinations, using a horizontal layout where bar length encodes the price per 24 hours from a CSV dataset. The React component loads data via D3’s `csv` function, then renders SVG rectangles scaled by `scaleLinear` for cost and `scaleBand` for place names. Grid lines and axis labels are manually generated using D3’s `axisBottom` and custom tick mappings, with red vertical lines marking each cost increment.

Pprathyusha-reddy-arch
80% match
Loading thumbnail…

Fork of Activity 6_Task 1

This visualization presents a horizontal bar chart comparing the populations of the top 30 countries in 2020, with each bar labeled by country name. Built with React and D3 v5, it uses `d3.scaleBand` and `d3.scaleLinear` to map the categorical and quantitative axes, while `d3.format` converts raw values into readable SI units. Custom React components for axes and marks render the SVG rects, and data is loaded asynchronously from a CSV file via `d3.csv`.

Kkaringusathwika@gmail.com
79% match
Loading thumbnail…

Fork of bar chart with react and d3

This fork of a bar chart combines React and D3 to visualize population data for the top ten countries, loaded from a CSV file via a Gist URL. The SVG rendering uses D3's `scaleBand` for the categorical y-axis, `scaleLinear` for the numerical x-axis, and `max` to determine the domain. React manages the data state, displaying a "Loading..." message until the CSV is parsed. Both x-axis gridlines with tick labels and y-axis country labels are drawn using SVG elements within a transformed group.

Mmeghshah612
79% match
Loading thumbnail…

Fork of Fork of Assignment2_Question

This example shows a horizontal bar chart ranking five countries by their 2020 population, with country names on the y-axis and population values on the x-axis. The visualization uses React to render SVG elements, with D3 v5 scales (scaleBand, scaleLinear) and formatting via d3.format to display values in billions. Data is loaded asynchronously from a remote CSV using d3.csv, and each bar includes a native SVG title element for hover tooltips. The chart includes styled axes with blue tick lines and labels.

Bbogasamudramvamsikrishnareddy
79% match
Loading thumbnail…

Fork of Axes with React & D3

This example displays a horizontal bar chart of the top 10 most populous countries, using React for the user interface and D3 v5 for the underlying data handling and SVG rendering. It loads the dataset from a remote CSV file, parses the 2020 population column, and maps each country name to a categorical y-scale while scaling the bar widths with a linear x-scale. The chart includes axis ticks and labels generated via D3’s `scaleBand`, `scaleLinear`, and `max` functions, with React components constructing the SVG elements.

KK V VINITHA
79% match
Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

A bar chart displays the top 10 most populous countries, with bars ordered by country name and sized by 2019 population. The visualization is built using React and D3.js (v5), loading data from a CSV file and rendering SVG elements. It uses `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and `csv` to fetch and parse the data, with React managing the component state and rendering.

MM
79% match