Skip to content

Latest commit

 

History

History
116 lines (72 loc) · 3.02 KB

README.md

File metadata and controls

116 lines (72 loc) · 3.02 KB
Raw

d3.chart.template

To get your chart published on the d3.chart website there are only two requirements:

  • You must name your repo in the following format: d3.chart.*. For example: d3.chart.barchart or d3.chart.my-epic-chart.
  • You must have a package.json in your repo that declares the version of d3.chart that your chart utilizes like so:
{
  "d3.chart": {
    "version" : "0.1.3"
  }
}

Template Structure

This template comes with a few helpful files:

  • A Gruntfile.js containing code linting, watching & building tasks that may be useful during development and release.
  • A package.json file containing some basic placeholder info that you can replace with your chart's details.
  • An example folder which might be useful to try out your chart while you develop and to release alongside your chart for others to see how your chart can be utilized.
  • The default template comes with a src/styles folder for adding chart specific styles. It uses the Stylus library which can be found here.

Using Grunt

  1. You will need to use grunt > 0.4 to build your chart distribution files.
  2. Run npm install to obtain the appropriate grunt tasks. Do not check in the node_modules folder - it is listed in the .gitignore file.

Some useful grunt commands:

  • grunt watch will watch for file changes and run the js files through linting to check for syntax errors and warnings.
  • grunt will build your chart into a single file if you've split them up.

Suggested Guidelines:

  • Please maintain your package.json with the appropriate versioning and dependencies.

  • Please consider licensing your charts under the MIT Expat license or any other BSD-style license.

  • Please try to document your code & API

  • Please provide some example usage for your chart, either in the examples folder or in this readme.

  • Consider defining what API your chart exposes - this includes

    • getters/setters and any other methods that are available on the chart instance.
    • any events that the chart broadcasts alongside the arguments that will be passed to the callbacks.

Thank you for using d3.chart!

  • The Miso Project Team.

Readme Template:

Chart name...

Chart description...

Sample Use

Please provide sample use of your chart here.

API

Sample API Documentation:

<instance>.highlight(value)

Description:

Allows the highlighting of a specific value

Parameters:

  • value - The value to highlight.

Uses:

Example:

var chart = d3.select("#vis")
  .append("svg")
  .chart("MyEpicChart")
  .higlight(12);

Events

Sample Event Documentation:

brush

Description:

Broadcast when a circle on the chart is being mousedover

Arguments:

  • value - The value corresponding to the circle being mousedover.

Uses:

Example:

var chart = d3.select("#vis")
  .append("svg")
  .chart("MyEpicChart");

chart.on("brush", function(value) {
  // handle event...
});