Untitled

100%

✓ Published0🌍 Public

Aavesh1998

Last edited Jun 3, 2020

Created on Jun 3, 2020

Forked from Untitled

This example shows a scatter plot of income versus savings, with each data point representing one person. It uses Google Charts’ `google.visualization.ScatterChart` with `arrayToDataTable` in two different chart sizes, and additionally uses CanvasJS’s `CanvasJS.Chart` to render a scatter chart with triangular markers and custom axes, a legend, and a title. The CanvasJS version includes 50 manually specified data points and axis formatting.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

Untitled

This example presents two scatter plots, one large and one small, using Google Charts. Both plots display six data points with x and y coordinates, rendered as an interactive scatter chart titled "Scatter Plot." The code loads the Google Charts library through a script tag and initializes the chart with the `google.visualization.arrayToDataTable` and `ScatterChart` APIs. A third scatter plot uses CanvasJS to visualize income versus savings data for 50 individuals, with custom axes and triangle markers.

Aavesh1998

91% match

Loading thumbnail…

Untitled

This example displays two Google Charts visualizations side by side: a pie chart and a bar chart, both titled “How Much Pizza I Ate Last Night.” The charts present the same categorical dataset of pizza toppings with corresponding slice counts. The code uses the Google Charts loader and the `corechart` package to create a `DataTable`, then instantiates a `google.visualization.ScatterChart` (mislabeled as pie) and a `google.visualization.BarChart`. Each chart is drawn into a separate `div` element with predefined width and height options.

Aavesh1998

78% match

Loading thumbnail…

Untitled

This example shows a 3D scatter plot comparing two sets of data points across three variables: a1/s1/h1 and a2/s2/h2. The visualization uses two distinct marker styles—one with black outlines and one with pink circles and green outlines—to differentiate the datasets. The code loads CSV data from a GitHub gist using the D3.js `d3.csv` function, then constructs the plot with Plotly's `scatter3d` trace type. The layout removes all margins to maximize the plot area, and the chart is rendered into a div using `Plotly.newPlot`.

AAshrith Kudidhi

72% match

Loading thumbnail…

Untitled

This example displays a 3D scatter plot of car sales data, with month, number sold, and price plotted along the three axes. It renders two distinct marker traces, one with a default style and another with a grey color and circular symbols, allowing for comparison. The visualization is built using Plotly’s `newPlot` API, which draws the chart into a designated `div` within an HTML page. The data is loaded asynchronously via `d3.csv` from a remote CSV file, and rows are transformed into arrays using a custom `unpack` helper function.

GGogineni44

72% match

Loading thumbnail…

Untitled

This example displays a 3D scatter plot with two sets of markers, each representing a distinct series of data points. It uses Plotly.js to render the visualization, with a D3 CSV loader fetching the dataset from a GitHub Gist. The code defines two traces—one with default styling and another with gray markers—and plots them across x, y, and z coordinates. The layout removes all margins, and the chart is embedded in a designated div element.

SSaahithi49

72% match

Loading thumbnail…

Untitled

This example displays two sets of three-dimensional scatter points from the Plotly `3d-scatter.csv` dataset. It shows the distribution of data points in x, y, and z coordinates, comparing two distinct groups differentiated by marker style—one with translucent, bordered circles and another with solid gray circles. The code uses the Plotly JavaScript library, called via `Plotly.newPlot`, along with `d3.csv` to fetch and parse the data. The `unpack` function extracts each coordinate column for the traces. A zero-margin layout removes all surrounding space.

LLG0498

72% match

Loading thumbnail…

Untitled

This example shows a simple scatter plot of 100 randomly generated points, each positioned on a 500-by-500 pixel SVG canvas. The visualization uses D3.js v4 scales and axes to map linear domains to screen coordinates, with red circles drawn for each point. The code appends an SVG group to the page, translates it by a 40-pixel margin, and uses `d3.scaleLinear` for both the x- and y-axes, which are rendered via `d3.axisBottom` and `d3.axisLeft`. Data is created in a loop using `Math.random()`.

Ffay Alomar

71% match

Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot uses a responsive React component and D3 scales to map age against income from a CSV dataset. The visualization employs D3’s `scaleLinear` and `extent` functions to compute domains, with custom `AxisBottom` and `AxisLeft` components rendering SVG tick marks and labels. Each data point is an SVG circle with a `title` tooltip showing formatted values via D3’s `format`. The chart features rotated axis labels, a Poppins font, and a clean color palette, with styling applied through CSS classes.

SSamir Nandardhane

71% match