Skip to main content
SimilarExport ZIP
100%

Fork of Goals Scatter Plot with Responsive Axis

✓ Published0🌍 Public
Mmanthenasirisha06@gmail.com
Last edited Mar 20, 2024
Created on Mar 20, 2024

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.

AI-generated description

Scatter plot

MIT Licensed

Similar vizzes

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
81% 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
80% match
Loading thumbnail…

Fork of Scatter Plot

This scatter plot visualizes the relationship between calorie content and price for food items, with each point colored by category using a categorical color scale. Built with D3 v6, the visualization renders as an SVG and loads data from a CSV file hosted on GitHub. The code defines linear scales for both axes, maps data values to circle positions, and applies the `d3.scaleOrdinal` color scheme with `d3.schemeCategory10` for category-based coloring.

Mmadipadiga.raviteja@gmail.com
80% 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
80% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot visualizes the relationship between Total Fat and Protein content for a curated selection of McDonald’s menu items, with circle size encoding the Carbohydrate level. The chart uses D3.js (v7) to build linear scales and axes, drawing circles for each food item. A reusable scatter plot module, configured with accessor functions for the x, y, and z values, renders the data from a CSV file loaded via D3’s `csv` function. The visualization highlights nutritional comparisons among popular items, using axis labels and gridlines to clarify the quantitative values.

Mmanthenasirisha06@gmail.com
78% match
Loading thumbnail…

Fork of Rahul

This scatterplot visualizes the relationship between carbohydrate and ash content in food items, with points colored by category (blue for cheese, red for cherries, orange for others). The code uses D3 v6 to load CSV data, scales the x and y axes linearly using `scaleLinear`, and renders circles with SVG. Axis labels are added via `axisBottom` and `axisLeft`, with explicit font styling. The visualization employs a simple color-mapping function to distinguish categories, while the chart fills the browser window with margins for axis placement.

Mmaheshpolisetty22@gmail.com
77% match
Loading thumbnail…

Scatter Plot

This reusable scatter plot visualizes the relationship between calorie content and price for menu items, with each circle colored by category. The visualization uses D3.js v6 with an SVG rendering approach, loading data from a CSV file hosted on GitHub Gist. The code implements linear scales for both axes, an ordinal color scale using `d3.schemeCategory10`, and renders circles positioned by the x and y scales. Axis construction uses `d3.axisBottom` and `d3.axisLeft`, while the data loading relies on `d3.csv` with promise handling. The chart displays points with a radius of 5 pixels, colored according to categorical values.

Rr79162810@gmail.com
76% match
Loading thumbnail…

Fork of Goals Scatter Plot with Scale- Menu

This interactive scatter plot, built with D3.js, visualizes goal-scoring statistics from top football leagues, using data from Kaggle. The visualization includes dropdown menus for selecting which numeric column to display on the X and Y axes, allowing users to compare different metrics such as Goals and Shots. The plot is color-coded by league, with an interactive legend that supports hover highlighting and click-to-filter functionality. The animation responds to axis changes, updating the visualization dynamically.

Eeschuman20@gmail.com
76% match