Trivikram_ScatterPlot

100%

Trivikram_ScatterPlot

✓ Published0🌍 Public

Last edited Mar 21, 2024

Created on Mar 21, 2024

This example shows the relationship between flight prices and airlines as a scatter plot, with flight price on the x-axis and airline names on the y-axis. It uses D3 v7 to load CSV data, scale the axes with `scaleLinear` and `scaleBand`, and render circular marks via SVG. The code builds the chart by selecting the body, appending an SVG element, and drawing circles positioned with `cx` and `cy` attributes. Axis labels are added with `axisLeft` and `axisBottom`, and the flight-price axis includes extra bottom margin for readability. The dataset is fetched from a remote CSV file, and the visualization fills the entire viewport.

AI-generated description

A responsive scatter plot.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE 6_Trivikram

This horizontal bar chart displays flight prices for various airlines, with each bar labeled at its end showing the rounded price in dollars. The visualization uses D3.js v6 with SVG rendering, employing `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the categorical y-axis. Data is loaded from an external CSV file containing airline names and flight prices. The chart includes labeled axes for airline and flight price, with bar labels positioned slightly beyond each bar’s end for readability.

Ttrivikramcheluri@gmail.com

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

2 dimensional Scatter Plot

A two-dimensional scatter plot displays the relationship between aircraft price and year of manufacture, with each data point representing a specific aircraft model. The visualization uses D3 v5 with SVG rendering, plotting seven aircraft types across a linear scale for both axes. The chart includes labeled axes, gridlines, and a title, with interactive hover effects that enlarge data points using D3 transitions. Data is loaded from a CSV file using the `csv` function, and the code employs `scaleLinear`, `axisLeft`, `axisBottom`, and `extent` to construct the visualization.

FFhouston17

74% match

Loading thumbnail…

2 dimensional Scatter Plot testing data labels and mouse hover

This scatter plot displays aircraft price against manufacture year from a seven-row CSV dataset. Each aircraft type appears as a semi-transparent svg circle with a tooltip title showing its name; hovering triggers a d3 transition that enlarges the circle radius. The visualization uses d3.scaleLinear for both axes, d3.axisLeft and d3.axisBottom for ticks, and d3.csv for data loading, with margins and labels specified in the index.js file.

FFhouston17

71% match

Loading thumbnail…

AirBnb Data Visualized

This scatterplot displays the relationship between Airbnb listing prices and their reviews per month, with each circle representing a property. The visualization uses D3 v5 to load CSV data and render an SVG. It employs `scaleLinear` for both axes, `axisBottom` and `axisLeft` for tick marks, and appends circles with fixed radius to show the data points. The chart is titled "AirBnb Prices Vs Reviews Per month" and includes axis labels for clarity.

KKishore Thamilvanan

71% match

Loading thumbnail…

customized Scatter plot

This interactive scatter plot visualizes the relationship between maximum velocity (Vmax) and range for a dataset of airplanes, using SVG circles to represent individual aircraft. The chart is built with React and D3 v5, employing `scaleLinear` for both axes and custom `AxisBottom` and `AxisLeft` components to render ticks. Hovering over a circle reveals its precise Vmax value via a native SVG `<title>` tooltip. The visualization reads from a CSV file fetched through D3’s `csv` loader, with styled axis labels and a clean, minimal aesthetic defined through CSS classes.

Rrsulli4

71% match

Loading thumbnail…

Activity 6 Question 4

This bubble chart visualizes airline ticket sales data from a CSV, plotting the number of routes on the x-axis against average ticket price on the y-axis. Each circle’s area encodes passenger volume, while color distinguishes airlines, with a legend and interactive tooltips showing exact values. The visualization uses D3 v7’s `scaleLinear`, `scaleSqrt`, and `scaleOrdinal` APIs to map data dimensions to visual encodings, rendered as SVG circles. Animated tooltips appear on hover, and the chart includes labeled axes and a title, all built with D3’s selection and layout methods.

BBharath Vupputuri

71% match

Loading thumbnail…

Assignment 4: scatter plot with D3

This scatter plot visualizes the relationship between carrier delays and late aircraft delays using flight data loaded from a remote CSV file. Red circles represent individual data points, with axes labeled for each delay type and interactive tooltips appearing on hover to show exact values. The visualization uses D3 v7 with SVG rendering, employing `d3.csv` for data loading, `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and mouse event handlers for tooltip interactions.

Hhxu51@usfca.edu

71% match