How To Guide
HTML5 Data-Driven Documents (D3js) Charts

What is the HTML5 D3js Chart Plug-In? Back to top

It is an easy to use plug-in allows non-programmers (and programmers alike) to create a wide variety of customized D3js charts using straight HTML (no javascript coding necessary!) Create custom charts mashing up D3js charts with Highcharts and Mapbox streetmaps. This script simplifies the use of D3js charts on webpages.

This plug-in is very easy to use. Just declare it on top of your webpage and you can start using HTML to create D3js charts. See sample charts along with code in the home page.


Installation / How it works Back to top

  1. Unzip the contents of the zip file you purchase from codecanyon onto your webserver.
  2. On any webpage you would like a d3js chart to appear, reference main plugin file - html5d3js.js at the top.
  3. For each D3js chart you want to appear on your webpage, create a <div> and reference the class (each <div> will need a unique id)
  4. Configure your chart using <div> tag's parameters.

Dependencies Back to top

Here is a list of outside JS scripts and CSS files this plug-in needs to reference in order for all examples included to run. These are declared at the top of /js/html5d3js.js (which is what you will include on the top of your webpages to do html5d3js scripting). * Any of these can be downloaded and referenced locally if you would like to avoid referring to resources on outside servers.

List of Dependencies

Tag Attributes Back to top

See below summary list of common tag attributes along with examples of charts where each are in use. Depending on the D3js chart you select, there may be chart specific tag attributes that you will need to create additionally. Go to home page for complete selection of D3js charts that can be created with this plug-in. Pick your favorite one and see sample code below for how each is used.

<div class="html5d3js" id=[unique id here]

    h5c-position-top // absolute top left. syntax: h5c-position-top = 50
    (examples - position.html, multiple.html)

    h5c-position-left // absolute position left. syntax: h5c-position-left = 130
    (examples - same as h5c-position-top)

    h5c-size-height // chart height in pixels. syntax: h5c-size-height = 350
    (examples - same as h5c-position-top)

    h5c-size-width // chart width in pixels. syntax: h5c-size-width = 350
    (examples - same as h5c-position-top)

    h5c-tileType // set to 'd3js' always. syntax: h5c-tileType = d3js
    (examples - same for all examples in home page)

    h5c-colors // color scheme. syntax: h5c-colors = "#7cb5ec,#434348,..."
    (examples - colors.html, background.html)

    h5c-d3type // syntax: h5c-d3type = "bubbles1"
    (examples - depends on the chart you want rendered - see home page)

    h5c-tilebackground-color // chart background color. syntax: h5c-tilebackground-color = "#9f9f9f"
    (examples - same as h5c-colors)

    h5c-tiletext-color // title text color. syntax: h5c-tiletext-color = "#ffffff"
    (examples - title.html)

    h5c-tiletext-font // title font color. syntax: h5c-tiletext-font = "Open+Sans"
    (examples - same as h5c-colors)

    h5c-title-size // title size color. syntax: h5c-title-size = "11"
    (examples - same as h5c-colors)

    h5c-title-text // title text. syntax: h5c-title-text = "h5c-position-top = 50 & htc-position-left=130"
    (examples - same as h5c-colors)

    h5c-bubbles // JSON data for d3js chart. syntax: h5c-bubbles=[[0,1,"*lt*b*gt*Cluster~1*lt*/b*gt**lt*br*gt*Value:~1"],..]
    (examples - - depends on the chart you want rendered - see home page for complete set of D3js charts that can be created witht his plug-in. Then look how the tag attribute is filled in for each.)

> </div>

How to use the examples site Back to top

When you unzip the contents of the zip file you purchased from, navigate to the root folder and run index.html file.

Download PDF version of documentation Back to top

To download PDF version of the document - click below