Skip to main content
SimilarExport ZIP
100%

Scatterplot NYC Food Ordering/Delivering Data

✓ Published0🌍 Public
Jjjlaber
Last edited Feb 9, 2023
Created on Feb 9, 2023

This scatterplot visualizes New York City food order and delivery data from a Kaggle dataset, plotting quantitative variables such as order cost, delivery time, or preparation time to reveal relationships. The D3.js v7 visualization uses the `csvParse` function to load remote CSV data and the `flatRollup` API to aggregate counts by cuisine type, computing summary statistics. Rendered as an SVG, the plot’s simple design lets patterns across cuisine categories and timing metrics stand out, while the underlying `scatterPlot` module handles the graphical encoding.

AI-generated description

Loading a dataset that has information on food orders/deliveries in NYC through the app Foodhub.

(Dataset from: https://www.kaggle.com/datasets/ahsan81/food-ordering-and-delivery-app-dataset)

Column Description/Data Types

order_id: unique id that is connected to each order (Ordinal)

customer_id: unique id that is connected to the customer ordering the food (Ordinal)

restaurant_name: name of the restaurant that the order is from (Categorical)

cuisine_type: type of food ordered (Categorical)

cost_of_the_order: how much the order cost (Quantitative)

day_of_the_week: either Weekend or Weekday, indicates when the order took place (Categorical)

rating: rating that customer gave on order (out of 5) (Quantitative)

food_preparation: time (in minutes) that it took the restaurant to prepare the order to be delivered (Quantitative)

delivery_time: time (in minutes) that it took for the order to be delivered to the customer (Quantitative)

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatterplot of NYC Food Data

This scatterplot maps NYC Foodhub delivery data, plotting delivery time against customer rating for each order. The visualization reveals any correlation between how long deliveries take and customer satisfaction. The code loads CSV data from a GitHub-hosted Kaggle dataset, parses numeric fields, and uses d3.scaleLinear to map domain values to screen coordinates. D3’s selection and join pattern render circles for each order, with the chart redrawing on data load and window resize.

Jjjlaber
89% match
Loading thumbnail…

NYC Food Ordering/Delivering Data

This example visualizes NYC food ordering and delivery data from Foodhub, showing raw order records including restaurant names, cuisine types, costs, ratings, preparation times, and delivery times. The visualization initially displays the dataset as formatted JSON text in a `<pre>` element. It uses D3 v7’s `csvParse` to load and parse data from a remote CSV file, converting numeric fields with unary plus operators. The code employs D3 selections with `.selectAll().join()` to bind and update the display, and manages asynchronous data loading through a state-based render cycle using `fetch`.

Jjjlaber
85% match
Loading thumbnail…

Exploring NYC Food Ordering/Delivering Data

This visualization explores NYC food ordering and delivery patterns from a Foodhub dataset, initially showing the full data as a JSON preformatted block. The pie chart displays the distribution of orders by cuisine type, with each slice labeled and colored using a categorical color scale. Built with D3 v7, it uses `d3.pie` to compute arc angles and `d3.arc` to generate the pie paths, alongside `flatRollup` to aggregate order counts from the CSV data fetched from a GitHub gist.

Jjjlaber
84% match
Loading thumbnail…

Piechart of NYC Food Data

This example shows the top cuisine types by number of orders in a NYC food delivery dataset, using a pie chart where slice values are labeled for categories exceeding 100 orders. A legend identifies each cuisine type by color. The visualization loads CSV data via `d3.csvParse` and uses `d3.flatRollup` to aggregate order counts, `d3.pie` to generate arc segments, and `d3.arc` with inner and outer radii to render the doughnut-style chart. The data originates from a Kaggle dataset on Foodhub app orders.

Jjjlaber
81% match
Loading thumbnail…

Pie Chart of NYC Food Data

This pie chart visualizes the distribution of food orders by cuisine type from a Foodhub NYC delivery dataset. Slices are sized by order count, labeled with totals, and paired with a color-coded legend, showing a clear ranking of culinary preferences. The chart uses D3.js v7 APIs including `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to group, sort, and render the data. The underlying data is loaded from a CSV file of order details, and the chart updates only after all records are parsed.

UUmarani Vemula
79% match
Loading thumbnail…

Piechart Practice

This pie chart visualization shows the top cuisine types by number of orders from a NYC food delivery dataset sourced from Kaggle. It renders a donut chart with colored slices, labels showing order counts above 100, and a legend listing each cuisine type. The visualization uses d3.pie and d3.arc to generate the chart, d3.scaleOrdinal for color mapping, and d3.flatRollup to aggregate order counts by cuisine category. Data is loaded asynchronously via fetch and parsed with d3.csvParse.

TTammminana
77% match
Loading thumbnail…

Ratings Scatterplot

This scatterplot visualizes the relationship between delivery time and customer rating using food order data loaded from a remote CSV file. The visualization displays points with a radius of 10 pixels, using d3.scaleLinear for both axes and d3.extent to compute domains from the data. Axes are rendered with d3.axisLeft and d3.axisBottom, labeled "Delivery Time" and "Customer Rating", while the chart fills the entire window using window.innerWidth and window.innerHeight. Data parsing uses d3.csvParse to convert string values to numbers before plotting.

Jjjlaber
75% match
Loading thumbnail…

Scatter Plot using D3.JS

This example visualizes a 3D scatter plot of city-level economic indices, comparing cost of living, rent, local purchasing power, groceries, and restaurant prices across different cities. Two distinct traces plot each city as a marker, with hover text identifying the city name. The code uses the Plotly JavaScript API, specifically `Plotly.newPlot`, to render the chart, while D3.js (version 3.5.17) is used to load CSV data from a GitHub gist via `d3.csv`. The visualization demonstrates integrating D3 for data fetching with Plotly for 3D rendering.

Kkottenikhil
73% match