Skip to main content
SimilarExport ZIP
100%

Lesson 3

✓ Published2🌍 Public
Mmachetenwueter
Last edited Nov 16, 2020
Created on Aug 7, 2020
Forked from U2

This interactive chart visualizes the purchase quantities of various grocery items across different years. Users can filter the data by year, month, or week using dropdown menus and navigation buttons, while radio buttons control the zoom level (yearly, monthly, weekly, or daily). The visualization is rendered as a stacked multi-bar chart using the NVD3 library with D3 v3, displaying SVG elements with smooth transitions. The data is loaded from a local JSON file containing product names and their corresponding values for each time period.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Lesson 3

An interactive stacked bar chart displays purchase quantities of various grocery items across years, with controls for filtering by year, month, or week. The visualization uses NVD3’s `multiBarChart` with stacked bars, driven by D3.js for rendering and transitions. Data comes from a local JSON file containing product names and yearly values, while a sidebar offers radio buttons and dropdowns to adjust the temporal granularity. The chart updates its axes and bar groups based on the selected period, integrating SVG rendering for crisp visuals.

GGal Thelander
92% match
Loading thumbnail…

Lesson 3

An interactive multi-bar chart displays synthetic stream data across time, with controls for filtering by year, month, week, and zoom level. The visualization uses the NVD3 library’s `multiBarChart` model with D3.js v3 for rendering and transitions. Sidebar selectors and buttons adjust the view, while radio buttons switch between yearly, monthly, weekly, and daily granularity. Data is generated dynamically via custom `stream_layers` and `stream_waves` functions, producing three random series with bump-based distributions.

SSchmittYannic
75% match
Loading thumbnail…

Shopping App

This animated bar chart simulates a shopping cart filling with groceries. Each frame adds an item, with bars growing to show price and text labels displaying item names and costs. The visualization uses D3 v5 with transitions to animate size and position changes, reading data from a JSON file. Items are sorted by descending price, with the chart height expanding to accommodate new entries.

Zzlastefcia
73% match
Loading thumbnail…

Activity 6_Question 2

This stacked bar chart visualizes sales figures for Grocery, Appliances, and Toys across three years (2018–2020), with each bar segment colored by category. Built with D3.js v7, it uses `d3.stack` to accumulate category values, `d3.scaleBand` and `d3.scaleLinear` for axes, and SVG rectangles for rendering. Interactive tooltips appear on mouseover, displaying category and exact sales amount. The chart includes axis labels, a legend, and reads data from a local CSV file.

Mmsnikhil2608@gmail.com
72% match
Loading thumbnail…

Activity 6 Question 2

This stacked bar chart shows yearly sales totals for grocery, appliance, and toy categories across 2018–2020. Each bar segment represents one product category, with a legend identifying colors and a hover tooltip displaying the exact sales value. The visualization uses D3 v7’s `d3.stack`, `d3.scaleBand`, and `d3.scaleLinear` to generate SVG elements from the provided CSV data. Interactive features rely on D3’s `.on('mouseover')` and `.on('mouseout')` event handlers, while axis labels and tooltips are styled using inline CSS.

SSai Gottumukkala
72% match
Loading thumbnail…

Shopping App Prototype

This example demonstrates a shopping app prototype using a bar chart to display grocery items and their prices, with data updating over time. It shows how a D3.js visualization can transition between different datasets, adding and removing items while adjusting bar widths and labels dynamically. The code uses d3.scaleLinear and d3.scaleBand for positioning, and binds data to SVG rect and text elements via selections. Bars are styled in steelblue, with item names and prices displayed as text, and updates are triggered using setTimeout to simulate asynchronous data changes.

CCurran Kelleher
71% match
Loading thumbnail…

D3 Page Template

This interactive line chart from D3 v4 displays monthly sales data for three fruits (strawberry, grape, and blueberry) across two years (2015 and 2016), using a dropdown menu to switch between fruits. The visualization uses `d3.line()` to generate smooth paths from the CSV data and `d3.scaleTime()` for the month-based x-axis. A callback on the dropdown's `change` event triggers a transition that animates the paths over one second, enabling dynamic comparison of seasonal sales patterns across different fruit categories.

SSushanta77
70% match
Loading thumbnail…

3D Bar Chart using D3.js

This example visualizes supermarket sales data as an interactive 3D bar chart, with each bar representing a city across multiple months. The visualization uses D3.js v5 for data loading and layout, combined with the d3-3d library to extrude bars into three dimensions, and X3DOM for WebGL rendering of the 3D scene. Sales figures are parsed from a CSV file via `d3.csv`, and the chart is created using `d3.x3d.chart.barChartMultiSeries()`, which manages axes and bar positioning in 3D space. The rendering approach leverages the d3-x3d bridge to convert D3 selections into X3D DOM elements for real-time interactivity.

SsreepavanKothapalli
70% match