Neolithic Prancing Minotaurs

    d3panels

    1.8.4 • Public • Published

    d3panels: D3-based graphic panels

    NPM badge

    Karl W Broman

    This is a set of D3-based graphic panels, to be combined into larger multi-panel charts. They were developed for the R/qtlcharts package.

    Note that d3panels uses D3 version 7. (It should also work with version 6.)

    There are other libraries with similar goals that are of more general use (e.g., C3.js); see this list of javascript chart libraries), but I wanted charts that were a bit less general and flexible, but rather more specific to my particular applications (and style).

    For snapshots and live tests, see https://kbroman.org/d3panels.

    Documentation

    For documentation, see https://github.com/kbroman/d3panels/tree/main/doc.

    Usage

    All of the functions are called as d3panels.blah(). And for each chart, you first call the chart function with a set of options, like this:

    mychart = d3panels.lodchart({height:600, width:800})

    And then you call the function that's created with some selection and the data:

    mychart(d3.select("div#chart"), mydata)

    There are three exceptions to this: add_lodcurve, add_curves, and add_points. For these functions, you first need to call another function that creates a panel (for example, lodchart or chrpanelframe in the case of add_lodcurve, or panelframe in the case of add_curves or add_points). You then use the chart function created by that first call in place of a selection. For example:

    myframe = d3panels.panelframe({xlim:[0,100],ylim:[0,100]})
    myframe(d3.select("body"))
    
    addpts = d3panels.add_points()
    addpts(myframe, {x:[5,10,25,50,75,90], y:[8,12,50,30,80,90], group:[1,1,1,2,2,3]})

    Links

    You'll need to link to the d3panels.js and d3panels.css files (or to d3panels.min.js and d3panels.min.css):

    <script type="text/javascript" src="https://rawgit.com/kbroman/d3panels/main/d3panels.js"></script>
    <link rel=stylesheet type="text/css" href="https://rawgit.com/kbroman/d3panels/main/d3panels.css">

    You'll also want to link to D3.js:

    <script charset="utf-8" type="text/javascript" src="https://d3js.org/d3.v5.min.js"></script>

    Build

    To build the javascript (and CSS) files from the coffeescript source, you first need to install npm.

    Then use npm to install yarn, coffeescript, uglify-js uglifycss, and babel-core

    npm install -g yarn coffeescript uglifycss uglify-js babel-core
    

    Then install the dependency, d3:

    yarn install
    

    Finally, run make to create the compiled javascript code.

    make
    

    License

    Licensed under the MIT license. (More information here.)

    Keywords

    none

    Install

    npm i d3panels

    DownloadsWeekly Downloads

    2

    Version

    1.8.4

    License

    MIT

    Unpacked Size

    379 kB

    Total Files

    8

    Last publish

    Collaborators

    • kbroman