D3: Simple javascript class wrapper for Association Graph

This is a simple javascript class wrapper (in both css and js) for the Association Graph Visualization at http://wimbledon.prcweb.co.uk/davidgoliath.html, The interface separates json data, html element, and the actual HeroGraphPlot class. It is modified so that it will be easier for a web developer to easily add a association graph chart into their application.

Below is the link to the source code (remember to put in in the web folder of a web server such as xamp so that the html page will be able to download the json in the same folder):

https://dl.dropboxusercontent.com/u/113201788/d3/assoc-graph.zip

Below is the html which includes the javascript that download a json data and then display as a HeroGraphPlot chart:

<html>
<head>

<link href="lib/herograph.css" rel="stylesheet"></link>

<script src="lib/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="lib/d3.min.js" type="text/javascript"></script>
<script src="lib/underscore-min.js" type="text/javascript"></script>
<script src="lib/herograph.js" type="text/javascript"></script>

<script>
$(function(){
 plotBiPartite();
});
function plotBiPartite()
{
 d3.json("herograph.json", function(graphData) {
  var plot = new HeroGraphPlot("chart", "info", graphData);
 });
}
</script>
<style>
body{
padding-top: 10px;
}
</style>
</head>
<body>
    <svg id="chart" class="herograph">
    <defs>
       <marker id="Triangle"
         refX="0" refY="3" 
         markerUnits="strokeWidth"
         markerWidth="6" markerHeight="6"
         orient="auto">
         <path d="M 0 0 L 6 3 L 0 6 z" />
       </marker>
     </defs>
   </svg>

   <div id="info" class="herographinfo"></div>
</body>
</html>

D3: Simple javascript class wrapper for Concept Map

This is a simple javascript class wrapper (in both css and js) for the Concept Map Visualization at http://www.findtheconversation.com/concept-map/, The interface separates json data, html element, and the actual ConceptMap class. It is modified so that it will be easier for a web developer to easily add a concept map chart into their application.

Below is the link to the source code (remember to put in in the web folder of a web server such as xamp so that the html page will be able to download the json in the same folder):

https://dl.dropboxusercontent.com/u/113201788/d3/concept-map.zip

Below is the html which includes the javascript that download a json data and then display as a ConceptMap chart:

<html>
<head>

<link href="lib/concept-map.css" rel="stylesheet"></link>

<script src="lib/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="lib/d3.min.js" type="text/javascript"></script>
<script src="lib/packages.js" type="text/javascript"></script>
<script src="lib/concept-map.js" type="text/javascript"></script>

<script>
$(function(){
 plotConceptMap();
});
function plotConceptMap()
{
 d3.json("metadata.json", function(dataJson) {
  var plot = new ConceptMap("graph", "graph-info", dataJson);
 });
}
</script>
<style>
body{
padding-top: 10px;
}
</style>
</head>
<body>
    <div id="graph" class="conceptmap" ></div>
    <div id="graph-info"></div>
</body>
</html>

Bootstrap: Center charts in bootstrap panel

To center charts in bootstrap panel, add "style='text-align:center'" to the div element of the panel-body. Below is the code snippet:

<div class="row" style="padding-top:10px">
	<div class="col-md-4">
		<div class="panel panel-primary">
			<div class="panel-heading">C3 Gauge</div>
			<div class="panel-body" style="text-align:center">
				<div id="chtGaugeC3"></div>
			</div>
		
		</div>
	</div>
	
	<div class="col-md-4">
		<div class="panel panel-primary">
			<div class="panel-heading">D3 Gauge</div>
			<div class="panel-body" style="text-align:center">
				<div id="chtGaugeD3"></div>
			</div>
		</div>
	</div>
	
	<div class="col-md-4">
		<div class="panel panel-primary">
			<div class="panel-heading">C3 Gauge</div>
			<div class="panel-body" style="text-align:center">
				<div id="chtGauge"></div>
			</div>
		</div>
	</div>
</div>

Below is the link some examples of charts such as Hive Plot, gauge in bootstrap:

https://dl.dropboxusercontent.com/u/113201788/d3/charts-with-bootstrap-panel.zip

D3: Simple javascript class wrapper for Matrix Diagram

This is a simple javascript class wrapper (in both css and js) for the Matrix Diagram Visualization at http://bost.ocks.org/mike/hive/, The interface separates json data, html element, and the actual MatrixPlot class. It is modified so that it will be easier for a web developer to easily add a bipartite chart into their application.

Below is the link to the source code (remember to put in in the web folder of a web server such as xamp so that the html page will be able to download the json in the same folder):

https://dl.dropboxusercontent.com/u/113201788/d3/matrix.zip

Below is the html which includes the javascript that download a json data and then display as a MatrixPlot chart:

<html>
<head>

<link href="lib/matrix-plot.css" rel="stylesheet"></link>

<script src="lib/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="lib/d3.min.js" type="text/javascript"></script>
<script src="lib/packages.js" type="text/javascript"></script>
<script src="lib/matrix-plot.js" type="text/javascript"></script>

<script>
$(function(){
	plotMatrix();
});

function plotMatrix()
{
	d3.json("miserables.json", function(miserables) {
		var plot = new MatrixPlot("chtMatrix", 'order', miserables);
	});
}
</script>
<style>
body{
padding-top: 10px;
padding-left: 60px;
}
</style>
</head>
<body>
				<p>Order: <select id="order">
				  <option value="name">by Name</option>
				  <option value="count">by Frequency</option>
				  <option value="group">by Cluster</option>
				</select>
				</p>
				
				<br />
				
				<div id="chtMatrix" class="matrixplot" ></div>
</div>


</div>
</body>
</html>

D3: Simple javascript class wrapper for Sankey Plot

This is a simple javascript class wrapper (in both css and js) for the Sankey Plot Visualization at http://bl.ocks.org/billierinaldi/raw/3779574/, The interface separates json data, html element, and the actual SankeyPlot class. It is modified so that it will be easier for a web developer to easily add a bipartite chart into their application.

Below is the link to the source code (remember to put in in the web folder of a web server such as xamp so that the html page will be able to download the json in the same folder):

https://dl.dropboxusercontent.com/u/113201788/d3/sankey.zip

Below is the html which includes the javascript that download a json data and then display as a SankeyPlot chart:

<html>
<head>
<link href="lib/sankey-plot.css" rel="stylesheet"></link>

<script src="lib/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="lib/d3.min.js" type="text/javascript"></script>
<script src="lib/sankey.js" type="text/javascript"></script>
<script src="lib/sankey-plot.js" type="text/javascript"></script>

<script>
$(function(){
 plotSankey();
});

function plotSankey()
{
 d3.json("energy.json", function(energy) {
  var plot = new SankeyPlot("chtSankey", energy);
 });
}
</script>
<style>
body{
padding-top: 10px;
}
</style>
</head>
<body>
<div id="chtSankey" class="sankeyplot" ></div>  
</body>
</html>

D3: Simple javascript class wrapper for Hive Plot

This is a simple javascript class wrapper (in both css and js) for the Hive Plot Visualization at http://bost.ocks.org/mike/hive/, The interface separates json data, html element, and the actual HivePlot class. It is modified so that it will be easier for a web developer to easily add a hive plot chart into their application.

Below is the link to the source code (remember to put in in the web folder of a web server such as xamp so that the html page will be able to download the json in the same folder):

https://dl.dropboxusercontent.com/u/113201788/d3/hive-plot.zip

Below is the html which includes the javascript that download a json data and then display as a HivePlot chart:

<html>
<head>

<link href="lib/hive-plot.css" rel="stylesheet"></link>

<script src="lib/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="lib/d3.min.js" type="text/javascript"></script>

<script src="lib/hive-plot.js" type="text/javascript"></script>

<script>
$(function(){
 plotHive();
});

function plotHive()
{
 var url = "flare-imports.json";
 // Load the data and display the plot!
 d3.json(url, function(nodes) {
  var plot = new HivePlot("chtHivePlot", "infoHivePlot", nodes);
 });
}
</script>
<style>
body{
padding-top: 10px;
}
</style>
</head>
<body>
<div id="chtHivePlot" class="hiveplot" ></div>
</body>
</html>

D3: Simple javascript class wrapper for Hierarchical Edge Bundling Visualization

This is a simple javascript class wrapper (in both css and js) for the Hierarchical Edge Bundling Visualization at http://bl.ocks.org/mbostock/1044242, The interface separates json data, html element, and the actual HierarchicalEdgeBundling class. It is modified so that it will be easier for a web developer to easily add a hierarchical edge bundling chart into their application.

Below is the link to the source code (remember to put in in the web folder of a web server such as xamp so that the html page will be able to download the json in the same folder):

https://dl.dropboxusercontent.com/u/113201788/d3/hierarchical-edge-bundling.zip

Below is the html which includes the javascript that download a json data and then display as a HierarchicalEdgeBundling chart:

<html>
<head>

<link href="lib/hierarchical-edge-bundling.css" rel="stylesheet"></link>

<script src="lib/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="lib/d3.min.js" type="text/javascript"></script>
<script src="lib/packages.js" type="text/javascript"></script>
<script src="lib/hierarchical-edge-bundling.js" type="text/javascript"></script>

<script>
$(function(){
 plotHierarchicalEdgeBundling();
});

function plotHierarchicalEdgeBundling()
{
 d3.json("readme-flare-imports.json", function(data) {
  var plot = new HierarchicalEdgeBundling("chtHierarchicalEdgeBundling", "infoHierarchicalEdgeBundling", data);
 });
}
</script>
<style>
body{
padding-top: 10px;
}
</style>
</head>
<body>
<div id="chtHierarchicalEdgeBundling" class="heb"></div>
</body>
</html>

D3: Simple javascript wrapper class for Collapsible Tree

This is a simple javascript class wrapper (in both css and js) for the Collapse Tree Visualization at http://mbostock.github.io/d3/talk/20111018/tree.html, The interface separates json data, html element, and the actual CollapsibleTree class. It is modified so that it will be easier for a web developer to easily add a collapsible tree chart into their application.

Below is the link to the source code (remember to put in in the web folder of a web server such as xamp so that the html page will be able to download the json in the same folder):

https://dl.dropboxusercontent.com/u/113201788/d3/collapsible-tree.zip

Below is the html which includes the javascript that download a json data and then display as a CollapsibleTree chart:

<html>
<head>

<link href="lib/collapsible-tree.css" rel="stylesheet"></link>

<script src="lib/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="lib/d3.min.js" type="text/javascript"></script>
<script src="lib/collapsible-tree.js" type="text/javascript"></script>

<script>
$(function(){
 plotCollasiableTree();
});

function plotCollasiableTree()
{
 d3.json("flare.json", function(json) {
  var plot = new CollapsibleTree("chtCollapsibleTree", json);
 });
}

</script>
<style>
body{
padding-top: 10px;
}
</style>
</head>
<body>
<div id="chtCollapsibleTree" class="collapsibletree" ></div>
</body>
</html>

D3: Simple wrapper class for BiPartite Visualization

This is a simple javascript class wrapper (in both css and js) for the BiPartite Visualization at http://bl.ocks.org/NPashaP/9796212, The interface separates json data, html element, and the actual biPartitePlot class. It is modified so that it will be easier for a web developer to easily add a bipartite graph into their application.

Below is the link to the source code (remember to put in in the web folder of a web server such as xamp so that the html page will be able to download the json in the same folder):

https://dl.dropboxusercontent.com/u/113201788/d3/bipartite.zip

Below is the html which includes the javascript that download a json data and then display as a BiPartite chart:

<html>
<head>


<script src="lib/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="lib/d3.min.js" type="text/javascript"></script>
<script src="lib/packages.js" type="text/javascript"></script>
<script src="lib/biPartite.js" type="text/javascript"></script>
<script src="lib/biPartite-plot.js" type="text/javascript"></script>

<script>
$(function(){
 plotBiPartite();
});
function plotBiPartite()
{
 d3.json("sales_data.json", function(sales_data) {
  var plot = new biPartitePlot("chtBiPartite");
  var data = [ 
  {data: plot.partData(sales_data,2), id:'SalesAttempts', header:["Channel","State", "Sales Attempts"]},
  {data: plot.partData(sales_data,3), id:'Sales', header:["Channel","State", "Sales"]}
  ];
  plot.draw(data);
 });
}
</script>
<style>
body{
padding-top: 10px;
}
</style>
</head>
<body>
<div id="chtBiPartite" class="bipartite" ></div>
</body>
</html>

D3: Simple Javascript class wrapper for Gauge

Below is the link for the source code which makes some minor modification over the gauge implementation in D3 (please refers to http://bl.ocks.org/tomerd/1499279) so that it is easier for me to use:

https://dl.dropboxusercontent.com/u/113201788/d3/gauge.zip

The web page codes below shows how to use it:

<html>
<head>

<link href="lib/c3.css" rel="stylesheet"></link>

<script src="lib/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="lib/d3.min.js" type="text/javascript"></script>
<script src="lib/gauge.js" type="text/javascript"></script>

<script>
$(function(){
 createC3Gauge('chtGaugeC3', 'sentiment', 91.4, 200, 180);
 var gaugeD3 = createD3Gauge('chtGaugeD3', 'sentiment', 200);
 gaugeD3.redraw(91.4);
});

function createD3Gauge(chartElementId, label, chartWidth)
{
 var config = 
 {
  size: chartWidth,
  label: label,
  min: 0,
  max: 100,
  minorTicks: 5
 }
 
 var range = config.max - config.min;
 config.yellowZones = [{ from: config.min + range*0.75, to: config.min + range*0.9 }];
 config.redZones = [{ from: config.min + range*0.9, to: config.max }];
 
 gaugeD3 = new Gauge(chartElementId, config);
 gaugeD3.render();
 
 return gaugeD3;
}
</script>
<style>
body{
padding-top: 10px;
}
</style>
</head>
<body>
<div id="chtGaugeD3"></div>
</body>
</html>

C3: Create a Pie Chart with specific width and height

Below is the code snippet to create a pie chart with specific with and height, using C3 data visualization library:

<div id="pieChart"></div>

<script>

var chart = c3.generate({

bindto : '#pieChart',

size: {

width: 300,

height: 300

},

   data: {

       columns: [

['data1' : 45],

['data2' : 56],

['data3' : 20]

],

       type : 'pie'

   }

});

</script>

C3: Formatting for yyyy-MM-dd HH:mm:ss for the timeseries

This simple step in C3 cracked my head a bit, therefore i like to write it down for future reference. Basically, I have a piece of json data containing the following two fields:

• date
• rate

I like the x axis of a C3 time series chart to display the date values in the json, the format of the date values is as follows:

yyyy-MM-dd HH:mm:ss

My original javascript looks like the following:

<link href="./c3.min.css" rel="stylesheet" type="text/css">
<script src="./d3.min.js"></script>
<script src="./c3.min.js"></script>
<script src="./d3.tip.v0.6.3.js"></script>
<script src="./jquery-1.8.3.min.js"></script>

<script type="text/javascript">
 $(function(){
$.ajax({
            url        : "jsonData.php",
            type       : "GET",
            data       : post_data,
            dataType : "json",
            success    : function(returned_data)
            {
                console.log(returned_data);
               
                var column_date = returned_data.date;
                var column_val = returned_data.sample;
               
                console.log(column_date);
                console.log(column_val);
               
                column_date.unshift('date');
                column_val.unshift('sample');
               
                var chart = c3.generate({
                    data: {
                        x : 'date',
                        columns : [
                            column_date,
                            column_val
                        ]
                    },
                    bindto: '#timeSeriesChart',
                    axis: {
                        x: {
                            type: 'timeseries',
                        }
                    }                });
            }
        });
});
</script>

After trying out various configuration that do not work, i finally stumbled on one solution that works, which is to add a "xFormat : '%Y-%m-%d %H:%M:%S'", that is as follows:

$(function(){
$.ajax({
            url        : "jsonData.php",
            type       : "GET",
            data       : post_data,
            dataType : "json",
            success    : function(returned_data)
            {
                console.log(returned_data);
               
                var column_date = returned_data.date;
                var column_val = returned_data.sample;
               
                console.log(column_date);
                console.log(column_val);
               
                column_date.unshift('date');
                column_val.unshift('sample');
               
                var chart = c3.generate({
                    data: {
                        x : 'date',
                        xFormat : '%Y-%m-%d %H:%M:%S',
                        columns : [
                            column_date,
                            column_val
                        ]
                    },
                    bindto: '#timeSeriesChart',
                    axis: {
                        x: {
                            type: 'timeseries',
                        }
                    }                });
            }
        });
}); 

Another thing to note is that the settings of x axis tick label can be done by adding the following to the "axis" element (if the time value is too long, you can add a "rotate: 45" to the "tick" below):

 tick: {
        format: '%H:%M:%S'
 }

for example:

 
$(function(){
$.ajax({
            url        : "jsonData.php",
            type       : "GET",
            data       : post_data,
            dataType : "json",
            success    : function(returned_data)
            {
                console.log(returned_data);
               
                var column_date = returned_data.date;
                var column_val = returned_data.sample;
               
                console.log(column_date);
                console.log(column_val);
               
                column_date.unshift('date');
                column_val.unshift('sample');
               
                var chart = c3.generate({
                    data: {
                        x : 'date',
                        xFormat : '%Y-%m-%d %H:%M:%S',
                        columns : [
                            column_date,
                            column_val
                        ]
                    },
                    bindto: '#timeSeriesChart',
                    axis: {
                        x: {
                            type: 'timeseries',

 tick: {
        format: '%H:%M:%S'
 }

                        }
                    }                });
            }
        });
});