Thursday, January 1, 2015

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>


2 comments:

  1. Good Post. I like your blog. Thanks for Sharing--
    JavaScript Training in Delhi

    ReplyDelete
  2. You can use Creately, Concept Map Maker to draw concept maps of your choice. You can draw easily without starting from the scratch suing templates. Find these concept mapping templates to be used for free. There are 100s of templates drawn on various scenarios. Use the template by clicking on edit as diagram and adding your details to create concept maps.

    ReplyDelete