Play time with D3JS, SpringBoot and MongoDB

Ground Breakers: D3JS, SpringBoot, MongoDB, Gradle, IntelliJIdea

Things needed:

  1. Understanding of creating a micro-service using spring boot.
  2. Having an account in Mongo Atlas.
  3. Download the community version of Mongo Compass
  4. Find the D3JS CDN version to use.

Our end goal is to generate a dynamic chart shown in the below diagrammatic representation.

Lets start, creating a Spring Initializer Project from IntelliJIdea.

Don’t miss the NoSQL → MongoDB dependency & choose to use your comfortable build tool. In our case we will be using Gradle.

Write a controller to receive incoming requests. Means you will be having a micro service ready. 😃

Mongo DB is document based noSql database. You don’t need to define a table that has a set of predefined columns inside. Simple and Powerful. A Sample Table in Mongo terms called as a Document. Below is a document example. You can update this document, reset values, adding new elements using its id. That’s how it is dynamic in nature.

{
"_id":"test@gmail.com",
"name":"Gopi K Kancharla",
"items":"Biryani,Biryani",
"_class":"com.allibilli.potluck.model.Participant"
}

So as a next step: we need the ability to connect to this database from our SpringBoot Micro Service and we will be using the out of the box driver which is listed below.

compile('org.springframework.boot:spring-boot-starter-data-mongodb')

and Lets define the connection parameters inside the application.yml file which is by-default in the class-path and parsed by spring boot application while starting up.

spring:
data:
mongodb:
uri:
mongodb+srv://abcd:abcd@cluster0-smvcu.mongodb.net/
database: mytestDB

Now we are ready to provide the operational facilities upon writing what we need in a simple repository interface.

package com.allibilli.potluck.db.repo;

import com.allibilli.potluck.model.Participant;
import org.springframework.data.mongodb.repository.MongoRepository;

/**
* Created by Gopi
*/
public interface ParticipantRepository extends MongoRepository<Participant, String> {

public Participant findByName(String firstName);

}

We are done with micro service. For ease of testing we are now embedding our HTML file in the static location under resources which will be served as a web content.

Create an index.html in src\main\resources\static\index.html which has a CDN D3JS reference in it. Here is an example. Instead of CDN I am referring from D3 .org directly.

<script src="https://d3js.org/d3.v3.min.js"></script>

Finally: We will be writing a D3 Component feeding with the data coming from our MicroService.

<script>
var diameter = 1024;
var tree = d3.layout.tree().size([ 360, diameter / 2 - 220 ]).separation(
function(a, b) {
return (a.parent == b.parent ? 1 : 2) / a.depth;
});
var diagonal = d3.svg.diagonal.radial().projection(function(d) {
return [ d.y, d.x / 180 * Math.PI ];
});
var svg = d3.select("#treeContainer").append("svg")
.attr("width", diameter).attr("height", diameter - 80).append("g")
.attr("transform",
"translate(" + diameter / 2 + "," + diameter / 2 + ")");
<!--d3.json("json/myJson", function(error, root) { -->
d3.json("/list", function(error, root) {
var nodes = tree.nodes(root), links = tree.links(nodes);
var link = svg.selectAll(".link").data(links).enter().append("path")
.attr("class", "link").attr("d", diagonal);
var node = svg.selectAll(".node").data(nodes).enter().append("g").attr(
"class", "node").attr("transform", function(d) {
return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")";
})
node.append("circle").attr("r", 4.5);
node.append("text").attr("dy", ".31em").attr("text-anchor",
function(d) {
return d.x < 180 ? "start" : "end";
}).attr("transform", function(d) {
return d.x < 180 ? "translate(8)" : "rotate(180)translate(-8)";
}).text(function(d) {
return d.name;
});
});
d3.select(self.frameElement).style("height", diameter - 100 + "px");

var queryStrting = window.location.href.split("?")[1];
var hash = queryStrting.split('&');
var vars = {};
for (var i = 0; i < hash.length; i++) {
params=hash[i].split("=");
vars[params[0]] = params[1];
}
if(vars.hasOwnProperty("status")){
alert(vars.status)
}

</script>

Note that: d3.json(“/list”,….. is the one that is making an http call to retrieve the data from our database.

Find the example on the github.

Run a gradle bootRun to start the application.

Open your browser and type http://localhost:8080 that will open up the above screen shot in live. Thanks.

Gopi Krishna Kancharla- Founder of http://allibilli.com

--

--

--

Recommended from Medium

Essential topics you should know about JavaScript

https://youtu.be/FTQbiNvZqaY

Building Web Service with NodeJS — Part 3 (Router, Logging, Error Handler)

Semantic-UI with React

Cycle.js Author André Staltz: The Day Programming Stops Being Fun, I’ll Look for Another Job

Object Orientation in JavaScript -3

How to Obtain a Webpage’s HTML Element Using Inspection For

Angular10 Dashboard With firebase

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Gopi Krishna Kancharla

Gopi Krishna Kancharla

Director of Software Engineering @ CapitalOne-Garage

More from Medium

Spring Boot with MongoDB integration guide with multiple data sources.

Deploy Spring Boot App To AWS Elastic Beanstalk

Spring Boot Integration with MongoDB

Deploy your Spring Boot Application Using CodeDeploy and CodePipeline