Gist 8ecb1b00a620078a9e4f

100%

Gist 8ecb1b00a620078a9e4f

✓ Published0🌍 Public

Last edited May 4, 2015

Created on May 4, 2015

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.

AI-generated description

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

91% 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

90% 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

89% 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

80% match

Loading thumbnail…

ice7 part3

This example shows a simple line chart of monthly sales data, with each data point marked by a circle. The chart uses D3.js v7 to render an SVG, with a steelblue line and white-bordered circles. Hovering over a circle reveals a tooltip displaying the month and sales value. The code sets up band and linear scales for the x and y axes, uses the `d3.line` generator to draw the path, and labels both axes for clarity.

Jjammigumpula.priyanka193@gmail.com

77% match

Loading thumbnail…

Fork of D3 Scatter Plot Vanilla Javascript (simple_example)

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.

FFrancisco Ibelles

76% match

Loading thumbnail…

ICE7 linechart

This line chart visualizes monthly sales in 2022, with the x-axis showing months and the y-axis displaying sales figures in thousands of USD. The chart is rendered as an SVG using D3 v5, employing `scalePoint`, `scaleLinear`, `axisBottom`, and `axisLeft` for scales and axes. A purple line path is generated with D3’s `line` API, and the data is loaded from a CSV file via `d3.csv`. Styling for fonts, grid lines, and the line stroke is defined in a separate CSS file.

74% match

Loading thumbnail…

ICE 7 Line Chart

This chart shows sample sales data from 2010 to 2022 as a single line, with a time-scaled x-axis for years and a linear y-axis for sales values. The visualization uses D3 v5 to load CSV data, then draws an SVG line path using `d3.line`, with axes generated by `d3.axisBottom` and `d3.axisLeft`. The code imports modules like `scaleTime`, `scaleLinear`, `extent`, and `max` from D3 via a Rollup bundle that outputs to `bundle.js`. The styling applies custom CSS for gridlines, axis labels, and the stroke color of the line path.

Ddheeraj1509

74% match