Leaflet maps
Overview
Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 42 KB of JS, it has all the mapping features most developers ever need. Leaflet is designed with simplicity, performance and usability in mind. It works efficiently across all major desktop and mobile platforms, can be extended with lots of plugins, has a beautiful, easy to use and well-documented API and a simple, readable source codeUsage
Include the following lines of code in the <head> section of your HTML:
<!-- Load plugin -->
<script src="assets/js/vendor/maps/leaflet/leaflet.min.js"></script>
Create element with attributes:
// Basic markup
<div class="map-container" id="leaflet_basic"></div>
Finally call the plugin via JavaScript:
// Config map
let config = {
minZoom: 7,
maxZoom: 18
};
// Magnification with which the map will start
const zoom = 15;
// Co-ordinates
const lat = 52.37;
const lng = 4.9041;
// Calling map
const map = L.map("leaflet_basic", config).setView([lat, lng], zoom);
// Used to load and display tile layers on the map
// Most tile servers require attribution, which you can set under `Layer`
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: '© OpenStreetMap',
className: 'map-leaflet'
}).addTo(map);
LeafletJS documentation
Full LeafletJS documentation can be found online on official library website. It includes a bunch of different tutorials and tutorials grouped by category. Below you can find additional links related to LeafletJS library.
Plugin info
| Property | Description |
|---|---|
| File name | jvectormap.min.js |
| Location | global_assets/js/plugins/maps/jvectormap/ |
| Links | Github project page |
D3.js library
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.
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 library -->
<script src="assets/js/vendor/visualization/d3/d3.min.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/vendor/visualization/d3/ |
| Links | Github project page |
C3.js library
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 D3.js library -->
<script src="assets/js/vendor/visualization/d3/d3v5.min.js"></script>
<!-- Load C3.js -->
<script src="assets/js/vendor/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/vendor/visualization/c3/ |
| Links | Github project page |
Echarts library
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 the following tpes: line (area), column (bar), scatter (bubble), pie (doughnut), radar (filled radar), candlestick, chord, gauge, funnel, map, eventRiver, calendar, force-directed chart etc. 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 Echarts library -->
<script src="assets/js/vendor/visualization/echarts/echarts.min.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 uses SVG rendering engine to support CSS variables and dark theme.Plugin info
| Property | Description |
|---|---|
| File name | echarts.min.js |
| Location | assets/js/vendor/visualization/echarts/ |
| Links | Github project page |
Google Charts library
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 src="https://www.gstatic.com/charts/loader.js"></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:
// Switch colors in dark and light themes
function color_theme(darkColor, lightColor) {
return document.documentElement.getAttribute('data-color-theme') == 'dark' ? darkColor : lightColor
}
// Initialize chart
google.charts.load('current', {
callback: function () {
// Draw chart
drawLineChart();
// Resize on sidebar width change
var sidebarToggle = document.querySelectorAll('.sidebar-control');
if (sidebarToggle) {
sidebarToggle.forEach(function(togglers) {
togglers.addEventListener('click', drawLineChart);
});
}
// Resize on window resize
var resizeLineBasic;
window.addEventListener('resize', function() {
clearTimeout(resizeLineBasic);
resizeLineBasic = setTimeout(function () {
drawLineChart();
}, 200);
});
// Redraw chart when color theme is changed
document.querySelectorAll('[name="main-theme"]').forEach(function(radio) {
radio.addEventListener('change', drawLineChart);
});
},
packages: ['corechart']
});
// Chart settings
function drawLineChart() {
// Define charts element
var line_chart_element = document.getElementById('google-line');
// Data
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
// Options
var options = {
fontName: 'var(--body-font-family)',
height: 400,
fontSize: 12,
chartArea: {
left: '5%',
width: '94%',
height: 350
},
pointSize: 7,
curveType: 'function',
backgroundColor: 'transparent',
tooltip: {
textStyle: {
fontSize: 14
}
},
vAxis: {
title: 'Sales and Expenses',
titleTextStyle: {
fontSize: 14,
italic: false,
color: color_theme('#fff', '#333')
},
textStyle: {
color: color_theme('#fff', '#333')
},
baselineColor: color_theme('#6e6f71', '#9CA3AF'),
gridlines:{
color: color_theme('#4d4d51', '#E5E7EB'),
count: 10
},
minorGridlines: {
color: color_theme('#3f4044', '#F3F4F6')
},
minValue: 0
},
hAxis: {
textStyle: {
color: color_theme('#fff', '#333')
}
},
legend: {
position: 'top',
alignment: 'center',
textStyle: {
color: color_theme('#fff', '#333')
}
},
series: {
0: { color: '#EF5350' },
1: { color: '#66BB6A' }
}
};
// Draw chart
var line_chart = new google.visualization.LineChart(line_chart_element);
line_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.
Plugin info
| Property | Description |
|---|---|
| Links | Github issue tracker |