{"id":23749430,"url":"https://github.com/data-forge/data-forge-plot","last_synced_at":"2025-09-03T18:44:11.505Z","repository":{"id":32513957,"uuid":"134787375","full_name":"data-forge/data-forge-plot","owner":"data-forge","description":"An experimental (work in progress) JavaScript-based plotting API for Data-Forge","archived":false,"fork":false,"pushed_at":"2023-01-12T09:21:19.000Z","size":1716,"stargazers_count":33,"open_issues_count":15,"forks_count":4,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-04-26T20:06:55.645Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/data-forge.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},"funding":{"github":"ashleydavis"}},"created_at":"2018-05-25T01:32:01.000Z","updated_at":"2024-04-04T02:38:47.000Z","dependencies_parsed_at":"2023-01-14T21:27:54.264Z","dependency_job_id":null,"html_url":"https://github.com/data-forge/data-forge-plot","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/data-forge%2Fdata-forge-plot","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/data-forge%2Fdata-forge-plot/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/data-forge%2Fdata-forge-plot/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/data-forge%2Fdata-forge-plot/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/data-forge","download_url":"https://codeload.github.com/data-forge/data-forge-plot/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":231999872,"owners_count":18458212,"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":[],"created_at":"2024-12-31T15:18:51.919Z","updated_at":"2024-12-31T15:18:52.506Z","avatar_url":"https://github.com/data-forge.png","language":"TypeScript","funding_links":["https://github.com/sponsors/ashleydavis"],"categories":[],"sub_categories":[],"readme":"# data-forge-plot\n\nThe forgiving plotting API designed for use with [Data-Forge](https://github.com/data-forge/data-forge-ts).\n\nData-Forge Plot is now a simple wrapper for [the Plot library](https://www.npmjs.com/package/plot).\n\nUse Data-Forge Plot to quickly and conveniently render charts from your data in JavaScript or TypeScript. It is an abstraction layer that connects Data-Forge with JavaScript visualization libraries so that it's easy to plot charts from your data.\n\nWhy not do your data wrangling, analysis and visualization entirely in JavaScript? To support my effort please buy or help promote my book \n[Data Wrangling with JavaScript](http://bit.ly/2t2cJu2).\n\nOr check out my blog: [The Data Wrangler](http://www.the-data-wrangler.com/).\n\nDo your prototyping and exploratory data analysis in JavaScript with [Data-Forge Notebook](http://www.data-forge-notebook.com/).\n\nPlease join the conversation on [Gitter](https://gitter.im/data-forge)\n\n[Click here to support my work](https://www.codecapers.com.au/about#support-my-work)\n\n## Breaking changes\n\nAs of version 1.0.0 Data-Forge Plot has been gutted and reimplimented in terms of the [Plot library](https://www.npmjs.com/package/plot) (which is very similar). DFP is now just a wrapper for Plot to ease my maintence burden.\n\nThe function `exportWeb` has been removed because it is to difficult to maintain.\n\nIf you want to use this in the browser please use the [Plot library](https://www.npmjs.com/package/plot) instead, e.g.:\n\n```javascript\nconst dataframe = ...\nconst plotConfig = { ... };\nconst axisMap = { ... };\nimport { plot } from \"plot\";\nimport \"@plotex/render-dom\";\nplot(dataframe.toArray(), plotConfig, axisMap)\n    .renderDOM(document.getElementByID(\"a-chart\");\n```\n\n--\n\nAs of version 0.4.0 the Nightmare/Electron depenency has been removed along with the `renderImage` function. \n\nThe `renderImage` function has been moved to the separate library [@data-forge-plot/render](todo). This has been removed due to the size that the Electron dependency adds to this package. In the future you you will have to install the separate package to render a plot to an image.\n\nPlease note that the sample code below to see how the new library is installed and *required* to access the `renderImage` function.\n\n\n## Project Goals\n\n- To simply and conveniently from a series or dataframe to chart.\n- To create charts and visualizations in Node.js and the browser.\n- To be able to serialize a chart to JSON and then reinstantiate it from the JSON in a web-app.\n- To separate configuration and data definition to make it easy to reuse charts.\n- To configure charts in JSON or fluent API.\n\n## Usage\n\nSome instructions for using Data-Forge Plot. These instructions are for JavaScript, but this library also works in TypeScript.\n\n### Install\n\n    npm install --save data-forge data-forge-plot @plotex/render-image\n\n### Setup\n\n```javascript\n    const dataForge = require('data-forge');\n    require('data-forge-fs'); // Extends Data-Forge with 'readFile' function.\n    require('data-forge-plot'); // Extends Data-Forge with the 'plot' function.\n    require('@plotex/render-image'); // Extends Data-Forge Plot with the 'renderImage' function.\n    require('@plotex/render-dom'); // Extends Data-Forge Plot with the 'renderDOM' function.\n```\n\n### Rendering a chart from a CSV file to an image file\n\n```javascript\n    const dataFrame = await dataForge.readFile(\"my-data-file.csv\").parseCSV();\n    await dataFrame.plot().renderImage(\"my-chart.png\");\n```\n\n### Rendering a chart to a web page.\n\n```javascript\n    const dataArray = // ... acquire data, e.g. from a REST API ...\n    const dataFrame = new DataFrame(dataArray);\n    const chartElement = document.getElementById(\"chart\");\n    await dataFrame.plot().renderDOM(chartElement);\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdata-forge%2Fdata-forge-plot","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdata-forge%2Fdata-forge-plot","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdata-forge%2Fdata-forge-plot/lists"}