CODEWITHSUNDEEP
javajavascriptsvgd3.js
nafas
nafas

Reputation: 5423

Running d3 javascript within java

I have this project that requires rendering javascript on the server side within java.

basically what I want to do is to transform the javascript code into a svg tag that I can later directly added it to my HTML.

to demonstrate I gonna use a simple example from :

http://bl.ocks.org/mbostock/6216797.

this is my java code :

  public static void main(String args[]) throws Exception {
    ScriptEngine js = new ScriptEngineManager().getEngineByName("javascript");
    Bindings bindings = js.getBindings(ScriptContext.ENGINE_SCOPE);
    bindings.put("stdout", System.out);
    System.out.println(
    js.eval(FileUtils.readFileToString(new File("d3Example.js")))
    );
  }

the d3Example.js is :

var require = (function () {
var _required = {};
return (function (url, callback) {
    if (typeof url == 'object') {
        // We've (hopefully) got an array: time to chain!
        if (url.length > 1) {
            // Load the nth file as soon as everything up to the
            // n-1th one is done.
            require(url.slice(0,url.length-1), function () {
                require(url[url.length-1], callback);
            });
        } else if (url.length == 1) {
            require(url[0], callback);
        }
        return;
    }
});
})();


require(['d3.v3.min.js'], function () {
var width = 960,
    height = 500;

var x = d3.scale.linear()
    .range([0, width]);

var y = d3.scale.linear()
    .range([0, height]);

var projection = d3.geo.transform({
  point: function(px, py) { this.stream.point(x(px), y(py)); }
});

var path = d3.geo.path()
    .projection(projection);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

d3.json("geo.json", function(error, geo) {
  x.domain(d3.extent(geo.features, function(d) { return d.properties.Easting; }));
  y.domain(d3.extent(geo.features, function(d) { return d.properties.Northing; }));

  svg.append("path")
      .datum(geo)
      .attr("class", "lot")
      .attr("d", path);
});


});

my desired output should be the html code that creates the picture as in : http://bl.ocks.org/mbostock/6216797

the idea of this project is to be able to do the javascript computation on the server side and the client only receives the svg tag that is rendered by html to create a nice graphics.

Upvotes: 1

Views: 2874

Answers (1)

George
George

Reputation: 915

So one possibility is to use nodejs to run your javascript on server side https://mango-is.com/blog/engineering/pre-render-d3-js-charts-at-server-side/

generate the html and then save it to file. Now using whichever language you prefer, you could convert said html to a pdf if you prefer and then offer up this file as a download.

Another option may be to use Apache Wicket, which is a java based web front end tool. It's capable of generating the html and javascript page. Though I haven't looked into how to get that page to a file. http://ci.apache.org/projects/wicket/guide/6.x/

Upvotes: 2

Related Questions