Skip to main content
SimilarExport ZIP
100%

Weekend vs. Weekday Barchart

✓ Published1🌍 Public
Jjjlaber
Last edited Apr 13, 2023
Created on Feb 24, 2023

This visualization compares weekend versus weekday food orders from a Foodhub NYC delivery dataset, letting users toggle between total order count and total money spent via a dropdown menu. The bar chart uses d3.scaleBand and d3.scaleLinear to render two bars, with d3.flatRollup aggregating measurements by day type. The axes are drawn with d3.axisLeft and d3.axisBottom, while the menu is implemented through d3 select/join, and colors come from d3.schemePastel2. Data loads from a CSV and updates dynamically when the menu selection changes.

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…

WeekDayChart

This example visualizes the frequency of events across the seven days of the week using a simple bar chart. The chart shows that Wednesday has the highest count at 131, while Friday has the lowest at 1. The visualization is built with D3 v4, using `d3.scaleBand` for the x-axis day categories and `d3.scaleLinear` for the y-axis frequency scale. Bars are rendered as SVG `rect` elements, and the chart includes hover effects that change bar color from steelblue to brown. The data is hardcoded in a `flatDays` array, and the y-axis is labeled "Frequency."

JJoelGallagher
74% match
Loading thumbnail…

Top Restaurants Barchart

This visualization shows the top five restaurants by order count from a NYC food delivery dataset, ranked in descending order. It uses a horizontal bar chart with a linear x-scale for order counts and a band y-scale for restaurant names. Built with D3 v7, the code employs `flatRollup`, `scaleLinear`, `scaleBand`, and `schemePastel2` for color encoding, with axes generated via reusable axis functions. The data is loaded from a CSV fetched from a GitHub gist and parsed with `csvParse`.

Jjjlaber
70% match
Loading thumbnail…

Fork of Refactored Bar Chart

This chart displays the aggregate number of move-ins per day of the week from a CSV dataset, with each day represented by a circle plotted on a linear scale. Built with React and D3 v6, the visualization uses `useState` and `useEffect` to load and refine the data, summing records by weekday. SVG elements render the axes and marks, with `scaleLinear` mapping values and the `Marks` component adding a native `<title>` tooltip. Axis components are generated manually from `yScale.ticks()` and `xScale.ticks()`, with labels formatted using `d3.format`.

Ddjfeld01
70% match
Loading thumbnail…

green bar chart

This green bar chart visualizes the active device count for each day of the week, with bars colored in a dark green that lightens to gray on hover. The visualization uses D3 v4 to load tab-separated data from `data.tsv` and render an SVG bar chart, employing `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis. The y-axis is styled green with custom tick labels, while the x-axis is hidden, and a title in large green text sits above the plot. The code explicitly uses `d3.tsv` to parse the data and `d3.axisLeft` to generate the frequency axis.

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

Project: Bar Chart

This bar chart visualizes the number of music plays per day of the week, aggregated from Last.fm listening data. The chart displays seven bars, one for each weekday, with the y-axis representing play counts and the x-axis showing the days. Built with D3 v5, the visualization uses `scaleBand` and `scaleLinear` to map the data, and `axisLeft` and `axisBottom` for the axes. The data is loaded via a CSV file, which is processed in `loadData.js` to group plays by weekday.

OOxfordComma
69% 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
69% 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
68% match