HighCharts and D3 are both data visualization tools that you can add to your website.
Highcharts is an open source Javascript library that provides all kinds of different charts you can use. It is supported by all modern browsers (even IE6+!) and mobile browsers. It does not require client-side plugins like Java or Flash. The HighCharts API allows you to update charts at any time after creation, so they can update as frequently as once per second.
See the demo page here. The demo page includes source code for each of the chart types, which is super useful!
You can install HighCharts directly or use npm. The quickest way is to simply include this code in your page's head:
<script src="http://code.highcharts.com/highcharts.js"></script>
If you are using npm, run:
npm install highcharts --save
and then require HighCharts:
var Highcharts = require('highcharts');
Don't forget to load the module after Highcharts is loaded:
require('highcharts/modules/exporting')(Highcharts);
To create a chart do:
Highcharts.chart('container', { /*Highcharts options*/ });
A chart can be added to any div on your webpage. Here is the code for creating a simple bar chart.
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});
The API docs provide the full range of configurations options for each chart type.
HighCharts also has products called HighStock and HighMaps that allow you to create stock price charts and map-based charts. To use either of them, you must do the basic configuration for HighCharts and then add additional configuration for the other products. See the Docs for more detailed info.
D3 is an opensource JavaScript library for creating data visualizations. 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.
There are several ways to install and use D3:
Download it (version 3.5.14)
Use this script in your code: <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
Or for more customization prior to use fork the GitHub repo first
D3 is simmilar to other DOM frameworks (like jQuery!). The main advantage of D3 is that properties can be specified as functions of data in D3, not just simple constants.
For example, to randomly color paragraphs:
d3.selectAll("p").style("color", function() {
return "hsl(" + Math.random() * 360 + ",100%,50%)";
});
To alternate shades of gray for even and odd nodes:
d3.selectAll("p").style("color", function(d, i) {
return i % 2 ? "#fff" : "#eee";
});
The tutorials on GitHub are you best place to get started. They've agregated D3 turotials from across the web, so there's a great range of options, from the English language turorials Let’s Make a Bar Chart, Parts I, II & III, to a Chinese language tutorial Make a Force-Directed China Map with D3.js