Skip to main content
SimilarExport ZIP
100%

Apple Quality Second Viz

✓ Published0🌍 Public
Llrsavoie@wpi.edu
Last edited Feb 8, 2024
Created on Feb 8, 2024

This scatter plot visualizes the Apple Quality Dataset, mapping Juiciness on the x-axis and Crunchiness on the y-axis. Each circle represents an apple sample, with its position determined by those two attributes. The visualization uses D3’s `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes, while the `viz` function from the custom module handles rendering circles with configurable radius and opacity. Data is loaded via the `@lukesavoie/applequalitydata` package, and the chart includes axis labels courtesy of the `@curran/axis-labels` library.

AI-generated description

A simple scatter plot with D3 showing the Apple Quality Dataset.

Challenge

  • Fork this viz
  • Modify it to show your data
MIT Licensed

Similar vizzes

Loading thumbnail…

Apple Quality First Viz

This example creates a scatter plot to visualize the Apple Quality Dataset, plotting each apple's weight on the x-axis and its size on the y-axis. The code uses D3's `scaleLinear`, `axisBottom`, and `axisLeft` functions to construct the chart, with points rendered as semi-transparent circles. The data is sourced from the `@lukesavoie/applequalitydata` library, and the visualization is built dynamically to fit the container's dimensions. The chart is designed to be easily forked and modified for other datasets.

Llrsavoie@wpi.edu
89% match
Loading thumbnail…

Apple Quality Dataset

This visualization displays the first row of the Apple Quality dataset, which contains seven numerical attributes—Size, Weight, Sweetness, Crunchiness, Juiciness, Ripeness, and Acidity—along with a quality label of either "good" or "bad." The code loads the data from a CSV file, converts each attribute to a number, and renders the first data point as a JSON object in a large monospaced font. The example uses the standard JavaScript `JSON.stringify` method within a container element to present the raw data structure.

Llrsavoie@wpi.edu
83% match
Loading thumbnail…

Week 6 New Technique

This scatter plot explores the relationship between sweetness and ripeness scores in a subset of the Apple Quality dataset, coloring each point green or red based on whether the apple is rated good or bad. The visualization uses d3.scaleLinear for both axes and d3.selectAll to render the circles, with a custom legend object passed into the viz function to display colored squares and labels for each quality category in the lower-left corner. The example demonstrates a reusable viz function that accepts configurable options for margins, axis labels, and legend data.

IIan Coolidge
80% match
Loading thumbnail…

3D Scatter Plot

This 3D scatter plot visualizes Apple product data, mapping original price, discounted price, and ratings along the x, y, and z axes. The plotly.js library renders the interactive 3D scene, while the d3.csv method loads the data from a remote CSV file hosted on GitHub. Each marker’s size is fixed, with a semi-transparent fill and gray outline, and axis titles are colored distinctly to aid legibility. The layout’s margins are minimized to maximize the plot area within the page.

BBhanuMotupalli
67% match
Loading thumbnail…

Pie chart

This interactive pie chart visualizes regional apple and orange counts from a static JSON dataset, with radio buttons toggling between fruit types. The donut chart updates its arcs using `d3.pie` and `d3.arc`, while `transition.attrTween` animates shape changes. A legend built with SVG circles and text labels shows region names and colors from a `d3.scaleOrdinal` palette. The rendering uses D3.js (v5) with SVG and includes a 2-second delayed arc transition after each update.

Rrlia0010
67% match
Loading thumbnail…

D3 Data Visualization

This example shows a stacked bar chart of fruit production (Red Delicious apples, McIntosh apples, oranges, and pears) across years from 2006 to 2016. The data is hardcoded in the source, rather than loaded from an external file. The visualization uses D3 v5 with the `d3.layout.stack` function to create stacked layers, `d3.scale.ordinal` and `d3.scale.linear` for axes, and `d3.svg.axis` for drawing ticks. Tooltips display the value of each segment on mouseover. Renders to SVG.

Kkingkwabs
66% match
Loading thumbnail…

Pie chart

The visualization displays two interactive pie charts comparing apple and orange counts across five regions, with a toggleable radio interface to switch datasets. Built with D3.js (v5.16.0), it renders an animated SVG donut chart using `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` color scales. Legends appear as colored dots and labels beside the chart. On dataset change, arcs transition smoothly via `transition.attrTween` with interpolation, and a delayed auto-animation replays the arc tweens every two seconds. Data is loaded asynchronously from `data.json` via `d3.json`.

KKrister
66% match
Loading thumbnail…

The ratio of

This donut chart visualizes the proportion of five apple values from a static dataset. The chart uses a blue-to-red color scale and places value labels outside the donut’s outer radius, with thin pointer lines and circular markers connecting each label to its corresponding arc segment. Built with D3 v6, it uses `d3.pie`, `d3.arc`, and `d3.scaleOrdinal`, rendering labels and markers as SVG text and path elements, with label positioning calculated from arc start and end angles.

RRochelle
66% match