{"id":19433085,"url":"https://github.com/pariazar/imagine-graph","last_synced_at":"2025-02-25T06:18:52.996Z","repository":{"id":142514361,"uuid":"613446040","full_name":"pariazar/imagine-graph","owner":"pariazar","description":"This npm package offers a user-friendly way to create interactive charts, graphs, and maps from various data sources. With its intuitive interface and powerful tools, users can easily generate stunning visualizations to better understand their data and communicate insights to others.","archived":false,"fork":false,"pushed_at":"2023-07-27T09:33:52.000Z","size":498,"stargazers_count":1,"open_issues_count":3,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-07T20:34:17.322Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/pariazar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-03-13T15:28:13.000Z","updated_at":"2023-07-24T05:14:19.000Z","dependencies_parsed_at":null,"dependency_job_id":"93fdf887-15db-46fe-afa0-dedc77b554ed","html_url":"https://github.com/pariazar/imagine-graph","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pariazar%2Fimagine-graph","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pariazar%2Fimagine-graph/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pariazar%2Fimagine-graph/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pariazar%2Fimagine-graph/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pariazar","download_url":"https://codeload.github.com/pariazar/imagine-graph/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240612855,"owners_count":19829088,"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-11-10T14:38:28.676Z","updated_at":"2025-02-25T06:18:52.975Z","avatar_url":"https://github.com/pariazar.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# imagine-graph\n\u003cdiv style=\"display: flex;\"\u003e\n\n[![npm](https://img.shields.io/npm/v/imagine-graph.svg?style=flat-square)](https://www.npmjs.com/package/imagine-graph)\n![building workflow](https://github.com/pariazar/imagine-graph/actions/workflows/nodejs.yml/badge.svg)\n[![Maintainability](https://api.codeclimate.com/v1/badges/5e1d71252ff1ec942a61/maintainability)](https://codeclimate.com/github/pariazar/imagine-graph/maintainability)\n[![GitHub issues](https://img.shields.io/github/issues/pariazar/imagine-graph)](https://github.com/pariazar/imagine-graph/issues)\n[![License: MIT](https://img.shields.io/badge/License-MIT-0298c3.svg)](https://opensource.org/licenses/MIT)\n\n\u003c/div\u003e\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"./images/cover.png\"/\u003e\n\u003c/p\u003e\nThis npm package offers a user-friendly way to create interactive charts, graphs, and maps from various data sources. With its intuitive interface and powerful tools, users can easily generate stunning visualizations to better understand their data and communicate insights to others.\n\u003c/br\u003e\n\n### Install the package:\n\n```bash\nnpm install imagine-graph\n```\n\n\n### Bar Chart\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"./images/barChart.png\" height=\"400\" width=\"auto\"/\u003e\n\u003c/p\u003e\nTo use the chart functions, you first need to install the npm package and import the relevant function(s) into your project. Here's an example of how to use the createBarChart function:\n\u003c/br\u003e\nImport the createBarChart function into your project:\n\n```javascript\nconst { createBarChart } = require('imagine-graph');\n```\n\nCall the createBarChart function with your data and options:\n\n```javascript\nconst data = [\n    { label: 'A', value: 10 },\n    { label: 'B', value: 20 },\n    { label: 'C', value: 30 },\n    { label: 'D', value: 15 },\n];\n\nconst options = {\n    title: 'My Bar Chart',\n    width: 600,\n    height: 400,\n    backgroundColor: '#ffffff',\n    borderColor: '#75a485',\n    titleColor: '#75a485',\n    labelColor: '#75a485',\n    borderWidth: 2\n};\n\ncreateBarChart(data, options, './mychart.png')\n    .then(filePath =\u003e {\n        console.log(`Chart saved to ${filePath}`);\n    })\n    .catch(error =\u003e {\n        console.error('Error creating chart:', error);\n    });\n\n```\n\nor can access buffer by calling following method and don't pass path\n```javascript\n// To get the image buffer\nconst imageBuffer = await createBarChart(data, options);\nconsole.log(imageBuffer);\n// \u003cBuffer 89 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49 48 44 52 00 00 03 20 00 00 02 58 08 06 00 00 00 9a 76 82 70 00 00 00 06 62 4b 47 44 00 ff 00 ff 00 ff a0 bd a7 ... 36691 more bytes\u003e\n```\n\u003chr\u003e\n## Line Chart\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"./images/lineChart.png\" height=\"400\" width=\"auto\"/\u003e\n\u003c/p\u003e\nImport the createLineChart function into your project:\n\n```javascript\nconst { createLineChart } = require('imagine-graph');\n```\n\nCall the createLineChart function with your data and options:\n\n```javascript\nconst data = [\n    { label: 'A', value: 10 },\n    { label: 'B', value: 20 },\n    { label: 'C', value: 30 },\n    { label: 'D', value: 15 },\n];\n\nconst options = {\n    title: 'My Line Chart',\n    width: 600,\n    height: 400,\n    backgroundColor: '#ffffff',\n    borderColor: '#75a485',\n    titleColor: '#75a485',\n    labelColor: '#75a485',\n    borderWidth: 2\n};\n\ncreateLineChart(data, options, './mychart.png')\n    .then(filePath =\u003e {\n        console.log(`Chart saved to ${filePath}`);\n    })\n    .catch(error =\u003e {\n        console.error('Error creating chart:', error);\n    });\n```\n\nor can access buffer by calling following method and don't pass path\n\n```javascript\n// To get the image buffer\nconst imageBuffer = await createLineChart(data, options);\nconsole.log(imageBuffer);\n// \u003cBuffer 89 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49 48 44 52 00 00 03 20 00 00 02 58 08 06 00 00 00 9a 76 82 70 00 00 00 06 62 4b 47 44 00 ff 00 ff 00 ff a0 bd a7 ... 36691 more bytes\u003e\n```\n\n\u003chr\u003e\n\n## Bubble Chart\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"./images/bubbleChart.png\" height=\"400\" width=\"auto\"/\u003e\n\u003c/p\u003e\n\nThe createBubbleChart function allows you to create an interactive bubble chart from a given dataset. The chart can be customized with various options to match your needs.\n\u003c/br\u003e\nTo use the \u003cstrong\u003ecreateBubbleChart\u003c/strong\u003e function, you need to first import it from the imagine-graph package:\n\n```javascript\nconst { createBubbleChart } = require('imagine-graph');\n```\n\nThen, you can call the createBubbleChart function with your data and options:\n\n```javascript\nconst data = [\n    { x: 10, y: 20, r: 5, label: 'A' },\n    { x: 20, y: 30, r: 10, label: 'B' },\n    { x: 30, y: 10, r: 15, label: 'C' },\n    { x: 15, y: 25, r: 8, label: 'D' },\n];\n\nconst options = {\n    title: 'My Bubble Chart',\n    width: 600,\n    height: 400,\n    backgroundColor: '#ffffff',\n    borderColor: '#75a485',\n    titleColor: '#75a485',\n    labelColor: '#75a485',\n    borderWidth: 2,\n    tooltip: function(d) {\n        return `(${d.x}, ${d.y}): ${d.r}`;\n    },\n    xLabel: 'X Axis Label',\n    yLabel: 'Y Axis Label',\n    xTicks: 10,\n    yTicks: 5,\n    xTickCount: 5,\n    yTickCount: 5,\n};\n\ncreateBubbleChart(data, options, './mychart.png')\n    .then(filePath =\u003e {\n        console.log(`Chart saved to ${filePath}`);\n    })\n    .catch(error =\u003e {\n        console.error('Error creating chart:', error);\n    });\n\n```\n\nThe path argument is the path where the chart image will be saved.\n\u003c/br\u003e\nAlternatively, you can access the image buffer by calling the createBubbleChart function without the path argument:\n\n```javascript\nconst imageBuffer = await createBubbleChart(data, options);\nconsole.log(imageBuffer);\n// \u003cBuffer ...\u003e\n```\n\u003chr\u003e\n\n## Pie Chart\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"./images/pieChart.png\" height=\"400\" width=\"auto\"/\u003e\n\u003c/p\u003e\n\nImport the createPieChart function into your project:\n\n```javascript\nconst { createPieChart } = require('imagine-graph');\n```\nCall the createPieChart function with your data and options:\n\n```javascript\nconst data = [\n    { label: 'A', value: 10 },\n    { label: 'B', value: 20 },\n    { label: 'C', value: 30 },\n    { label: 'D', value: 15 },\n];\n\nconst options = {\n    title: 'My Pie Chart',\n    width: 600,\n    height: 400,\n    backgroundColor: '#ffffff',\n    borderColor: '#75a485',\n    titleColor: '#75a485',\n    labelColor: '#75a485',\n    borderWidth: 2\n};\n\ncreatePieChart(data, options, './mychart.png')\n    .then(filePath =\u003e {\n        console.log(`Chart saved to ${filePath}`);\n    })\n    .catch(error =\u003e {\n        console.error('Error creating chart:', error);\n    });\n```\n\nCall the createPieChart function with your data and options:\n\n```javascript\n// To get the image buffer\nconst imageBuffer = await createPieChart(data, options);\nconsole.log(imageBuffer);\n// \u003cBuffer 89 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49 48 44 52 00 00 03 20 00 00 02 58 08 06 00 00 00 9a 76 82 70 00 00 00 06 62 4b 47 44 00 ff 00 ff 00 ff a0 bd a7 ... 26337 more bytes\u003e\n```\n\n\u003chr\u003e\n\n## Scatter Chart\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"./images/scatterChart.png\" height=\"400\" width=\"auto\"/\u003e\n\u003c/p\u003e\n\nImport the createScatterChart function into your project:\n\n```javascript\nconst { createScatterChart } = require('imagine-graph');\n```\n\nCall the createScatterChart function with your data and options:\n\n```javascript\nconst data = [\n    { x: 1, y: 10 },\n    { x: 2, y: 20 },\n    { x: 3, y: 30 },\n    { x: 4, y: 15 },\n];\n\nconst options = {\n    title: 'My Scatter Chart',\n    width: 600,\n    height: 400,\n    backgroundColor: '#ffffff',\n    borderColor: '#75a485',\n    titleColor: '#75a485',\n    labelColor: '#75a485',\n    borderWidth: 2,\n    xAxisLabel: 'X-Axis',\n    yAxisLabel: 'Y-Axis'\n};\n\ncreateScatterChart(data, options, './mychart.png')\n    .then(filePath =\u003e {\n        console.log(`Chart saved to ${filePath}`);\n    })\n    .catch(error =\u003e {\n        console.error('Error creating chart:', error);\n    });\n```\n\nOr you can access the image buffer by calling the following method and not pass a path:\n\n```javascript\n// To get the image buffer\nconst imageBuffer = await createScatterChart(data, options);\nconsole.log(imageBuffer);\n// \u003cBuffer 89 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49 48 44 52 00 00 03 20 00 00 02 58 08 06 00 00 00 9a 76 82 70 00 00 00 06 62 4b 47 44 00 ff 00 ff 00 ff a0 bd a7 ... 26337 more bytes\u003e\n```\n\n## Support\n  - [Bug Reports](https://github.com/pariazar/imagine-graph/issues/)\n\n## Contributors\n\u003cp\u003e\nPull requests are always welcome! Please base pull requests against the main branch and follow the contributing guide.\n\n  - [Contributors](https://github.com/pariazar/imagine-graph/blob/main/CONTRIBUTING.md)\n\n\nif your pull requests makes documentation changes, please update readme file.\n\u003c/p\u003e\n\n## License\n\nThis project is licensed under the terms of the\nMIT license\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpariazar%2Fimagine-graph","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpariazar%2Fimagine-graph","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpariazar%2Fimagine-graph/lists"}