{"id":13453236,"url":"https://github.com/geekplux/markvis","last_synced_at":"2025-10-04T20:55:24.608Z","repository":{"id":57291465,"uuid":"95999191","full_name":"geekplux/markvis","owner":"geekplux","description":"make visualization in markdown. 📊📈","archived":false,"fork":false,"pushed_at":"2023-09-16T03:32:07.000Z","size":585,"stargazers_count":1577,"open_issues_count":2,"forks_count":60,"subscribers_count":25,"default_branch":"master","last_synced_at":"2025-04-14T15:56:57.766Z","etag":null,"topics":["chart","d3","d3-node","markdown","markdown-editor","markdown-it","markdown-it-plugin","markdown-to-html","visual","visualization","visualizer"],"latest_commit_sha":null,"homepage":"https://markvis.js.org/","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/geekplux.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"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}},"created_at":"2017-07-02T03:04:42.000Z","updated_at":"2025-04-08T10:41:13.000Z","dependencies_parsed_at":"2024-06-18T21:24:52.384Z","dependency_job_id":"010798fb-6853-4d8c-a7cf-080d69849a68","html_url":"https://github.com/geekplux/markvis","commit_stats":{"total_commits":55,"total_committers":7,"mean_commits":7.857142857142857,"dds":"0.18181818181818177","last_synced_commit":"f17e3eab29eeeb130c5a2e992625682e877d8691"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geekplux%2Fmarkvis","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geekplux%2Fmarkvis/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geekplux%2Fmarkvis/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geekplux%2Fmarkvis/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/geekplux","download_url":"https://codeload.github.com/geekplux/markvis/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254310520,"owners_count":22049470,"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":["chart","d3","d3-node","markdown","markdown-editor","markdown-it","markdown-it-plugin","markdown-to-html","visual","visualization","visualizer"],"created_at":"2024-07-31T08:00:35.938Z","updated_at":"2025-10-04T20:55:19.553Z","avatar_url":"https://github.com/geekplux.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Uncategorized","The list","markdown","📦 Legacy \u0026 Inactive Projects"],"sub_categories":["Uncategorized"],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg width=\"250\" src=\"./docs/markvis-logo.png\" alt=\"logo\" /\u003e\n\u003c/p\u003e\n\n# Markvis\n\n\u003e Make visualization in markdown.\n\n[![NPM version](https://img.shields.io/npm/v/markvis.svg?style=flat-square)](https://npmjs.com/package/markvis) [![NPM downloads](https://img.shields.io/npm/dm/markvis.svg?style=flat-square)](https://npmjs.com/package/markvis) [![Build](https://travis-ci.org/geekplux/markvis.svg?style=flat-square)](https://travis-ci.org/geekplux/markvis) [![Coverage](https://coveralls.io/repos/github/geekplux/markvis/badge.svg?style=flat-square)](https://coveralls.io/github/geekplux/markvis) [![donate](https://img.shields.io/badge/$-donate-ff69b4.svg?maxAge=2592000\u0026style=flat-square)](https://geekplux.github.io/donate)\n[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bhttps%3A%2F%2Fgithub.com%2Fgeekplux%2Fmarkvis.svg?type=shield)](https://app.fossa.io/projects/git%2Bhttps%3A%2F%2Fgithub.com%2Fgeekplux%2Fmarkvis?ref=badge_shield)\n\n- [Documentation](https://markvis.js.org)\n- [Online Editor](https://markvis-editor.js.org)\n\n## Preview\n\n![](./docs/preview.png)\n\n# Quick Start\n\n## Install\n\n```bash\nyarn add markvis --save\nnpm install markvis --save\n```\n\n## Usage\n\n```js\nconst md = require('markdown-it')()\nconst vis = require('markvis')\nconst d3 = require('d3')  // in browser environment\nconst d3node = require('d3-node') // in node environment\n\nmd.use(vis).render(`\n  your markdown content\n`, {\n  d3,    // in browser environment\n  d3node // in node environment\n})\n```\n\nthere are [Examples](https://github.com/geekplux/markvis/tree/master/examples) which in node environment.\n\n# Motivation\n\nWe often publish articles enriched with data, since data make them more convincing and easy to interpret. Hence, techniques that enable the embedding of visualization into texts are of great importance. \n\nHowever, the most frequently used method now is to export charts as images, upload them into cloud, and then paste them into the editor.  It is a tedious process from the perspective of a writer. Besides, image loading costs much more time than that of DOM elements, which leads to poor experience from the perspective of a reader.\n\n\n# API\n\nThere are many options you can config and below is some in common. But you'd better to config the options which related to chart style in chart options, such as [markvis-bar](https://github.com/geekplux/markvis-bar), [markvis-line](https://github.com/geekplux/markvis-line), [markvis-pie](https://github.com/geekplux/markvis-pie).\n\n## options\n\n##### data\n\n- Type: `Array`\n\nData from file or web processed by d3 library.\n\n##### d3\n\n- Type: `Object`\n\n[d3](https://github.com/d3/d3) library which used in **browser** environment.\n\n##### d3node\n\n- Type: `Function`\n\n[d3-node](https://github.com/d3-node/d3-node) constructor which used in **node** environment.\n\n##### layout\n\n- Type: `String`\n\nName of chart layout. You can customize any chart layout you want.\n\n##### render\n\n- Type: `Function`\n\nCustomized renderer to render a new layout you want.\n\n##### container\n\n- Type: `String`\n- Default: `\u003cdiv id=\"container\"\u003e\u003ch2\u003eBar Chart\u003c/h2\u003e\u003cdiv id=\"chart\"\u003e\u003c/div\u003e\u003c/div\u003e`\n\nDOM contained the visualization result.\n\n##### selector\n\n- Type: `String`\n- Default: `'#chart'`\n\nDOM selector in container.\n\n##### style\n\n- Type: `String`\u003cbr\u003e\n- Default: `''`\n\nChart style.\n\n##### width\n\n- Type: `Number`\u003cbr\u003e\n- Default: `960`\n\nSVG width for chart.\n\n##### height\n\n- Type: `Number`\u003cbr\u003e\n- Default: `500`\n\nSVG height for chart.\n\n##### margin\n\n- Type: `Object`\u003cbr\u003e\n- Default: `{ top: 20, right: 20, bottom: 20, left: 20 }`\n\nMargin of the first \u003cg\u003e wrapper in SVG, usually used to add axis.\n\n\n# Contributing\n\n1. Fork it!\n2. Create your feature branch: `git checkout -b my-new-feature`\n3. Commit your changes: `git commit -am 'Add some feature'`\n4. Push to the branch: `git push origin my-new-feature`\n5. Submit a pull request :D\n\n\n# LICENSE\n\n**markvis** © [geekplux](https://github.com/geekplux), Released under the [MIT](./LICENSE) License.\u003cbr\u003e\nAuthored and maintained by geekplux with help from contributors ([list](https://github.com/geekplux/markvis/contributors)).\n\n\u003e [geekplux.com](http://geekplux.com) · GitHub [@geekplux](https://github.com/geekplux) · Twitter [@geekplux](https://twitter.com/geekplux)\n\n\n[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bhttps%3A%2F%2Fgithub.com%2Fgeekplux%2Fmarkvis.svg?type=large)](https://app.fossa.io/projects/git%2Bhttps%3A%2F%2Fgithub.com%2Fgeekplux%2Fmarkvis?ref=badge_large)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeekplux%2Fmarkvis","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgeekplux%2Fmarkvis","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeekplux%2Fmarkvis/lists"}