Skip to main content
SimilarExport ZIP
100%

Fork of D3 Scatter Plot Vanilla Javascript (simple_example)

✓ Published0🌍 Public
FFrancisco Ibelles
Last edited Jun 15, 2023
Created on Jun 15, 2023

This example shows a scatter plot of ice cream prices against temperatures, with twelve data points plotted on a fixed 10–26°C x-axis and 0–700 price y-axis. The visualization uses d3.v7’s `scaleLinear`, `axisLeft`, `axisBottom`, and SVG circle rendering through the `join` method. Data is hard-coded in JavaScript arrays `xVal` and `yVal`, and the chart includes gridlines via tick marks and a title. The SVG output is generated entirely in vanilla JavaScript without external datasets.

AI-generated description

Create a scatter plot with vanilla javascript [ICE CREAM]

MIT Licensed

Similar vizzes

Loading thumbnail…

Ice Cream yum yum!

A scatterplot and line chart show the relationship between temperature and ice cream sales, with each circle marking a data point and the line tracing the overall trend. The visualization uses D3 v3 with SVG rendering, employing `d3.scale.linear` for the x and y ranges, `d3.svg.line` to generate the path, and `d3.svg.axis` for the axes. Data is loaded from a local CSV file via `d3.csv`, with both temperature and sales parsed as numeric values. The chart includes a steelblue line and white axis strokes on a dark background.

QQinita
80% match
Loading thumbnail…

Ice cream yum yum!

This visualization shows the relationship between daily temperature and ice cream sales, plotting each data point as a dot on a scatterplot and connecting them with a line to highlight the upward trend. The line and circles are rendered in SVG using D3 v3, with sales rising as temperature increases. The code uses d3.csv to load the data, d3.scale.linear for the x and y axes, and d3.svg.line plus circle elements to draw the chart, with both axes oriented and ticked via d3.svg.axis.

QQinita
77% match
Loading thumbnail…

Ice cream yum yum!

A line chart and scatterplot overlay show the positive relationship between temperature and ice cream sales, with sales rising from roughly 185 to 614 as temperature increases from 11.9 to 25.1 degrees. The visualization uses D3 v3 to load CSV data from `icecream.csv`, scales the axes with `d3.scale.linear`, draws the line with `d3.svg.line`, and renders circles for each data point. The SVG elements are styled with steelblue lines and grey axes.

QQinita
77% match
Loading thumbnail…

Activity6_Question_3

This scatter plot visualizes the relationship between outdoor temperature and ice cream sales, with points colored by an A/B/C rating category. The visualization uses D3 v7 to load CSV data from a GitHub repository, then maps the temperature and sales measurements to a linear scale. Circles are rendered as SVG elements with colors assigned via a switch statement based on the rating grade. Axis labels are styled green in Times New Roman, with rotated temperature text and bottom ice cream sales label, while D3's `axisLeft` and `axisBottom` functions generate the quantitative scales.

Ccherrylmarym@gmail.com
77% match
Loading thumbnail…

Gist 8ecb1b00a620078a9e4f

A line chart with circular markers shows the relationship between temperature and ice cream sales from a CSV file, with sales rising as temperature increases. The chart uses a linear x-axis for temperature and a linear y-axis for sales, both scaled to the data’s maximum values. Built with D3 v3, the visualization employs `d3.svg.line()` for the line path and `d3.svg.axis()` for the axes, rendering the SVG elements directly in the browser. Data points are added as circles via `svg.selectAll("dot").data()` and color-coded in steelblue.

QQinita
76% match
Loading thumbnail…

ICE - 7 Reusable D3 Scatter Plot

This example shows a reusable scatter plot that displays sales figures over time, with each circle representing a data point. It uses D3.js version 7 to render the visualization as SVG elements, with a band scale on the x-axis for categorical years and a linear scale on the y-axis for continuous sales values. The code leverages `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes, while interactive tooltips appear on mouseover using D3 event handlers. Data is loaded from a CSV file using `d3.csv`, and the plot includes animated transitions for tooltip visibility.

Yyvarshachowdary@gmail.com
75% match
Loading thumbnail…

Fork of ICE-6(Scatter plot)

This scatter plot from the ICE-6 series visualizes monthly sales versus profit using D3 v7 with SVG rendering. Each circle encodes a month’s sales on the x-axis and profit on the y-axis, with a hover tooltip revealing exact values via mouse events. The chart includes gridlines, axis labels, and a legend, pulling data from a local CSV file. A title and caption provide context, while the dark theme and scaling functions (d3.scaleLinear, d3.extent) structure the visualization clearly.

Vvydeeshm@gmail.com
75% match
Loading thumbnail…

Fork of Simple Scatter Plot

This example visualizes a temperature series dataset loaded from a remote JSON file. It renders a scatter plot where each point is positioned using D3’s `scaleLinear` on the x and y axes, with circles drawn via SVG selections. The underlying `viz` function, from the fork, maps bill length against flipper length from the Penguins Dataset, but here the data source is replaced with `temp_series.json`. Axis labels and margins are configured through helper functions like `xAxisLabel` and `yAxisLabel`.

Ookahne@gmail.com
75% match