d3-x3d

v2.0.10

3D Data Driven Charting Library with D3 and X3D

NPM

README

GitHub

GPL-2.0

Latest version published 4 months ago

    npm install d3-x3d

Explore Similar Packages

Package Health Score

66 / 100

Popularity
Limited
Maintenance
Sustainable
Security
Security review needed
Community
Sustainable

Keep your project healthy

Check your package.json

Ensure all the packages you're using are healthy and well-maintained

Snyk Vulnerability Scanner

Get health score & security insights directly in your IDE

Secure Your Project

Find & fix vulnerable dependencies and insecure code

Popularity

Limited

Weekly Downloads (19)

Dependents: 0
GitHub Stars: 79
Forks: 18
Contributors: 20

Direct Usage Popularity

The npm package d3-x3d receives a total of 19 downloads a week. As such, we scored d3-x3d popularity level to be Limited.

Based on project statistics from the GitHub repository for the npm package d3-x3d, we found that it has been starred 79 times, and that 0 other projects in the ecosystem are dependent on it.

Downloads are calculated as moving averages for a period of the last 12 months, excluding weekends and known missing data points.

Security

Security review needed

Security and license risk for significant versions

All Versions

Popular

Version

Release Date

07/2019

07/2019

07/2019

07/2019

09/2021

Direct Vulnerabilities

Popular

Indirect Vulnerabilities

Popular

License Risk

Popular

All security vulnerabilities belong to production dependencies of direct and indirect packages.

License

GPL-2.0

Non-Permissive License

We noticed that this project uses a license which requires less permissive conditions such as disclosing the source code, stating changes or redistributing the source under the same license. It is advised to further consult the license terms before use.

Security Policy

We found a way for you to contribute to the project! Looks like d3-x3d is missing a security policy.

You can connect your project's repository to Snyk to stay up to date on security alerts and receive automatic fix pull requests.

    # Install the Snyk CLI and test your project
npm i snyk -g && snyk test d3-x3d

Fix it in your project with Snyk!

Maintenance

Sustainable

Commit Frequency

Open Issues: 13
Open PR: 0
Last Release: 4 months ago
Last Commit: 1 month ago

Further analysis of the maintenance status of d3-x3d based on released npm versions cadence, the repository activity, and other data points determined that its maintenance is Sustainable.

We found that d3-x3d demonstrates a positive version release cadence with at least one new version released in the past 12 months.

In the past month we didn't find any pull request activity or change in issues status has been detected for the GitHub repository.

Community

Sustainable

Readme.md: Yes
Contributing.md: Yes
Code of Conduct: No
Contributors: 20
Funding: No

With more than 10 contributors for the d3-x3d repository, this is possibly a sign for a growing and inviting community.

We found a way for you to contribute to the project! Looks like d3-x3d is missing a Code of Conduct.

Embed Package Health Score Badge

Package

Node.js Compatibility: not defined

Age: 2 years
Dependencies: 3 Direct
Versions: 31
Install Size: 19.6 MB
Dist-tags: 1
# of Files: 258
Maintainers: 1
TS Typings: No

d3-x3d has more than a single and default latest tag published for the npm package. This means, there may be other tags available for this package, such as next to indicate future releases, or stable to indicate stable releases.

Readme

d3-x3d

3D Data Driven Charting Library with D3 and X3D

Combining the power of the D3.js data-driven documents visualisation library and the Extensible 3D X3D 3D graphics standard, d3-x3d makes it simple to produce beautiful 3D data visualisations with minimal code.

Inspired by Mike Bostock's reusable charts, d3-x3d is built on a foundation of building blocks, called components, which can be combined to create a variety of different data visualisations.

The aspiration for the X3D specification is for it to become the de facto HTML5 standard for 3D graphics in the browser, in a similar manner to that of SVG (Scalable Vector Graphics). The aim is that one day X3D will be integrated as standard into all browsers, without the need for additional plugins. For the time being, there are two JavaScript based players for X3D:

X3DOM
X_ITE

Both these players are compatible with modern browsers supporting HTML5 and enable X3D scenes to be embedded in any HTML page. d3-x3d has been tested to work with both X3DOM and X_ITE (there are a couple of more advanced features and charts which currently only work with X3DOM).

Examples

Example	X3DOM	X_ITE	Observable
Area Chart	View	View	View
Multi Series Bar Chart	View	View	View
Vertical Bar Chart	View	View	View
Bubble Chart	View	View	View
Bubble Chart	View	View	View
Particle Plot	View	View	View
Scatter Plot	View	View	View
Surface Plot	View	View	View
Ribbon Chart	View	View	View
Vector Field Chart	View	View	View
Volume Slice	View	WIP	WIP

Getting Started

Include the following JavaScript and CSS files in the <head> section of your page:

If using X3DOM:

<head>
   <script src="https://d3js.org/d3.v5.min.js"></script>
   <script src="https://x3dom.org/release/x3dom.js"></script>
   <link rel="stylesheet" href="https://x3dom.org/release/x3dom.css" />
   <script src="https://raw.githack.com/jamesleesaunders/d3-x3d/master/dist/d3-x3d.js"></script>
</head>

If using X_ITE:

<head>
   <script src="https://d3js.org/d3.v5.min.js"></script>
   <script src="https://code.create3000.de/x_ite/latest/dist/x_ite.min.js"></script>
   <script src="https://raw.githack.com/andreasplesch/x_ite_dom/master/latest/x_ite_dom.js"></script>
   <link rel="stylesheet" href="https://code.create3000.de/x_ite/latest/dist/x_ite.css" />
   <script src="https://raw.githack.com/jamesleesaunders/d3-x3d/master/dist/d3-x3d.js"></script>
</head>

Add the following chartholder <div> (or <X3DCanvas>) and <script> tags to your page <body>:

If using X3DOM:

<body>
   <div id="chartholder"></div>
   <script></script>
</body>

If using X_ITE:

<body>
   <X3DCanvas id="chartholder"></X3DCanvas>
   <script></script>
</body>

Place the following code between the <script></script> tags:

// Select chartholder
var chartHolder = d3.select("#chartholder");

// Generate some data
var myData = [
	{
		key: "UK",
		values: [
			{ key: "Apples", value: 9 },
			{ key: "Oranges", value: 3 },
			{ key: "Pears", value: 5 },
			{ key: "Bananas", value: 7 }
		]
	},
	{
		key: "France",
		values: [
			{ key: "Apples", value: 5 },
			{ key: "Oranges", value: 4 },
			{ key: "Pears", value: 6 },
			{ key: "Bananas", value: 2 }
		]
	}
];

// Declare the chart component
var myChart = d3.x3d.chart.barChartMultiSeries();

// Attach chart and data to the chartholder
chartHolder
	.datum(myData)
	.call(myChart);

That's all there is to it! View the page in your browser and you should see a basic 3D bar chart:

Install from NPM

If your project is using ES6 modules you can also import d3-x3d, for example from NPM:

npm install --save d3-x3d

Then in your project:

let d3X3d = require("d3-x3d");

Components and Charts

d3-x3d has two types of reusable module: component and chart. For more information see the API Reference.

Components

The component modules are lower level building blocks which can be used independently, or combined to build higher level chart modules. For example, combining component.bars(), component.axis() and component.viewpoint() modules together we have built the chart.barChartMultiSeries(). Component modules do not generate a <X3D> tag, these should be attached to an exiting <X3D> tag.

Function	Description	Documentation
component.area()	Single series Area Chart	View
component.areaMultiSeries()	Multi series Area Chart	View
component.axis()	Single plane x/y Axis	View
component.axisThreePlane()	Three plane x/y/z Axis	View
component.bars()	Single series Bar Chart	View
component.barsMultiSeries()	Multi series Bar Chart	View
component.bubbles()	Bubble / Scatter Plot	View
component.bubblesMultiSeries()	Multi series Bubbles / Scatter Plot	View
component.crosshair()	Crosshair	View
component.heatMap()	Heat Map	View
component.particles()	Particle Plot	View
component.ribbon()	Ribbon Chart / Line Chart	View
component.ribbonMultiSeries()	Multi series Ribbon Chart	View
component.surface()	Surface Area	View
component.vectorFields()	Vector Field Chart	View
component.viewpoint()	Camera position	View
component.volumeSlice()	Volume Slice (MRI Scan)	View

Charts

The chart modules are higher level, pre-combined components, making it even easier to quickly create charts. All the chart modules are typically constructed from viewpoint, axis and one or more of the other components above. Chart modules also generate the <X3D> tag, these should be attached to a regular HTML <div> tag.

Function	Description	Documentation
chart.areaChartMultiSeries()	Multi series Area Chart & Axis	View
chart.barChartMultiSeries()	Multi series Bar Chart & Axis	View
chart.barChartVertical()	Vertical Bar Chart & Axis	View
chart.bubbleChart()	Bubble Chart & Axis	View
chart.heatMap()	Heat Map & Axis	View
chart.particlePlot()	Particle Plot & Axis	View
chart.ribbonChartMultiSeries()	Multi series Ribbon Chart	View
chart.scatterPlot()	Scatter Plot & Axis	View
chart.surfacePlot()	Surface Plot & Axis	View
chart.vectorFieldChart()	Vector Field Chart	View
chart.volumeSliceChart()	Volume Slice Chart	View

Data Structures

At its most basic description, the format of the d3-x3d data is a series of key / value pairs. Depending on whether the chart is a single series or multi series chart the data structure differ slightly.

Single Series Data

Used by charts such as a single series bar chart, the data structure is an object with the following structure:

key {string} - The series name
values {array} - An array of objects containing:
- key {string} - The value name
- value {number} - The value
- x {number} - X axis value*
- y {number} - Y axis value*
- z {number} - Z axis value*

*optional, x, y & z values are used for cartesian coordinate type graphs such as the scatter plot.

var myData = {
	key: "UK",
	values: [
		{ key: "Apples", value: 9, x: 1, y: 2, z: 5 },
		/* ... */
		{ key: "Bananas", value: 7, x: 6, y: 3, z: 8 }
	]
};

Multi Series Data

Used by charts such as the multi series scatter plot or area chart, the multi series data structure is simply an array of the single series data objects above.

var myData = [
	{
		key: "UK",
		values: [
			{ key: "Apples", value: 2 },
			/* ... */
			{ key: "Bananas", value: 3 }
		]
	},
	/* ... */
	{
		key: "France",
		values: [
			{ key: "Apples", value: 5 },
			/* ... */
			{ key: "Bananas", value: 9 }
		]
	}
];

Credits

Fabian Dubois - For the original 3D Axis, Surface Area and Scatter Plot.
David Sankel - For the original Bar Chart.
Victor Glindås - Various contributions to JSDoc and ES6 standardisation.
Jefferson Hudson - For contributions to axis labels and transitions.
Andreas Plesch - For contributing the Area Chart and Components (and generally being an x3dom hero!).
Dahshan & Polys - For permission to use the The Bell Labs Pollen data set on particle plot examples.
Also see alternative d3-3d by @Niekes.

d3-x3d dependencies

d3 d3-interpolate-curve gl-matrix

FAQs

What is d3-x3d?

3D Data Driven Charting Library with D3 and X3D. Visit Snyk Advisor to see a full health score report for d3-x3d, including popularity, security, maintenance & community analysis.

Is d3-x3d popular?

The npm package d3-x3d receives a total of 19 weekly downloads. As such, d3-x3d popularity was classified as limited. Visit the popularity section on Snyk Advisor to see the full health analysis.

Is d3-x3d well maintained?

We found indications that d3-x3d maintenance is sustainable demonstrating some project activity. We saw a total of 20 open source contributors collaborating on the project. See the full package health analysis to learn more about the package maintenance status.

Is d3-x3d safe to use?

While scanning the latest version of d3-x3d, we found that a security review is needed. A total of 116 vulnerabilities or license issues were detected. See the full security scan results.

Last updated on 17 January-2022, at 12:51 (UTC).

Build a secure application checklist

Select a recommended open source package

Minimize your risk by selecting secure & well maintained open source packages

DONE

Scan your app for vulnerabilities

Scan your application to find vulnerabilities in your: source code, open source dependencies, containers and configuration files

SCAN NOW

Fix identified vulnerabilities

Easily fix your code by leveraging automatically generated PRs

AUTO FIX

Monitor for new issues

New vulnerabilities are discovered every day. Get notified if your application is affected

MONITOR APP

Package Health Score

Keep your project healthy

Check your package.json

Snyk Vulnerability Scanner

Secure Your Project

Weekly Downloads (19)

Direct Usage Popularity

Security and license risk for significant versions

Version

Release Date

Direct Vulnerabilities

Indirect Vulnerabilities

License Risk

Commit Frequency

Embed Package Health Score Badge

Readme

d3-x3d

3D Data Driven Charting Library with D3 and X3D

Examples

Getting Started

Install from NPM

Components and Charts

Components

Charts

Data Structures

Single Series Data

Multi Series Data

Credits

d3-x3d dependencies

FAQs

What is d3-x3d?

Is d3-x3d popular?

Is d3-x3d well maintained?

Is d3-x3d safe to use?

Build a secure application checklist

Select a recommended open source package

Scan your app for vulnerabilities

Source Code

Open Source

Container

Config

Fix identified vulnerabilities

Monitor for new issues