Improve 3D scatter plot example visualization

Open
#120 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
45/100
Issue type
Documentation
Clarity
Mostly clear
Activity status
Stale
Tech stack
javascript
Domain
data-visualization, documentation

Research direction

Start at the 3D scatter plot example linked in the issue and compare its current marker settings with the proposed trace snippets. Adjust the example to use smaller markers and lower opacity so the data structure and density are easier to see. Done means the updated example renders the clearer visualization shown in the attached screenshot.

Written by the indexing model from the issue text.

Description

The example from https://plotly.com/javascript/3d-scatter-plots/ is not a good visualization just because there is so much being plotted and the points are so large, which makes it even more difficult to estimate density. Setting lower opacity and smaller circles makes it much easier to see the structure of the data, which is already challenging for any kind of 3D plot. This can be tweaked depending on what we aim to showcase in the data.

New traces

var trace1 = {
	x:unpack(rows, 'x1'), y: unpack(rows, 'y1'), z: unpack(rows, 'z1'),
	mode: 'markers',
	marker: {
		size: 2,
		opacity: 0.5},
	type: 'scatter3d'
};

var trace2 = {
	x:unpack(rows, 'x2'), y: unpack(rows, 'y2'), z: unpack(rows, 'z2'),
	mode: 'markers',
	marker: {
		color: 'rgb(127, 127, 127)',
		size: 4,
		symbol: 'circle',
		line: {
		color: 'rgb(204, 204, 204)',
		width: 1},
		opacity: 0.8},
	type: 'scatter3d'};

New scatter plot

Screenshot from 2021-06-08 05-09-33

Dominant language
Jupyter Notebook
Stars
59
Forks
73
Avg merge
1d 19h
Merged PRs (30d)
3

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from plotly/graphing-library-docs

All issues in plotly/graphing-library-docs

Similar issues

More Data Visualization issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.