Network Printer Manager

    semi-chord

    1.0.6 • Public • Published

    semi-chord

    A D3.js based chart similar to a chord diagram with all the bells and whisles

    ⚡️ live demo ⚡️

    preview image: semi-chord sample image

    Installation

    Through NPM
    npm install semi-chord
    
    Include in HTML
    <!-- D3.js (REQUIRED) -->
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <!-- semi-chord.js -->
    <script src="semi-chord.min.js"></script>

    Basic Use

    var myData = [
                { "product" : "Foo",
                  "2014" : "34.5K",
                  "2015": "24.1K",
                  "2016": "12.5K",
                  "2017": "29.9K" }
                  //, {...} more JSON objects
                  ];
                  
    var sc = semiChord({
                selector: '#my-div',
                data: data,
                dataKey: 'product' 
            });
    // sc object can be used to manipulate the chart

    The data for the chart must be a valid JSON array.

    key: One property of the JSON object must be specified as the key. This forms the small gray dots on the left side of the circle.

    attributes: All properties of the JSON object other than the key constitute the attributes. These form the colored arcs on the right side of the circle

    The values of the attributes become the ribbons connecting the key dots and the attribute arcs

    Sample Json

    var data = [{
                "product": "Foo",
                "2014": "34.5K",
                "2015": "24.1K",
                "2016": "12.5K",
                "2017": "29.9K"
            }, {
                "product": "Bar",
                "2014": "54.5K",
                "2015": "23.1K",
                "2016": "2.5K",
                "2017": "10.9K"
            }, {
                "product": "Qux",
                "2014": "29.2K",
                "2015": "13.4K",
                "2016": "27.8K",
                "2017": "18.3K"
            }, {
                "product": "Baz",
                "2014": "11.5K",
                "2015": "28.3K",
                "2016": "18.4K",
                "2017": "19.9K"
            }];

    selector The HTML element into which the chart must be drawn. If no size is specified through the config object, the size of the selector element is taken.

    config the config object can be passed to specify various appearance and behavior.

    var config = { ... };
    var sc = semiChord({
                selector: '#my-div',
                data: data,
                dataKey: 'product',
                config: config
            });

    The config object supports the following properties. All properties are optional and defaults to the values given here

    {
            width: 600, // width of the chart
            height: 400, // height of the chart
            radius: 133, // radius of the outer cirlce
            centerX: 240, // x coordinate of outer cirlce
            centerY: 200, // y coordinate of outer circle
            disableInteractions: false, // turn on / off interactions
            colorScheme: d3.schemeCategory10,
            fontFamily: 'sans-serif',
            outlineCircle: {
                stroke: '#EEE', // line color of the outline circle
                fill: 'none', // background color of the circle
                strokeWidth: '0.25' // line width of the outline circle
            },
            ribbon: {
                opacity: 0.5, // default opacity
                hoverOpacity: 0.7, // opacity on hover
                hoverInverseOpacity: 0.1 // opacity of other ribbons on hover
            },
            arc: {
                innerPadding: 0.02, // padding between arcs
                outerPadding: 0.2, // padding before and after the first and last arc respectively
                rangeStart: 0, // start radian angle. valid range: 0 to 1
                rangeEnd: 0.5,  // end radian angle. valid range: 0 to 1
                width: 15, // thickness of the arc
                titleTextOffset: 15 // space between arc and title text
            },
            key: {
                radius: 10,
                color: '#AAA', // circle fill color
                fontColor: '#AAA', // font color of the key text
                fontSize: 14, // font size of the key text
                rangeStart: 0.65, // start radian angle. valid range: 0 to 1
                rangeEnd: 0.85 // end radian angle. valid range: 0 to 1
            },
            valueLabel: {
                offsetX: 30, // space between attribute title and label text
                backdropOffsetX: 12, // space between attribute title and backdrop beginning point
                backdropOffsetXRight: 1, // right padding for the backdrop
                fontSize: 11, // font size of the label text
                verticalSpace: 12, // vertical space between label texts
                fontOpacity: 0.8, // default opacity of the label texts
                fontHighlightOpacity: 1, // opacity of the highlighted label text
                fontHighlightInverseColor: '#AAA', /* font color of other label texts when one
                                                      or more label is highlighted */
                fontHighlightSizeIncrement: 0, // font size to increase on highlight
                backdropOpacity: 0.2, // opacity of the backdrop shape
                backdropHighlightOpacity: 0.3, // backdrop opacity when attribute is highlighted
                disable: false,
                autoHide: false
            }
        };

    Manipulations

    To highlight ribbons by key:

    sc.interactions.highlightRibbonByKey('Foo');

    To highlight ribbons by attribute:

    sc.interactions.highlightRibbonByAttribute('2014');

    To highlight ribbons by value:

    sc.interactions.highlightRibbonByValue('34.5K');
    // more specific: value within a key or attribute
    sc.interactions.highlightRibbonByValue('34.5K', 'Foo', '2014');

    More options

    for a complete list of available options, check the wiki page

    Install

    npm i semi-chord

    DownloadsWeekly Downloads

    1

    Version

    1.0.6

    License

    MIT

    Last publish

    Collaborators

    • hrivks