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>
Good Post. I like your blog. Thanks for Sharing--
ReplyDeleteJavaScript Training in Delhi
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.
ReplyDeleteAny chance you can re-add the files? It's not found on dropbox. Thanks!
ReplyDelete+1 Can you please re-upload the zip file?
ReplyDeleteSame files are at: https://github.com/gp187/d3-concept-map
ReplyDeleteJavaScript training helps learners build the skills needed to create interactive and dynamic websites. A well-structured training program covers the fundamentals of JavaScript, including variables, data types, operators, loops, functions, arrays, objects, and events. As learners progress, they gain hands-on experience with DOM manipulation, form validation, asynchronous programming, and modern ES6+ features, enabling them to develop responsive and user-friendly web applications.
ReplyDeleteMany JavaScript training programs are powered by Blogger to provide easy access to tutorials, coding exercises, project updates, and learning resources. TypeScript TrainingBlogger offers a simple platform where instructors can publish lessons, share sample code, and communicate with students through regular posts. By combining practical projects with online learning materials, JavaScript training powered by Blogger creates an accessible and effective environment for beginners and aspiring web developers.
ReplyDelete