{"id":23417358,"url":"https://github.com/niekes/d3-3d","last_synced_at":"2025-04-12T19:41:37.183Z","repository":{"id":21386913,"uuid":"92628615","full_name":"Niekes/d3-3d","owner":"Niekes","description":"d3-3d is a powerful JavaScript library designed for 3D visualizations, specifically tailored to work seamlessly with d3.js. This library enables the projection of 3D data onto web browsers, making it an essential tool for developers interested in creating immersive and dynamic visualizations.","archived":false,"fork":false,"pushed_at":"2024-01-15T16:36:32.000Z","size":3474,"stargazers_count":339,"open_issues_count":11,"forks_count":33,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-04-15T07:42:44.768Z","etag":null,"topics":["3d-elements","3d-visualization","d3-3d","d3js","javascript","js","shape","visualization"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Niekes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","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},"funding":{"ko_fi":"niekes"}},"created_at":"2017-05-27T23:00:39.000Z","updated_at":"2024-06-18T15:29:52.536Z","dependencies_parsed_at":"2023-01-11T21:11:38.038Z","dependency_job_id":"7b93a3b0-9bb8-4d41-a451-1a477a9e4308","html_url":"https://github.com/Niekes/d3-3d","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Niekes%2Fd3-3d","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Niekes%2Fd3-3d/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Niekes%2Fd3-3d/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Niekes%2Fd3-3d/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Niekes","download_url":"https://codeload.github.com/Niekes/d3-3d/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248625027,"owners_count":21135509,"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-elements","3d-visualization","d3-3d","d3js","javascript","js","shape","visualization"],"created_at":"2024-12-22T23:17:49.008Z","updated_at":"2025-04-12T19:41:37.151Z","avatar_url":"https://github.com/Niekes.png","language":"JavaScript","funding_links":["https://ko-fi.com/niekes","https://ko-fi.com/A0A3QJPZ9"],"categories":[],"sub_categories":[],"readme":"# d3-3d\n\n**d3-3d** is meant for 3d visualizations. **d3-3d** allows the projection of 3d data onto the screen in the webbrowser. It is specially designed to work with **[d3.js](https://d3js.org/)**.\n\n[![Build][build-badge]][build]\n[![Coverage][coverage-badge]][coverage]\n[![npm](https://img.shields.io/npm/dt/d3-3d)](https://www.npmjs.com/package/d3-3d)\n[![npm](https://img.shields.io/npm/dw/d3-3d)](https://www.npmjs.com/package/d3-3d)\n[![npm](https://img.shields.io/npm/l/d3-3d)](https://github.com/Niekes/d3-3d/blob/master/LICENSE)\n[![npm bundle size](https://img.shields.io/bundlephobia/minzip/d3-3d)](https://bundlephobia.com/result?p=d3-3d)\n[![npm](https://img.shields.io/npm/v/d3-3d)](https://www.npmjs.com/package/d3-3d)\n\n\u003ctable\u003e\n    \u003ctr style=\"background-color: #f6f8fa\"\u003e\n        \u003ctd\u003e\u003ca target=\"_blank\" href=\"https://codepen.io/Niekes/pen/YzBmYzR\"\u003e\u003cimg src=\"assets/surfaceplot.gif\"\u003e\u003c/a\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003ca target=\"_blank\" href=\"https://codepen.io/Niekes/pen/poGMpLw\"\u003e\u003cimg src=\"assets/scatterplot.gif\"\u003e\u003c/a\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003ca target=\"_blank\" href=\"https://codepen.io/Niekes/pen/poGMKXY\"\u003e\u003cimg src=\"assets/barchart.gif\"\u003e \u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr style=\"background-color: #f6f8fa\"\u003e\n        \u003ctd\u003e\u003ca target=\"_blank\" href=\"https://codepen.io/Niekes/pen/KKEPBVb\"\u003e\u003cimg src=\"assets/sphere.gif\"\u003e\u003c/a\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003ca target=\"_blank\" href=\"https://codepen.io/Niekes/pen/wvbzGMG\"\u003e\u003cimg src=\"assets/cone.gif\"\u003e\u003c/a\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003ca target=\"_blank\" href=\"https://codepen.io/Niekes/pen/eYadJVg\"\u003e\u003cimg src=\"assets/cylinder.gif\"\u003e \u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\nSee more [examples][examples]\n\n## Installing\n\nIf you use npm, `npm install d3-3d`. You can also download the [latest release](https://github.com/Niekes/d3-3d/releases). Otherwise use [unpkg](https://unpkg.com/d3-3d/) to get the latest release. For example:\n\n```html\n\u003cscript src=\"https://unpkg.com/d3-3d/build/d3-3d.js\"\u003e\u003c/script\u003e\n\n\u003c!-- OR --\u003e\n\n\u003cscript src=\"https://unpkg.com/d3-3d/build/d3-3d.min.js\"\u003e\u003c/script\u003e\n```\n\nFor a specific version:\n\n```html\n\u003cscript src=\"https://unpkg.com/d3-3d@version/build/d3-3d.js\"\u003e\u003c/script\u003e\n```\n\n## Import\n\nES6:\n\n```js\nimport { triangles3D, cubes3D, gridPlanes3D, points3D, lineStrips3D } from 'd3-3d';\n```\n\n## API Reference\n\n- [triangles3D().x](#triangles3dxx) - set the x accessor.\n- [triangles3D().y](#triangles3dyy) - set the y accessor.\n- [triangles3D().z](#triangles3dzz) - set the z accessor.\n- [triangles3D().scale](#triangles3dscalescale) - sets the scale for the projected points.\n- [triangles3D().rotateX](#triangles3drotatexanglex) - set the angle for the x rotation.\n- [triangles3D().rotateY](#triangles3drotateyangley) - set the angle for the y rotation.\n- [triangles3D().rotateZ](#triangles3drotatezanglez) - set the angle for the z rotation.\n- [triangles3D().rotateCenter](#triangles3drotatecenterrotatecenter) - set the the rotation center.\n- [triangles3D().origin](#triangles3doriginorigin) - set the the origin.\n- [triangles3D().sort](#triangles3dsort) - sort the 3d elements by the centroid.\n- [triangles3D().draw](#triangles3ddraw) - draw the 3d elements.\n\n### Overview\n\n**d3-3d** uses the [browser's coordinate system](https://www.w3.org/TR/css-transforms-1/#transform-rendering) and [orthographic projection](https://en.wikipedia.org/wiki/Orthographic_projection) to display your data on the screen. It will calculate the centroid for all elements and the orientation for your polygons. Due to the fact that SVG isn't very 3d compatible **d3-3d** adds 3d transformations to SVG.\n\nWith **d3-3d** you can easily visualize your 3d data.\n\n```js\nconst data3D = [\n  [\n    { x: 0, y: -1, z: 0 },\n    { x: -1, y: 1, z: 0 },\n    { x: 1, y: 1, z: 0 }\n  ]\n];\n\nconst triangles3d = triangles3D().scale(100).origin({ x: 480, y: 250 });\n\nconst projectedData = triangles3d(data3D);\n\ninit(projectedData);\n\nfunction init(data) {\n  const triangles = svg.selectAll('path').data(data);\n\n  // add your logic here...\n}\n```\n\n### Shapes\n\nDepending on the shape the input data array has to be accordingly to the shape.\n\n- **points3D** A point is represented by the `\u003ccircle\u003e` element. It does not have a draw function because it can be represented as a `\u003ccircle\u003e`. The input data array has to be an array of points where each point has three coordinates which can be accessed via the [x](#x), [y](#y) and [z](#z) accessors.\n- **lines3D** A line is represented by the `\u003cline\u003e` element. It does not have a draw function because it can be represented as a `\u003cline\u003e`. The input data array has to be an array of lines where each line is defined by a start- and an endpoint.\n- **lineStrips3D** A continuous line is represented by the `\u003cpath\u003e` element. The input data array has to be an array of points. Every point will be connected to the next point in the input data array.\n- **triangles3D** A triangle represented by the `\u003cpath\u003e` element. The input data array has to be an array of triangles where each triangle is defined by three points in counter-clockwise order.\n- **planes3D** A plane is represented by the `\u003cpath\u003e` element. The input data array has to be an array of planes where each plane is defined by four points in counter-clockwise order.\n- **gridPlanes3D** A grid is represented by _x_ planes. The input data array has to be an array of points. **d3-3d** will construct planes out of the passed data. _NOTE:_ A grid has to have always the same number of points per row. Otherwise the code will break.\n- **polygons3D** A polygon is represented by the `\u003cpath\u003e` element. The input data array has to be an array of polygons where each polygon is defined by _x_ points in counter-clockwise order.\n- **cubes3D** A grid is represented by 4 planes. The input data array has to be an array of cubes where each cube is defined by 8 vertices. To get the orientation and centroid calculation right you should pass in the data like so:\n\n![cube](assets/cube.png 'Cube')\n\n#### triangles3D().x(_x_)\n\nIf _x_ is specified, sets the _x_ accessor to the specified function or number and returns the **d3-3d** function object. If _x_ is not specified, returns the current _x_ accessor, which defaults to:\n\n```js\nfunction x(p) {\n  return p.x;\n}\n```\n\nThis function will be invoked for each point in the input data array.\n\n#### triangles3D().y(_y_)\n\nIf _y_ is specified, sets the _y_ accessor to the specified function or number and returns the **d3-3d** function object. If _y_ is not specified, returns the current _y_ accessor, which defaults to:\n\n```js\nfunction y(p) {\n  return p.y;\n}\n```\n\nThis function will be invoked for each point in the input data array.\n\n#### triangles3D().z(_z_)\n\nIf _z_ is specified, sets the _z_ accessor to the specified function or number and returns the **d3-3d** function object. If _z_ is not specified, returns the current _z_ accessor, which defaults to:\n\n```js\nfunction z(p) {\n  return p.z;\n}\n```\n\nThis function will be invoked for each point in the input data array.\n\n#### triangles3D().scale(_scale_)\n\nIf _scale_ is specified, sets the _scale_ to the specified number and returns the **d3-3d** function object. If _scale_ is not specified, returns the current _scale_.\n\n_Default:_ `1`\n\n#### triangles3D().rotateX(_angleX_)\n\nIf _angleX_ is specified, sets _angleX_ to the specified number and returns the **d3-3d** function object. If _angleX_ is not specified, returns the current _angleX_.\n\n_Default:_ `0`\n\n_angleX_ should be expressed in radians, for example: `Math.PI / 4`.\n\n#### triangles3D().rotateY(_angleY_)\n\nIf _angleY_ is specified, sets _angleY_ to the specified number and returns the **d3-3d** function object. If _angleY_ is not specified, returns the current _angleY_.\n\n_Default:_ `0`\n\n_angleY_ should be expressed in radians, for example: `Math.PI / 4`.\n\n#### triangles3D().rotateZ(_angleZ_)\n\nIf _angleZ_ is specified, sets _angleZ_ to the specified number and returns the **d3-3d** function object. If _angleZ_ is not specified, returns the current _angleZ_.\n\n_Default:_ `0`\n\n_angleZ_ should be expressed in radians, for example: `Math.PI / 4`.\n\n#### triangles3D().rotateCenter(_rotateCenter_)\n\nIf _rotateCenter_ is specified, sets rotateCenter to the specified point and returns the **d3-3d** function object. If _rotateCenter_ is not specified, returns the current _rotateCenter_.\n\n_Default:_ `{ x: 0, y: 0, z: 0 }`\n\n#### triangles3D().origin(_origin_)\n\nIf _origin_ is specified, sets origin to the specified point and returns the **d3-3d** function object. If _origin_ is not specified, returns the current _origin_.\n\n_Default:_ `{ x: 0, y: 0 }`\n\n#### triangles3D().sort()\n\nSorts the elements accordingly to the z coordinate of the calculated centroid.\n\n#### triangles3D().draw()\n\nThis function constructs an SVG `\u003cpath\u003e` element string based on the chosen [shape](#shapes). For example, selecting triangles3D in **d3-3d** implies drawing a triangle with three points, each having three coordinates `{ x: 0, y: 0, z: 0 }`. The `triangles3D().draw` method facilitates this. To draw a plane, provide four points, and so forth.\n\n[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/A0A3QJPZ9)\n\n\u003c!-- Definitions --\u003e\n\n[build-badge]: https://github.com/niekes/d3-3d/workflows/main/badge.svg\n[build]: https://github.com/niekes/d3-3d/actions\n[coverage-badge]: https://img.shields.io/codecov/c/github/niekes/d3-3d.svg\n[coverage]: https://codecov.io/github/niekes/d3-3d\n[examples]: https://codepen.io/collection/DpmByZ?sort_order=desc\u0026sort_by=id\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fniekes%2Fd3-3d","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fniekes%2Fd3-3d","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fniekes%2Fd3-3d/lists"}