Skip to main content
SimilarExport ZIP
100%

Fork of Exersice Episode 8 - Scatter plot + tooltips

✓ Published1🌍 Public
BBart van Pelt
Last edited Jan 17, 2023
Created on Jan 17, 2023

This scatter plot visualizes nutritional data from koolhydraten.nl, plotting kilocalories on the x-axis against fat content on the y-axis for a range of food products. Each circle represents a product, with native SVG tooltips displaying the product name, carbohydrate, fat, and kilocalorie values on hover. The visualization uses D3 v6 to load the CSV dataset with `d3.csv`, scales the data with `scaleLinear`, and renders the circles and axes via SVG elements. Interactive tooltips are added by appending `title` elements to each circle, providing detailed information without requiring additional DOM manipulation.

AI-generated description

Exercise

Added tooltip based on:

MIT Licensed

Similar vizzes

Loading thumbnail…

Exersice Episode 8 - Scatter plot

This scatter plot visualizes the relationship between calories (kcal) and fat content (vet) for a dataset of Dutch food products, with each point representing a product from a CSV file. The plot uses D3 v6's `scaleLinear` for both axes and employs the `csv` function to parse data from the external file. Points are rendered as SVG circles, with axes generated using `axisLeft` and `axisBottom`. The code reads product data from 'koolhydrate.csv', which includes columns for carbohydrates, fat, calories, product name, and unit.

BBart van Pelt
87% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This gallery item presents a fork of a reusable D3 scatter plot that visualizes nutritional data from a Food dataset, plotting variables like Protein and Calories as points. The chart cycles through different x-axis dimensions—Calories, Carbohydrates, Fat, and Protein—every two seconds using `setInterval`, updating the visualization with animation. Built with D3 v6, the code employs `scaleLinear`, `axisBottom`, and `axisLeft` to render axes, while SVG circles are joined and updated dynamically. The implementation follows a reusable chart pattern, using closures and setter functions to configure the plot’s properties.

Mmounishnaidu96@gmail.com
75% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This fork of a D3.js scatter plot animates through three pairings of nutritional data from a CSV file of menu items: carbohydrates versus protein, carbohydrates versus total fat, and protein versus total fat. The code uses D3 modules such as `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render axes and circles with an SVG. A `setInterval` callback updates the x and y value mappings every two seconds, changing the chart’s title accordingly. The visualization employs a custom `scatterPlot` function and D3’s `selectAll` and `join` for efficient updates.

Mmanthenasirisha06@gmail.com
75% match
Loading thumbnail…

Fork of Goals Scatter Plot with Responsive Axis

This scatter plot visualizes the relationship between total fat content and calories for various food items, with each data point represented as a circle. The chart uses D3.js v7 (d3.csv, d3.scaleLinear, d3.axisBottom, d3.axisLeft) to load nutritional data from a GitHub gist and render an SVG with interactive hover effects that enlarge dots. Axes include gridlines, while labeled axes and a title clarify the comparison.

Mmanthenasirisha06@gmail.com
75% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example presents three separate scatter plots visualizing nutritional information from a menu items dataset, comparing carbohydrates, protein, and total fat across different food items. Using D3.js v7, each plot renders with SVG circles, band scales for the categorical menu items along the x-axis, and linear scales for numeric nutritional values on the y-axis. The code loads the CSV data with `d3.csv`, then calls a reusable `createScatterPlot` function to generate each chart with rotated axis labels, titles, and rotated text ticks.

Mmanthenasirisha06@gmail.com
74% match
Loading thumbnail…

Untitled

A scatterplot visualizes cereal products by calories on the x-axis and protein content on the y-axis, with each dot colored by manufacturer. Hovering a dot displays a tooltip with the cereal name and coordinates. Built with d3.v3 and React, it uses d3.csv to load data, d3.scale.linear for axes, d3.svg.axis for ticks, and d3.scale.category10 for color mapping, rendered as SVG with mouseover transitions.

FFlorisPex
73% match
Loading thumbnail…

Scatterplot (Canvas)

This interactive scatterplot displays nutritional data for various foods as colored dots on a canvas. Users can switch the X and Y axes via dropdown menus to explore relationships between nutrients such as protein, calcium, sodium, and calories. Built with D3.js v2 and rendered on an HTML5 canvas, it uses Underscore.js for data handling and updates the visualization dynamically without page reloads. Hovering over a point reveals the food name in a dedicated readout. The example shows how D3 can drive canvas-based scatterplots with axis controls and linked tooltips.

GGerHobbelt
73% match
Loading thumbnail…

Visualization

This interactive scatterplot visualizes nutritional data for 77 breakfast cereals from a CSV file, plotting calories against potassium while encoding protein in the dot area and manufacturer with color. Users can zoom and pan through the d3.behavior.zoom interface, and a button click switches the x-axis to carbohydrates with a transition. Hovering reveals tooltips via d3-tip. The SVG rendering uses d3.scale.linear for axes and circle elements with dynamic radius calculations based on protein values.

AAndresAnayaIsaza
72% match