Skip to main content
SimilarExport ZIP
100%

Attempt of Interactive Filtering

✓ Published0🌍 Public
Mmacgregorm01@gmail.com
Last edited Oct 30, 2024
Created on Oct 30, 2024

This interactive scatterplot filters a shopping habits dataset by season. A dropdown menu lets users select between all seasons, Summer, Winter, Spring, or Fall, dynamically updating the displayed points. The visualization encodes purchase amount on the x-axis and customer review rating on the y-axis, with circle size representing previous purchases and color indicating the season. Built with D3 7.8.5, the code uses scaleLinear for axes, join operations for SVG elements, and change event listeners on a select element to redraw the circles via JavaScript data filtering.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Total Shopping Habits Scatterplot

This scatterplot visualizes shopping habits by plotting purchase amount in USD against customer review ratings. Each point encodes the number of previous purchases through its radius and the shopping season (Summer, Fall, Winter, or Spring) through its color. The visualization uses D3.js scales and axis components, with circles rendered via SVG selections. Data comes from the @mjmacgregor/shoppinghabits package, and the chart includes labeled axes and a white inner rectangle behind the plotted points.

Mmacgregorm01@gmail.com
76% match
Loading thumbnail…

State Shopping Data Scatterplot

This scatterplot visualizes state-level shopping data, plotting the total number of purchases against average customer rating. Each circle represents a state, with its size scaled to the square root of average purchases per customer and its color indicating the popular season (gold for summer, orange for fall, blue for winter, green otherwise). The visualization uses d3.scaleLinear for axes and d3.axisLeft for the y-axis, while custom tooltips appear on mouseover. Data comes from the @mjmacgregor/state-ratings package, and rendering leverages D3’s selection and join methods.

Mmacgregorm01@gmail.com
75% match
Loading thumbnail…

Collective Shopping Habit Views

This collection of interactive visualizations explores a shopping habits dataset, revealing patterns in sales, customer ratings, and purchasing behavior across states, seasons, and genders. The views include a scatterplot of overall data distribution, a choropleth map of state ratings using `d3.geoPath`, and additional scatter and stacked bar charts breaking down sales by state, season, and gender. Built with D3.js and embedded via iframes, the charts support business strategy by highlighting geographic and demographic trends. The dataset originates from Kaggle's Consumer Behavior and Shopping Habits Dataset.

Mmacgregorm01@gmail.com
73% match
Loading thumbnail…

State Data Scatterplot with Color Legend

This visualization displays a scatterplot of state ratings, with each circle representing a state's average customer rating against its total number of purchases. The circles are colored by the most popular season for that state, using an ordinal color scale with distinct hues for Summer, Fall, Winter, and Spring. A D3 color legend with interactive hover highlighting allows users to filter which season's data points remain fully opaque. The visualization uses d3.scaleLinear for the axes, d3.scaleOrdinal for colors, and d3-axis for tick marks, while d3.select handles mouse events for tooltips and legend interactions.

Mmacgregorm01@gmail.com
73% match
Loading thumbnail…

Untitled

This interactive scatter plot displays sales versus profit for individual customers, with data points colored by region and filtered by a year selector. Built with React and D3.js v4, it renders as an SVG animation, using `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `d3.schemeSet2` for regional colors, and `d3.csv` to load the Superstore dataset. A dropdown menu populated via `d3.select` and `append('option')` lets viewers switch between years, updating the plotted circles while tooltips show customer details on mouseover.

SSai SriHarsha Griddaluru
73% match
Loading thumbnail…

D3 complex filtering

An interactive scatterplot demonstrates dynamic filtering of 200 random points using radio buttons to select preset filter modes: none, center, edges, or quadrants. Built with D3 v7, it uses scaleLinear for axes and axisBottom/axisLeft for rendering. Clicking a radio button applies a transition to recolor points based on geometric conditions relative to the midpoint (500, 500), highlighting central clusters, edge outliers, or quadrant-specific groups with schemeCategory10 colors, while rendering via SVG circles.

KKaustav Sen
71% match
Loading thumbnail…

Fork of Circles with D3

This interactive scatter plot visualizes store sales data, dynamically cycling through different attributes (Store Area, Daily Customer Count, Store Sales, and Items Available) on the x-axis every two seconds. Built with D3.js, the visualization uses an SVG scatter plot with circles representing individual stores, where the y-axis displays items available and the x-axis automatically updates to showcase different metrics. The animation highlights the flexibility of D3's data joins and method chaining, allowing the chart to smoothly transition between different data views. The reusable chart pattern keeps the code modular and maintainable.

RRohithNaiduDevareddy@my.unt.edu
71% match
Loading thumbnail…

Reusable D3 Scatter

This example presents a reusable scatter plot that visualizes retail sales data from a supermarket dataset. The plot animates by cycling between two variables—Quantity and Price—on the x-axis every four seconds, while the y-axis remains Price. Data points are colored by product category (blue for Clothing, purple for Gadgets, orange for Appliances). Built using D3 v6, it leverages scaleLinear, axisLeft, axisBottom, and csv loading, with SVG circles for rendering and a setInterval-driven animation.

Pprashanth yamala
70% match