{"id":13481165,"url":"https://github.com/jamesleesaunders/d3-x3d","last_synced_at":"2025-04-12T21:26:54.781Z","repository":{"id":37821437,"uuid":"147923474","full_name":"jamesleesaunders/d3-x3d","owner":"jamesleesaunders","description":"3D Data Driven Charting Library with D3 and X3D","archived":false,"fork":false,"pushed_at":"2024-10-24T00:51:41.000Z","size":38267,"stargazers_count":110,"open_issues_count":17,"forks_count":22,"subscribers_count":9,"default_branch":"master","last_synced_at":"2024-10-24T15:31:27.297Z","etag":null,"topics":["3d","chart","d3","dataviz","graph","visualization","x3d","x3dom"],"latest_commit_sha":null,"homepage":"https://jamesleesaunders.github.io/d3-x3d/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jamesleesaunders.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-09-08T10:23:10.000Z","updated_at":"2024-10-21T07:40:37.000Z","dependencies_parsed_at":"2024-06-07T17:54:51.436Z","dependency_job_id":"b9630a4b-75ef-434e-85f1-337752785603","html_url":"https://github.com/jamesleesaunders/d3-x3d","commit_stats":{"total_commits":835,"total_committers":16,"mean_commits":52.1875,"dds":0.2191616766467066,"last_synced_commit":"dffd35f88a01287d4ec7305e38cc736fe344d013"},"previous_names":[],"tags_count":57,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamesleesaunders%2Fd3-x3d","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamesleesaunders%2Fd3-x3d/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamesleesaunders%2Fd3-x3d/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamesleesaunders%2Fd3-x3d/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jamesleesaunders","download_url":"https://codeload.github.com/jamesleesaunders/d3-x3d/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248633559,"owners_count":21136890,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["3d","chart","d3","dataviz","graph","visualization","x3d","x3dom"],"created_at":"2024-07-31T17:00:49.289Z","updated_at":"2025-04-12T21:26:54.751Z","avatar_url":"https://github.com/jamesleesaunders.png","language":"JavaScript","funding_links":[],"categories":["Charts"],"sub_categories":[],"readme":"# d3-x3d\n\n## 3D Data Driven Charting Library with D3 and X3D\n\n[![npm version](https://badge.fury.io/js/d3-x3d.svg)](https://badge.fury.io/js/d3-x3d)\n[![Build Status](https://travis-ci.org/jamesleesaunders/d3-x3d.svg?branch=master)](https://travis-ci.org/jamesleesaunders/d3-x3d)\n[![Known Vulnerabilities](https://snyk.io/test/github/{username}/{repo}/badge.svg)](https://snyk.io/test/github/{username}/{repo})\n\n\u003ca href=\"https://raw.githack.com/jamesleesaunders/d3-x3d/master/examples/logos/d3-x3d-logo-x3dom.html\"\u003e\n   \u003cimg src=\"https://raw.githack.com/jamesleesaunders/d3-x3d/master/examples/logos/d3-x3d-logo.png\" align=\"left\" width=\"150px\" hspace=\"10\" vspace=\"6\" /\u003e\n\u003c/a\u003e\n\nCombining the power of the [D3.js](http://www.d3js.org/) data-driven documents visualisation library and the Extensible 3D [X3D](https://www.web3d.org/x3d/what-x3d) 3D graphics standard, d3-x3d makes it simple to produce beautiful 3D data visualisations with minimal code.\n\nInspired by Mike Bostock's [reusable charts](http://bost.ocks.org/mike/chart/), d3-x3d is built on a foundation of building blocks, called components, which can be combined to create a variety of different data visualisations.\n\n* [Examples](#examples)\n* [Getting Started](#getting-started)\n* [API Reference](https://jamesleesaunders.github.io/d3-x3d/)\n* [Components and Charts](#components-and-charts)\n* [Data Structures](#data-structures)\n* [Download from GitHub](https://github.com/jamesleesaunders/d3-x3d)\n* [Download from NPM](https://www.npmjs.com/package/d3-x3d)\n\nThe 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).\nThe 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:\n\n* [X3DOM](https://www.x3dom.org/)\n* [X_ITE](https://create3000.github.io/x_ite/)\n\nBoth 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).\n\n### \u003ca name=\"examples\"\u003e\u003c/a\u003eExamples\n\n| Example                | X3DOM                                                                                                           | X_ITE                                                                                                           | Observable                                                                              |\n|------------------------|-----------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------|\n| Area Chart             | [View](https://raw.githack.com/jamesleesaunders/d3-x3d/master/examples/X3DOM/chart/AreaChartMultiSeries.html)   | [View](https://raw.githack.com/jamesleesaunders/d3-x3d/master/examples/X_ITE/chart/AreaChartMultiSeries.html)   | [View](https://observablehq.com/@jamesleesaunders/d3-x3d-components-area-chart)         |\n| Multi Series Bar Chart | [View](https://raw.githack.com/jamesleesaunders/d3-x3d/master/examples/X3DOM/chart/BarChartMultiSeries.html)    | [View](https://raw.githack.com/jamesleesaunders/d3-x3d/master/examples/X_ITE/chart/BarChartMultiSeries.html)    | [View](https://observablehq.com/@jamesleesaunders/d3-x3d-components-bar-charts)         |\n| Vertical Bar Chart     | [View](https://raw.githack.com/jamesleesaunders/d3-x3d/master/examples/X3DOM/chart/BarChartVertical.html)       | [View](https://raw.githack.com/jamesleesaunders/d3-x3d/master/examples/X_ITE/chart/BarChartVertical.html)       | [View](https://observablehq.com/@jamesleesaunders/d3-x3d-components-bar-charts)         |\n| Bubble Chart           | [View](https://raw.githack.com/jamesleesaunders/d3-x3d/master/examples/X3DOM/chart/BubbleChart.html)            | [View](https://raw.githack.com/jamesleesaunders/d3-x3d/master/examples/X_ITE/chart/BubbleChart.html)            | [View](https://observablehq.com/@jamesleesaunders/d3-x3d-components-bubbles)            |\n| Donut Chart            | [View](https://raw.githack.com/jamesleesaunders/d3-x3d/master/examples/X3DOM/chart/DonutChart.html)             | [View](https://raw.githack.com/jamesleesaunders/d3-x3d/master/examples/X_ITE/chart/DonutChart.html)             | [View](https://observablehq.com/@jamesleesaunders/d3-x3d-components-donut-chart)        |\n| Heat Map               | [View](https://raw.githack.com/jamesleesaunders/d3-x3d/master/examples/X3DOM/chart/HeatMap.html)                | [View](https://raw.githack.com/jamesleesaunders/d3-x3d/master/examples/X_ITE/chart/HeatMap.html)                | WIP                                                                                     |\n| Particle Plot          | [View](https://raw.githack.com/jamesleesaunders/d3-x3d/master/examples/X3DOM/chart/ParticlePlot.html)           | [View](https://raw.githack.com/jamesleesaunders/d3-x3d/master/examples/X_ITE/chart/ParticlePlot.html)           | [View](https://observablehq.com/@jamesleesaunders/d3-x3d-components-particles)          |\n| Scatter Plot           | [View](https://raw.githack.com/jamesleesaunders/d3-x3d/master/examples/X3DOM/chart/ScatterPlot.html)            | [View](https://raw.githack.com/jamesleesaunders/d3-x3d/master/examples/X_ITE/chart/ScatterPlot.html)            | WIP                                                                                     |\n| Spot Plot              | [View](https://raw.githack.com/jamesleesaunders/d3-x3d/master/examples/X3DOM/chart/SpotPlot.html)               | [View](https://raw.githack.com/jamesleesaunders/d3-x3d/master/examples/X_ITE/chart/SpotPlot.html)               | WIP                                                                                     |\n| Surface Plot           | [View](https://raw.githack.com/jamesleesaunders/d3-x3d/master/examples/X3DOM/chart/SurfacePlot.html)            | [View](https://raw.githack.com/jamesleesaunders/d3-x3d/master/examples/X_ITE/chart/SurfacePlot.html)            | [View](https://observablehq.com/@jamesleesaunders/d3-x3d-components-surface-plot)       |\n| Ribbon Chart           | [View](https://raw.githack.com/jamesleesaunders/d3-x3d/master/examples/X3DOM/chart/RibbonChartMultiSeries.html) | [View](https://raw.githack.com/jamesleesaunders/d3-x3d/master/examples/X_ITE/chart/RibbonChartMultiSeries.html) | [View](https://observablehq.com/@jamesleesaunders/d3-x3d-components-ribbon-chart)       |\n| Vector Field Chart     | [View](https://raw.githack.com/jamesleesaunders/d3-x3d/master/examples/X3DOM/chart/VectorFieldChart.html)       | [View](https://raw.githack.com/jamesleesaunders/d3-x3d/master/examples/X_ITE/chart/VectorFieldChart.html)       | [View](https://observablehq.com/@jamesleesaunders/d3-x3d-components-vector-field-chart) |\n| Volume Slice           | [View](https://raw.githack.com/jamesleesaunders/d3-x3d/master/examples/X3DOM/chart/VolumeSliceChart.html)       | WIP                                                                                                             | WIP                                                                                     |\n\n### \u003ca name=\"getting-started\"\u003e\u003c/a\u003eGetting Started\n\nInclude the following JavaScript and CSS files in the `\u003chead\u003e` section of your page:\n\nIf using X3DOM:\n```html\n\u003chead\u003e\n   \u003cscript src=\"https://d3js.org/d3.v7.min.js\"\u003e\u003c/script\u003e\n   \u003cscript src=\"https://x3dom.org/release/x3dom.js\"\u003e\u003c/script\u003e\n   \u003clink rel=\"stylesheet\" href=\"https://x3dom.org/release/x3dom.css\" /\u003e\n   \u003cscript src=\"https://raw.githack.com/jamesleesaunders/d3-x3d/master/dist/d3-x3d.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n```\n\nIf using X_ITE:\n```html\n\u003chead\u003e\n   \u003cscript src=\"https://d3js.org/d3.v7.min.js\"\u003e\u003c/script\u003e\n   \u003cscript src=\"https://cdn.jsdelivr.net/npm/x_ite@latest/dist/x_ite.js\"\u003e\u003c/script\u003e\n   \u003cscript src=\"https://raw.githack.com/jamesleesaunders/d3-x3d/master/dist/d3-x3d.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n```\n\nAdd the following chartholder `\u003cdiv\u003e` (or `\u003cx3d-canvas\u003e`) and `\u003cscript\u003e` tags to your page `\u003cbody\u003e`:\n\nIf using X3DOM:\n```html\n\u003cbody\u003e\n   \u003cdiv id=\"chartholder\"\u003e\u003c/div\u003e\n   \u003cscript\u003e\u003c/script\u003e\n\u003c/body\u003e\n```\n\nIf using X_ITE:\n```html\n\u003cbody\u003e\n   \u003cx3d-canvas id=\"chartholder\"\u003e\u003c/x3d-canvas\u003e\n   \u003cscript\u003e\u003c/script\u003e\n\u003c/body\u003e\n```\n\nPlace the following code between the `\u003cscript\u003e\u003c/script\u003e` tags:\n```javascript\n// Select chartholder\nvar chartHolder = d3.select(\"#chartholder\");\n\n// Generate some data\nvar myData = [\n\t{\n\t\tkey: \"UK\",\n\t\tvalues: [\n\t\t\t{ key: \"Apples\", value: 9 },\n\t\t\t{ key: \"Oranges\", value: 3 },\n\t\t\t{ key: \"Pears\", value: 5 },\n\t\t\t{ key: \"Bananas\", value: 7 }\n\t\t]\n\t},\n\t{\n\t\tkey: \"France\",\n\t\tvalues: [\n\t\t\t{ key: \"Apples\", value: 5 },\n\t\t\t{ key: \"Oranges\", value: 4 },\n\t\t\t{ key: \"Pears\", value: 6 },\n\t\t\t{ key: \"Bananas\", value: 2 }\n\t\t]\n\t}\n];\n\n// Declare the chart component\nvar myChart = d3.x3d.chart.barChartMultiSeries();\n\n// Attach chart and data to the chartholder\nchartHolder\n\t.datum(myData)\n\t.call(myChart);\n```\n\nThat's all there is to it! View the page in your browser and you should see a basic 3D bar chart:\n\n\u003cimg src=\"https://raw.githack.com/jamesleesaunders/d3-x3d/master/examples/assets/BarChartMultiSeries.png\" width=\"400px\"\u003e\n\n#### Install from NPM\n\nIf your project is using ES6 modules you can also import d3-x3d, for example [from NPM](https://www.npmjs.com/package/d3-x3d):\n\n```bash\nnpm install --save d3-x3d\n```\n\nThen in your project:\n\n```javascript\nlet d3X3d = require(\"d3-x3d\");\n```\n\n### \u003ca name=\"components-and-charts\"\u003e\u003c/a\u003eComponents and Charts\n\nd3-x3d has two types of reusable module: `component` and `chart`. For more information see the [API Reference](https://jamesleesaunders.github.io/d3-x3d/).\n\n#### Components\n\nThe `component` modules are lower level building blocks which can be used independently, or combined to build higher level `chart` modules.\nFor example, combining `component.bars()`, `component.axis()` and `component.viewpoint()` modules together we have built the `chart.barChartMultiSeries()`.\nComponent modules do not generate a `\u003cX3D\u003e` tag, these should be attached to an exiting `\u003cX3D\u003e` tag.\n\n| Function                       | Description                         | Documentation                                                             |\n|--------------------------------|-------------------------------------|---------------------------------------------------------------------------|\n| component.area()               | Single series Area Chart            | [View](https://jamesleesaunders.github.io/d3-x3d/area.html)               |\n| component.areaMultiSeries()    | Multi series Area Chart             | [View](https://jamesleesaunders.github.io/d3-x3d/areaMultiSeries.html)    |\n| component.axis()               | Single plane x/y Axis               | [View](https://jamesleesaunders.github.io/d3-x3d/axis.html)               |\n| component.axisThreePlane()     | Three plane x/y/z Axis              | [View](https://jamesleesaunders.github.io/d3-x3d/axisThreePlane.html)     |\n| component.bars()               | Single series Bar Chart             | [View](https://jamesleesaunders.github.io/d3-x3d/bars.html)               |\n| component.barsMultiSeries()    | Multi series Bar Chart              | [View](https://jamesleesaunders.github.io/d3-x3d/barsMultiSeries.html)    |\n| component.bubbles()            | Bubble / Scatter Plot               | [View](https://jamesleesaunders.github.io/d3-x3d/bubbles.html)            |\n| component.bubblesMultiSeries() | Multi series Bubbles / Scatter Plot | [View](https://jamesleesaunders.github.io/d3-x3d/bubblesMultiSeries.html) |\n| component.crosshair()          | Crosshair                           | [View](https://jamesleesaunders.github.io/d3-x3d/crosshair.html)          |\n| component.donut()              | Donut Chart                         | [View](https://jamesleesaunders.github.io/d3-x3d/donut.html)              |\n| component.heatMap()            | Heat Map                            | [View](https://jamesleesaunders.github.io/d3-x3d/heatMap.html)            |\n| component.intersectPlanes()    | Intersecting Planes                 | [View](https://jamesleesaunders.github.io/d3-x3d/intersectPlanes.html)    |\n| component.particles()          | Particle Plot                       | [View](https://jamesleesaunders.github.io/d3-x3d/particles.html)          |\n| component.ribbon()             | Ribbon Chart / Line Chart           | [View](https://jamesleesaunders.github.io/d3-x3d/ribbon.html)             |\n| component.ribbonMultiSeries()  | Multi series Ribbon Chart           | [View](https://jamesleesaunders.github.io/d3-x3d/ribbonMultiSeries.html)  |\n| component.spots()              | Spot Plot                           | [View](https://jamesleesaunders.github.io/d3-x3d/spots.html)              |\n| component.spotsMultiSeries()   | Multi series Spot Plot              | [View](https://jamesleesaunders.github.io/d3-x3d/spotsMultiSeries.html)   |\n| component.surface()            | Surface Area                        | [View](https://jamesleesaunders.github.io/d3-x3d/surface.html)            |\n| component.vectorFields()       | Vector Field Chart                  | [View](https://jamesleesaunders.github.io/d3-x3d/vectorFields.html)       |\n| component.viewpoint()          | Camera position                     | [View](https://jamesleesaunders.github.io/d3-x3d/viewpoint.html)          |\n| component.volumeSlice()        | Volume Slice (MRI Scan)             | [View](https://jamesleesaunders.github.io/d3-x3d/volumeSlice.html)        |\n\n#### Charts\n\nThe `chart` modules are higher level, pre-combined components, making it even easier to quickly create charts.\nAll the chart modules are typically constructed from viewpoint, axis and one or more of the other components above.\nChart modules also generate the `\u003cX3D\u003e` tag, these should be attached to a regular HTML `\u003cdiv\u003e` tag.\n\n| Function                       | Description                    | Documentation                                                                 |\n|--------------------------------|--------------------------------|-------------------------------------------------------------------------------|\n| chart.areaChartMultiSeries()   | Multi series Area Chart \u0026 Axis | [View](https://jamesleesaunders.github.io/d3-x3d/areaChartMultiSeries.html)   |\n| chart.barChartMultiSeries()    | Multi series Bar Chart \u0026 Axis  | [View](https://jamesleesaunders.github.io/d3-x3d/barChartMultiSeries.html)    |\n| chart.barChartVertical()       | Vertical Bar Chart \u0026 Axis      | [View](https://jamesleesaunders.github.io/d3-x3d/barChartVertical.html)       |\n| chart.bubbleChart()            | Bubble Chart \u0026 Axis            | [View](https://jamesleesaunders.github.io/d3-x3d/bubbleChart.html)            |\n| chart.donutChart()             | Donut Chart                    | [View](https://jamesleesaunders.github.io/d3-x3d/donutChart.html)             |\n| chart.heatMap()                | Heat Map \u0026 Axis                | [View](https://jamesleesaunders.github.io/d3-x3d/heatMap.html)                |\n| chart.particlePlot()           | Particle Plot \u0026 Axis           | [View](https://jamesleesaunders.github.io/d3-x3d/particlePlot.html)           |\n| chart.ribbonChartMultiSeries() | Multi series Ribbon Chart      | [View](https://jamesleesaunders.github.io/d3-x3d/ribbonChartMultiSeries.html) |\n| chart.scatterPlot()            | Scatter Plot \u0026 Axis            | [View](https://jamesleesaunders.github.io/d3-x3d/scatterPlot.html)            |\n| chart.spotPlot()               | Spot Plot \u0026 Axis               | [View](https://jamesleesaunders.github.io/d3-x3d/spotPlot.html)               |\n| chart.surfacePlot()            | Surface Plot \u0026 Axis            | [View](https://jamesleesaunders.github.io/d3-x3d/surfacePlot.html)            |\n| chart.vectorFieldChart()       | Vector Field Chart             | [View](https://jamesleesaunders.github.io/d3-x3d/vectorFieldChart.html)       |\n| chart.volumeSliceChart()       | Volume Slice Chart             | [View](https://jamesleesaunders.github.io/d3-x3d/volumeSliceChart.html)       |\n\n### \u003ca name=\"data-structures\"\u003e\u003c/a\u003eData Structures\n\nAt 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.\n\n#### Single Series Data\n\nUsed by charts such as a single series bar chart, the data structure is an object with the following structure:\n* `key` {string} - The series name\n* `values` {array} - An array of objects containing:\n  * `key` {string} - The value name\n  * `value` {number} - The value\n  * `x` {number} - X axis value\\*\n  * `y` {number} - Y axis value\\*\n  * `z` {number} - Z axis value\\*\n\n_\\*optional, `x`, `y` \u0026 `z` values are used for cartesian coordinate type graphs such as the scatter plot._\n\n```javascript\nvar myData = {\n\tkey: \"UK\",\n\tvalues: [\n\t\t{ key: \"Apples\", value: 9, x: 1, y: 2, z: 5 },\n\t\t/* ... */\n\t\t{ key: \"Bananas\", value: 7, x: 6, y: 3, z: 8 }\n\t]\n};\n```\n\n#### Multi Series Data\n\nUsed 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.\n\n```javascript\nvar myData = [\n\t{\n\t\tkey: \"UK\",\n\t\tvalues: [\n\t\t\t{ key: \"Apples\", value: 2 },\n\t\t\t/* ... */\n\t\t\t{ key: \"Bananas\", value: 3 }\n\t\t]\n\t},\n\t/* ... */\n\t{\n\t\tkey: \"France\",\n\t\tvalues: [\n\t\t\t{ key: \"Apples\", value: 5 },\n\t\t\t/* ... */\n\t\t\t{ key: \"Bananas\", value: 9 }\n\t\t]\n\t}\n];\n```\n\n### Credits\n\n* Fabian Dubois - For the original [3D Axis](http://bl.ocks.org/fabid/61cbfe14de686cc25c47/), [Surface Area](https://github.com/fabid/d3-x3dom-shape) and [Scatter Plot](http://bl.ocks.org/fabid/acb5dc4961ffa741b52b).\n* David Sankel - For the original [Bar Chart](http://bl.ocks.org/camio/5087116).\n* Victor Glindås - Various contributions to JSDoc and ES6 standardisation.\n* Jefferson Hudson - For contributions to axis labels and transitions.\n* Andreas Plesch - For contributing the Area Chart and Components (and generally being an x3dom hero!).\n* Holger Seelig - For assistance in integration with [X_ITE](https://create3000.github.io/x_ite/).\n* Dahshan \u0026 Polys - For permission to use the The Bell Labs Pollen data set on particle plot examples.\n* Also see alternative [d3-3d](https://github.com/Niekes/d3-3d) by @Niekes.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjamesleesaunders%2Fd3-x3d","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjamesleesaunders%2Fd3-x3d","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjamesleesaunders%2Fd3-x3d/lists"}