Vector maps
Maps /maps/jvectormap/
Overview

jVectorMap is a vector-based, cross-browser and cross-platform component for interactive geography-related data visualization on the web. It provides numerious features like smooth zooming and panning, fully-customizable styling, markers, labels and tooltips.

Usage

Include the following lines of code in the <head> section of your HTML:

<!-- Load jQuery -->
<script type="text/javascript" src="assets/js/core/libraries/jquery.min.js"></script>

<!-- Load plugin -->
<script type="text/javascript" src="assets/js/plugins/maps/jvectormap/jvectormap.min.js"></script>

<!-- Load map(s) -->
<script type="text/javascript" src="assets/js/plugins/maps/jvectormap/map_files/world.js"></script>

Create element with attributes:

// Basic markup
<div class="map-container map-world"></div>

Finally call the plugin via JavaScript:

// World map
$('.map-world').vectorMap({
    map: 'world_mill_en',
    backgroundColor: 'transparent',
    regionStyle: {
        initial: {
            fill: '#93D389'
        }
    }
});
Plugin options
Option Type Description
map String Name of the map in the format territory_proj_lang where territory is a unique code or name of the territory which the map represents (ISO 3166 standard is used where possible), proj is a name of projection used to generate representation of the map on the plane (projections are named according to the conventions of proj4 utility) and lang is a code of the language, used for the names of regions
backgroundColor String Background color of the map in CSS format
zoomOnScroll Boolean When set to true map could be zoomed using mouse scroll. Default value is true
zoomOnScrollSpeed Boolean Mouse scroll speed. Number from 1 to 10. Default value is 3
panOnDrag Boolean When set to true, the map pans when being dragged. Default value is true
zoomMax Number Indicates the maximum zoom ratio which could be reached zooming the map. Default value is 8
zoomMin Number Indicates the minimum zoom ratio which could be reached zooming the map. Default value is 1
zoomStep Number Indicates the multiplier used to zoom map with +/- buttons. Default value is 1.6
zoomAnimate Boolean Indicates whether or not to animate changing of map zoom with zoom buttons
regionsSelectable Boolean When set to true regions of the map could be selected. Default value is false
regionsSelectableOne Boolean Allow only one region to be selected at the moment. Default value is false
markersSelectable Boolean When set to true markers on the map could be selected. Default value is false
markersSelectableOne Boolean Allow only one marker to be selected at the moment. Default value is false
regionStyle Object Set the styles for the map's regions. Each region or marker has four states: initial (default state), hover (when the mouse cursor is over the region or marker), selected (when region or marker is selected), selectedHover (when the mouse cursor is over the region or marker and it's selected simultaneously)
regionLabelStyle Object Set the styles for the regions' labels. Each region or marker has four states: initial (default state), hover (when the mouse cursor is over the region or marker), selected (when region or marker is selected), selectedHover (when the mouse cursor is over the region or marker and it's selected simultaneously)
markerStyle Object Set the styles for the map's markers. Any parameter suitable for regionStyle could be used as well as numeric parameter r to set the marker's radius
markerLabelStyle Object Set the styles for the markers' labels
markers Object | Array Set of markers to add to the map during initialization. In case of array is provided, codes of markers will be set as string representations of array indexes. Each marker is represented by latLng (array of two numeric values), name (string which will be show on marker's tip) and any marker styles
series Object Object with two keys: markers and regions. Each of which is an array of series configs to be applied to the respective map elements
focusOn Object | String This parameter sets the initial position and scale of the map viewport
labels Object Defines parameters for rendering static labels. Object could contain two keys: regions and markers. Each key value defines configuration object with the following possible options: render (function) and offsets (Object | Function)
selectedRegions Array | Object | String Set initially selected regions
selectedMarkers Array | Object | String Set initially selected markers
onRegionTipShow Function (Event e, Object tip, String code). Will be called right before the region tip is going to be shown
onRegionOver Function (Event e, String code). Will be called on region mouse over event
onRegionOut Function (Event e, String code). Will be called on region mouse out event
onRegionClick Function (Event e, String code). Will be called on region click event.
onRegionSelected Function (Event e, String code, Boolean isSelected, Array selectedRegions). Will be called when region is (de)selected. isSelected parameter of the callback indicates whether region is selected or not. selectedRegions contains codes of all currently selected regions
onMarkerTipShow Function (Event e, Object tip, String code). Will be called right before the marker tip is going to be shown
onMarkerOver Function (Event e, String code). Will be called on marker mouse over event
onMarkerOut Function (Event e, String code). Will be called on marker mouse out event
onMarkerClick Function (Event e, String code). Will be called on marker click event
onMarkerSelected Function (Event e, String code, Boolean isSelected, Array selectedMarkers). Will be called when marker is (de)selected. isSelected parameter of the callback indicates whether marker is selected or not. selectedMarkers contains codes of all currently selected markers
onViewportChange Function (Event e, Number scale). Triggered when the map's viewport is changed (map was panned or zoomed)
Plugin info
Property Description
File name jvectormap.min.js
Location assets/js/plugins/maps/jvectormap/
Updates 0
Links

Official plugin website

Full documentation

Github project page
D3.js library
Charts /visualization/d3/
Overview

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

Introduction

D3 allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document. For example, you can use D3 to generate an HTML table from an array of numbers. Or, use the same data to create an interactive SVG bar chart with smooth transitions and interaction.

D3 is not a monolithic framework that seeks to provide every conceivable feature. Instead, D3 solves the crux of the problem: efficient manipulation of documents based on data. This avoids proprietary representation and affords extraordinary flexibility, exposing the full capabilities of web standards such as HTML, SVG, and CSS. With minimal overhead, D3 is extremely fast, supporting large datasets and dynamic behaviors for interaction and animation. D3’s functional style allows code reuse through a diverse collection of components and plugins.

Usage

Include the following lines of code in the <head> section of your HTML:

<!-- Load jQuery -->
<script type="text/javascript" src="assets/js/core/libraries/jquery.min.js"></script>

<!-- Load library -->
<script type="text/javascript" src="assets/js/plugins/visualization/d3/d3.min.js"></script>

<!-- Load tooltip -->
<script type="text/javascript" src="assets/js/plugins/visualization/d3/d3_tooltip.js"></script>

Add element with attributes:

<!-- Basic markup -->
<div class="chart-container">
	<div class="chart" id="d3-streamgraph"></div>
</div>

<!-- With minimum width and scrolling -->
<div class="chart-container has-scroll">
	<div class="chart has-minimum-width" id="d3-waterfall"></div>
</div>

Basically there's nothing to call in JS. You just need to create a chart using D3.js API and attach to the DOM element.

Selections

Modifying documents using the W3C DOM API is tedious: the method names are verbose, and the imperative approach requires manual iteration and bookkeeping of temporary state. For example, to change the text color of paragraph elements:

// Selection example
var paragraphs = document.getElementsByTagName("p");
for (var i = 0; i < paragraphs.length; i++) {
	var paragraph = paragraphs.item(i);
	paragraph.style.setProperty("color", "white", null);
}

D3 employs a declarative approach, operating on arbitrary sets of nodes called selections. For example, you can rewrite the above loop as:

// Selection example
d3.selectAll("p").style("color", "white");

Yet, you can still manipulate individual nodes as needed:

// Selection example
d3.select("body").style("background-color", "black");

Selectors are defined by the W3C Selectors API and supported natively by modern browsers. Backwards-compatibility for older browsers can be provided by Sizzle. The above examples select nodes by tag name ("p" and "body", respectively). Elements may be selected using a variety of predicates, including containment, attribute values, class and ID.

D3 provides numerous methods for mutating nodes: setting attributes or styles; registering event listeners; adding, removing or sorting nodes; and changing HTML or text content. These suffice for the vast majority of needs. Direct access to the underlying DOM is also possible, as each D3 selection is simply an array of nodes.

Dynamic properties

Readers familiar with other DOM frameworks such as jQuery or Prototype should immediately recognize similarities with D3. Yet styles, attributes, and other properties can be specified as functions of data in D3, not just simple constants. Despite their apparent simplicity, these functions can be surprisingly powerful; the d3.geo.path function, for example, projects geographic coordinates into SVG path data. D3 provides many built-in reusable functions and function factories, such as graphical primitives for area, line and pie charts.

For example, to randomly color paragraphs:

// Selection example
d3.selectAll("p").style("color", function() {
	return "hsl(" + Math.random() * 360 + ",100%,50%)";
});

D3 employs a declarative approach, operating on arbitrary sets of nodes called selections. For example, you can rewrite the above loop as:

// Selection example
d3.selectAll("p").style("color", "white");

To alternate shades of gray for even and odd nodes:

// Selection example
d3.selectAll("p").style("color", function(d, i) {
	return i % 2 ? "#fff" : "#eee";
});

Computed properties often refer to bound data. Data is specified as an array of values, and each value is passed as the first argument (d) to selection functions. With the default join-by-index, the first element in the data array is passed to the first node in the selection, the second element to the second node, and so on. For example, if you bind an array of numbers to paragraph elements, you can use these numbers to compute dynamic font sizes:

// Selection example
d3.selectAll("p")
    .data([4, 8, 15, 16, 23, 42])
    .style("font-size", function(d) { return d + "px"; });

Once the data has been bound to the document, you can omit the data operator; D3 will retrieve the previously-bound data. This allows you to recompute properties without rebinding.

Enter and Exit

Using D3’s enter and exit selections, you can create new nodes for incoming data and remove outgoing nodes that are no longer needed.

When data is bound to a selection, each element in the data array is paired with the corresponding node in the selection. If there are fewer nodes than data, the extra data elements form the enter selection, which you can instantiate by appending to the enter selection. For example:

// Enter and exit
d3.select("body").selectAll("p")
    .data([4, 8, 15, 16, 23, 42])
	.enter().append("p")
		.text(function(d) { return "I’m number " + d + "!"; });

Updating nodes are the default selection—the result of the data operator. Thus, if you forget about the enter and exit selections, you will automatically select only the elements for which there exists corresponding data. A common pattern is to break the initial selection into three parts: the updating nodes to modify, the entering nodes to add, and the exiting nodes to remove.

// Update…
var p = d3.select("body").selectAll("p")
    .data([4, 8, 15, 16, 23, 42])
    .text(String);

// Enter…
p.enter().append("p")
    .text(String);

// Exit…
p.exit().remove();

By handling these three cases separately, you specify precisely which operations run on which nodes. This improves performance and offers greater control over transitions. For example, with a bar chart you might initialize entering bars using the old scale, and then transition entering bars to the new scale along with the updating and exiting bars.

D3 lets you transform documents based on data; this includes both creating and destroying elements. D3 allows you to change an existing document in response to user interaction, animation over time, or even asynchronous notification from a third-party. A hybrid approach is even possible, where the document is initially rendered on the server, and updated on the client via D3.

Handling transitions

D3’s focus on transformation extends naturally to animated transitions. Transitions gradually interpolate styles and attributes over time. Tweening can be controlled via easing functions such as “elastic”, “cubic-in-out” and “linear”. D3’s interpolators support both primitives, such as numbers and numbers embedded within strings (font sizes, path data, etc.), and compound values. You can even extend D3’s interpolator registry to support complex properties and data structures.

For example, to fade the background of the page to black:

// Transition example
d3.select("body").transition()
    .style("background-color", "black");

Or, to resize circles in a symbol map with a staggered delay:

// Transition example
d3.selectAll("circle").transition()
    .duration(750)
    .delay(function(d, i) { return i * 10; })
    .attr("r", function(d) { return Math.sqrt(d * scale); });

By modifying only the attributes that actually change, D3 reduces overhead and allows greater graphical complexity at high frame rates. D3 also allows sequencing of complex transitions via events. And, you can still use CSS3 transitions; D3 does not replace the browser’s toolbox, but exposes it in a way that is easier to use.

Complete D3.js documentation

All D3.js features and API are completely explained in online library documentation. Also you'll find a full API documentation on Github project page. Also check out gallery with examples. Please use these links for a full documentation. Below you'll find additional links related to D3.js library

Plugin info
Property Description
File name d3.min.js, d3_tooltip.js, venn.js
Location assets/js/plugins/visualization/d3/
Updates 0
Links

Official plugin website

Full documentation

Demonstration

Github project page
C3.js library
Charts c3.min.js
Overview

C3.js is a D3-based reusable chart library that enables deeper integration of charts into web applications. C3 makes it easy to generate D3-based charts by wrapping the code required to construct the entire chart. We don't need to write D3 code any more. C3 provides a variety of APIs and callbacks to access the state of the chart. By using them, you can update the chart even after it's rendered.

Usage

Include the following lines of code in the <head> section of your HTML:

<!-- Load jQuery -->
<script type="text/javascript" src="assets/js/core/libraries/jquery.min.js"></script>

<!-- Load D3.js library -->
<script type="text/javascript" src="assets/js/plugins/visualization/d3/d3.min.js"></script>

<!-- Load C3.js  -->
<script type="text/javascript" src="assets/js/plugins/visualization/c3/c3.min.js"></script>

Add element with attributes:

<!-- Basic markup -->
<div class="chart-container">
	<div class="chart" id="c3-line-chart"></div>
</div>
Generate chart

C3 generates a chart by calling generate() with the argument object, and an element including the chart will insert into the element specified as a selector in that argument as bindto. Prepare the element to bind the chart and call generate() with arguments:

// Generate chart
var chart = c3.generate({
    bindto: '#c3-line-chart',
    data: {
		columns: [
			['data1', 30, 200, 100, 400, 150, 250],
			['data2', 50, 20, 10, 40, 15, 25]
		]
    }
});
Complete C3.js documentation

All C3.js features and API are completely explained in online library documentation and Getting started section. Also you'll find a forums on Google Group pages. Also check out examples explained. Please use these links for a full documentation. Below you'll find additional links related to C3.js library

Plugin info
Property Description
File name c3.min.js
Location assets/js/plugins/visualization/c3/
Updates 0
Links

Official plugin website

Full documentation

Demonstration

Github project page
Dimple.js library
Charts dimple.min.js
Overview

Dimple is an object-oriented API allowing you to create flexible axis-based charts using d3.js. The intention of this project is to allow analysts who are not necessarily expert JavaScript programmers to create standard (and some not-so-standard) business analytics. The API will also expose the core d3 objects where possible so that as users gain confidence they can extend the base functionality in whatever way they wish.

Usage

Include the following lines of code in the <head> section of your HTML:

<!-- Load jQuery -->
<script type="text/javascript" src="assets/js/core/libraries/jquery.min.js"></script>

<!-- Load D3.js library -->
<script type="text/javascript" src="assets/js/plugins/visualization/d3/d3.min.js"></script>

<!-- Load dimple.js  -->
<script type="text/javascript" src="assets/js/plugins/visualization/dimple/dimple.min.js"></script>

Add element with attributes:

<!-- Basic markup -->
<div class="chart-container">
	<div class="chart" id="dimple-chart"></div>
</div>

That's it, you're ready to get creative! If you don't know where to start, why not create a blank text document, drop the following in and save it as an html.

// Create chart
var svg = dimple.newSvg("#dimple-chart", 800, 600);
    var data = [
		{ "Word":"Hello", "Awesomeness":2000 },
		{ "Word":"World", "Awesomeness":3000 }
    ];

    // Add elements
    var chart = new dimple.chart(svg, data);
    chart.addCategoryAxis("x", "Word");
    chart.addMeasureAxis("y", "Awesomeness");
    chart.addSeries(null, dimple.plot.bar);

    // Finally draw the chart
    chart.draw();
Complete dimple.js documentation

All dimple.js features and API are completely explained in online library documentation. Also check out examples with description. Please use these links for a full documentation. Below you'll find additional links related to C3.js library

Plugin info
Property Description
File name dimple.min.js
Location assets/js/plugins/visualization/dimple/
Updates 0
Links

Official plugin website

Full documentation

Demonstration

Github project page
Echarts library
Charts visualizatoin/echarts/
Overview

ECharts (Enterprise Charts), written in pure JavaScript and based on ZRender (a whole new lightweight canvas library), is a comprehensive charting library offering an easy way of adding intuitive, interactive, and highly customizable charts to your commercial products. It works with all your web and mobile applications, including IE6/7/8/9/10/11, Chrome, Firefox, Safari and Opera. With original features like Drag-Recalculate, Data View and Scale Roaming, ECharts lets you mine and integrate data in ways you didn't think possible.

ECharts currently supports 12 chart types, including line (area), column (bar), scatter (bubble), pie (doughnut), radar (filled radar), candlestick, chord, gauge, funnel, map, eventRiver and force-directed chart. Each and every chart is equipped with 7 interactive components: title, tooltip, legend, scale, data area, timeline, and toolbox. Many of these components and charts can be combined in one chart.

Usage

Include the following lines of code in the <head> section of your HTML:

<!-- Load jQuery -->
<script type="text/javascript" src="assets/js/core/libraries/jquery.min.js"></script>

<!-- Load Echarts library -->
<script type="text/javascript" src="assets/js/plugins/visualization/echarts/echarts.js"></script>

Add element with attributes:

<!-- Basic markup -->
<div class="chart-container">
	<div class="chart has-fixed-height" id="basic_lines"></div>
</div>

Basically there's nothing to call in JS. You just need to create a chart using echarts.js API and attach to the DOM element.

Complete ECharts library documentation

All ECharts library features and API are completely explained in online library documentation. Also check out examples with description or template pages. Also on official website you can find features with images and descriptions. Please use these links for a full documentation. Below you'll find additional links related to echarts.js library.

By default, Limitless template includes a default theme called limitless.js, located in echarts/theme/ folder. You can use it as a base if you need to adjust theme elements and styles to your needs, all default styling options are located in this file.

Plugin info
Property Description
File name echarts.js
Location assets/js/plugins/visualization/echarts/
Updates 0
Links

Official plugin website

Features

Full documentation

Demonstration

Github project page
Google Charts library
Charts
Overview

Google Charts provides a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart gallery provides a large number of ready-to-use chart types. The most common way to use Google Charts is with simple JavaScript that you embed in your web page. You load some Google Chart libraries, list the data to be charted, select options to customize your chart, and finally create a chart object with an id that you choose. Then, later in the web page, you create a <div> with that id to display the Google Chart.

Usage

Include the following lines of code in the <head> section of your HTML:

<!-- Load the AJAX API -->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

Add element with attributes:

<!-- Div that will hold the pie chart -->
<div class="chart-container">
	<div class="chart" id="google_pie_chart"></div>
</div>

Add element with attributes:

// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});

// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);

// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {

// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
	['Mushrooms', 3],
	['Onions', 1],
	['Olives', 1],
	['Zucchini', 1],
	['Pepperoni', 2]
]);

// Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
               'width':400,
               'height':300};

// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('google_pie_chart'));
	chart.draw(data, options);
}
Complete Google Charts documentation

Google Charts library has a very detailed online documentation. It includes all possible chart types with examples and a complete list of options for each chart type. Also you can find there a full API reference. Also Google Charts library has a great Google Groups community where you can ask questions and browse already resolved issues. Please use these links for a full documentation. Below you'll find additional links related to Google Charts library.