Skip to main content
SimilarExport ZIP
100%

bhavya-linechart_ice7

✓ Published0🌍 Public
Bbhavyapokuri123@gmail.com
Last edited Mar 28, 2024
Created on Mar 28, 2024

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.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

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
85% match
Loading thumbnail…

bhavya_ice6

This scatter plot visualizes yearly hotel bookings across different states, with years on the x-axis and booking counts on the y-axis. The D3 v6 code employs `d3.csv` to load remote data, `d3.scaleLinear` and `d3.extent` for scales, and `d3.axisBottom`/`d3.axisLeft` for axes. Blue circles represent data points, and mouseover interactions reveal a CSS-styled tooltip showing state, year, and booking count. The SVG render fills the browser window dynamically via `window.innerWidth` and `window.innerHeight`.

Bbhavyapokuri123@gmail.com
82% match
Loading thumbnail…

area chart_bhavya

This area chart displays the yearly average number of hotel bookings, using a light blue-green filled area with a darker stroke to emphasize the trend over time. The visualization is built with D3 v5, using `d3.scaleBand` for the categorical x-axis of years, `d3.scaleLinear` for the y-axis of booking counts, and the `d3.area()` generator to create the filled path. Data is loaded from a CSV file hosted on GitHub, and the SVG rendering includes labeled axes and a title, with the area’s base anchored at the bottom of the chart.

Bbhavyapokuri123@gmail.com
81% match
Loading thumbnail…

bhavya

This visualization shows the total number of hotel bookings aggregated by state, displayed as a bar chart with a categorical color legend. It uses d3.csv to load data from a GitHub-hosted CSV file, then d3.rollup to sum bookings per state. The chart employs d3.scaleBand for the x-axis, d3.scaleLinear for the y-axis, and d3.scaleOrdinal with d3.schemeCategory10 for bar colors, with axes rendered using d3.axisBottom and d3.axisLeft.

Bbhavyapokuri123@gmail.com
79% match
Loading thumbnail…

Line Chart Project

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.

Rrajasrilekkala
79% match
Loading thumbnail…

Fork of ICE 7 Line Chart

This visualization displays the annual number of tourists visiting from 2010 to 2019 using a line chart. The x-axis maps years on a time scale, while the y-axis uses a linear scale for visitor counts, with grid lines and clearly labeled axes. The chart is built with D3 v5, using `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` to generate the SVG path. Data is loaded from a remote CSV file, with visitor values parsed as numbers and dates formatted via `d3.timeParse`. The dark background and red styling emphasize the trend over the decade.

SSaikiran2029
76% match
Loading thumbnail…

bhavya_piechart

This example visualizes the total number of hotel bookings per state using a pie chart, with each slice colored by a categorical scale and accompanied by a legend. Hovering over a slice reveals a tooltip showing the state and its booking total. The implementation uses D3.js v6, including `d3.rollup` to aggregate data from a CSV file, `d3.pie` for layout, and `d3.arc` for rendering SVG paths. The chart is built within a React-free HTML page, with smooth opacity transitions for the tooltip on mouse events.

Bbhavyapokuri123@gmail.com
75% 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
75% match