Nitrogen Peroxide Monoxide

    markvis

    0.0.12 • Public • Published

    logo

    Markvis

    Make visualization in markdown.

    NPM version NPM downloads Build Coverage donate FOSSA Status

    Preview

    Quick Start

    Install

    yarn add markvis --save
    npm install markvis --save

    Usage

    const md = require('markdown-it')()
    const vis = require('markvis')
    const d3 = require('d3')  // in browser environment
    const d3node = require('d3-node') // in node environment
     
    md.use(vis).render(`
      your makrdown content
    `, {
      d3,    // in browser environment
      d3node // in node environment
    })

    there are Examples which in node environment.

    Motivation

    Very often we need to insert some data into our articles to make them more convincing, and since we are more sensible of information in charts than statistics, how to easily and conveniently embed a chart in an article is important. However, common method is to export a chart as an image, then upload it to an Image Hosting and get a url, finally paste the url to editor, which is a tedious process from writer's perspective.

    Also, it makes the image loading time become much longer than that of the DOM elements, which may be/is a bad experience from reader's perspective.

    API

    There 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, markvis-line, markvis-pie.

    options

    data
    • Type: Array

    Data from file or web processed by d3 library.

    d3
    • Type: Object

    d3 library which used in browser environment.

    d3node
    • Type: Function

    d3-node constructor which used in node environment.

    layout
    • Type: String

    Name of chart layout. You can customize any chart layout you want.

    render
    • Type: Function

    Customized renderer to render a new layout you want.

    container
    • Type: String
    • Default: <div id="container"><h2>Bar Chart</h2><div id="chart"></div></div>

    DOM contained the visualization result.

    selector
    • Type: String
    • Default: '#chart'

    DOM selector in container.

    style
    • Type: String
    • Default: ''

    Chart style.

    width
    • Type: Number
    • Default: 960

    SVG width for chart.

    height
    • Type: Number
    • Default: 500

    SVG height for chart.

    margin
    • Type: Object
    • Default: { top: 20, right: 20, bottom: 20, left: 20 }

    Margin of the first wrapper in SVG, usually used to add axis.

    Contributing

    1. Fork it!
    2. Create your feature branch: git checkout -b my-new-feature
    3. Commit your changes: git commit -am 'Add some feature'
    4. Push to the branch: git push origin my-new-feature
    5. Submit a pull request :D

    LICENSE

    markvis © geekplux, Released under the MIT License.
    Authored and maintained by geekplux with help from contributors (list).

    geekplux.com · GitHub @geekplux · Twitter @geekplux

    FOSSA Status

    Install

    npm i markvis

    DownloadsWeekly Downloads

    44

    Version

    0.0.12

    License

    MIT

    Last publish

    Collaborators

    • geekplux