Line Chart Project

100%

Line Chart Project

✓ Published2🌍 Public

Last edited Apr 8, 2023

Created on Apr 8, 2023

A line chart depicts high hotel booking rates over time. The visualization uses D3 v5 to render an SVG, employing `scaleTime` and `scaleLinear` for the axes, `axisLeft` and `axisBottom` for ticks, and a `line` generator with `curveBasis` for the smoothed path. Data is loaded from a CSV via the `csv` function and parsed into dates and numbers before rendering.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Line Chart Project

A line chart displays high hotel booking rates over time, with a smooth curve generated using D3 v5's `line` and `curveBasis` functions. The SVG visualization uses `scaleTime` and `scaleLinear` for the axes, with grid lines created by `axisBottom` and `axisLeft`. Data is loaded from a CSV hosted on GitHub, parsed with `csv`, and rendered with custom styling for the axis labels and maroon stroke line path.

Kkakumanusreya

89% match

Loading thumbnail…

Fork of Line Chart Project - Hotel booking that are available

This line chart visualizes hotel booking availability over a period of time, with a smooth curve rendered in yellow on a pink background. Built with D3 v5, the code uses `scaleTime` and `scaleLinear` for the axes, `line` with `curveBasis` for the smoothed path, and `axisBottom` and `axisLeft` for tick marks. The data is loaded from a GitHub gist via `csv` and parsed into dates and numeric values before being drawn as an SVG.

Rrajasrilekkala

88% match

Loading thumbnail…

Area Chart for Hotel Booking - Project

This area chart shows hotel booking closing prices over time, with a smooth curved line filling the space beneath it in blue. The visualization uses a time-scaled x-axis for timestamps and a linear y-axis for closing values, both with labeled axes and a title. Built with D3 v5, the code uses `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `area` with `curveBasis` for the smoothed area path. Data is loaded from a CSV file hosted on GitHub, and the SVG rendering includes gridlines and tick labels.

Rrajasrilekkala

83% match

Loading thumbnail…

Fork of Area Chart for Hotel Booking - Project

This area chart visualizes hotel booking closure rates over time, with a pink background and blue filled area beneath a curved line. It uses D3 v5’s `csv` loader to import timestamp and hotel-close data from a GitHub gist, then employs `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to generate the smooth, filled path. Axes are rendered with `axisLeft` and `axisBottom`, including tick lines and custom labels, while the SVG canvas measures 960 by 500 pixels and is appended to by a single group with specified margins. The chart title appears above the plotting area.

Kkakumanusreya

81% match

Loading thumbnail…

Fork of Line Chart For The hotel data_bhavya

This line chart visualizes the total number of hotel bookings per year, using aggregated data from a hotel bookings CSV file. The chart is rendered as an SVG using D3.js v7, with a band scale for the year axis and a linear scale for the booking counts. The visualization draws a steelblue line path connecting circular data points, and includes labeled axes and a title. The code uses D3’s `d3.group` and `d3.sum` to aggregate the data, and the Poppins font and teal background come from an external stylesheet.

Bbhavyapokuri123@gmail.com

81% match

Loading thumbnail…

bhavya-linechart_ice7

This example shows the number of hotel bookings per year from 2013 to 2020, filtered to only those years, as a line chart with circular point markers. It uses D3 v5’s `csv` loader to fetch the data from a GitHub-hosted CSV, `scalePoint` for the categorical year axis, `scaleLinear` for the count axis, and `line` plus `axisBottom` and `axisLeft` to draw the chart. The SVG is rendered with a steelblue stroke and fill, with a title added as an SVG text element.

Bbhavyapokuri123@gmail.com

79% match

Loading thumbnail…

Line chart

This line chart displays flight charges over a range of years, using a time-scaled x-axis and a linear y-axis. The visualization is rendered as an SVG using D3 v5, with data loaded from an external CSV file. The code employs D3’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` generators to plot the trend. Axis labels and tick marks are configured with custom margins, and the line path is styled with a blue stroke.

SSaiipriiya

77% match

Loading thumbnail…

Fork of Data Visualization - Project 1

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.

Rrajasrilekkala

77% match