Hi,
I’m having some issues with getting a html file which plots a line graph using
D3 to plot using some scala variables. My html is rubbish so it might be
something straightforward.
I have a simple package built with sbt containing the following:
package zep_plot
import com.google.common.io.Files
package object zepplot{
def plotter():Unit= {
val x1=Vector(0, 1, 2, 3, 4)
val y1=Vector(0, 1, 2, 3, 4)
val x2=Vector(0, 1, 2, 3, 4)
val y2=Vector(0, 1, 4, 9, 16)
val text1 = com.google.common.io.Files.toString(new
java.io.File("/Users/deanwood/Documents/scala/plot/src/main/scala/file1.html"),
com.google.common.base.Charsets.UTF_8)
val text2 = com.google.common.io.Files.toString(new
java.io.File("/Users/deanwood/Documents/scala/plot/src/main/scala/file2.html"),
com.google.common.base.Charsets.UTF_8)
println("%html"+ text1 + x1(0) +","+x1(1) +","+x1(2) +","+ x1(3) +","+
x1(4) + "], y: ["+ y1(0) +","+y1(1) +","+y1(2) +","+ y1(3) +","+ y1(4) + "] },
{ label: \"Data Set 2\", x: ["+ x2(0) +","+x2(1) +","+x2(2) +","+ x2(3) +","+
x2(4) + "], y: ["+ y2(0) +","+y2(1) +","+y2(2) +","+ y2(3) +","+ y2(4) + text2)
}
}
I’ve broken the html file in two and tried to replace the part where I inserted
the data in the javascript with variables defined in scala on zeppelin. I’ve
attached the html below.
The ultimate aim is to be able to provide some standard plots which will
dynamically take RDDs defined in zeppelin and plot them with enhanced plots not
currently provided by zeppelin. The aim is have an interim fix until the mooted
summer of code project hopefully enhances zeppelins plotting capability. So, to
make this interim solution work, how do I get scala variables plotted in the
javascript of a html file. I’d like the info on how to use the variables as I
want to do the same thing for a heat map and a couple of other standard plots
required for my project. I’ve attached the example html files used in the scala
package below.
Thanks for any help.
Dean
>
var data = [ { label: "Data Set 1",
x: [] } ] ;
var xy_chart = d3_xy_chart()
.width(960)
.height(500)
.xlabel("X Axis")
.ylabel("Y Axis") ;
var svg = d3.select("#myViz").append("svg")
.datum(data)
.call(xy_chart) ;
function d3_xy_chart() {
var width = 640,
height = 480,
xlabel = "X Axis Label",
ylabel = "Y Axis Label" ;
function chart(selection) {
selection.each(function(datasets) {
//
// Create the plot.
//
var margin = {top: 20, right: 80, bottom: 30, left: 50},
innerwidth = width - margin.left - margin.right,
innerheight = height - margin.top - margin.bottom ;
var x_scale = d3.scale.linear()
.range([0, innerwidth])
.domain([ d3.min(datasets, function(d) { return d3.min(d.x); }),
d3.max(datasets, function(d) { return d3.max(d.x); }) ]) ;
var y_scale = d3.scale.linear()
.range([innerheight, 0])
.domain([ d3.min(datasets, function(d) { return d3.min(d.y); }),
d3.max(datasets, function(d) { return d3.max(d.y); }) ]) ;
var color_scale = d3.scale.category10()
.domain(d3.range(datasets.length)) ;
var x_axis = d3.svg.axis()
.scale(x_scale)
.orient("bottom") ;
var y_axis = d3.svg.axis()
.scale(y_scale)
.orient("left") ;
var x_grid = d3.svg.axis()
.scale(x_scale)
.orient("bottom")
.tickSize(-innerheight)
.tickFormat("") ;
var y_grid = d3.svg.axis()
.scale(y_scale)
.orient("left")
.tickSize(-innerwidth)
.tickFormat("") ;
var draw_line = d3.svg.line()
.interpolate("basis")
.x(function(d) { return x_scale(d[0]); })
.y(function(d) { return y_scale(d[1]); }) ;
var svg = d3.select(this)
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")") ;
svg.append("g")
.attr("class", "x grid")
.attr("transform", "translate(0," + innerheight + ")")
.call(x_grid) ;
svg.append("g")
.attr("class", "y grid")
.call(y_grid) ;
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + innerheight + ")")
.call(x_axis)
.append("text")
.attr("dy", "-.71em")
.attr("x", innerwidth)
.style("text-anchor", "end")
.text(xlabel) ;
svg.append("g")
.attr("class", "y axis")
.call(y_axis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "0.71em")
.style("text-anchor", "end")
.text(ylabel) ;
var data_lines = svg.selectAll(".d3_xy_chart_line")
.data(datasets.map(function(d) {return d3.zip(d.x, d.y);}))
.enter().append("g")
.attr("class", ".d3_xy_chart_line") ;
data_lines.append("path")
.attr("class", "line")
.attr("d", function(d) {return draw_line(d); })
.attr("stroke", function(_, i) {return color_scale(i);}) ;
data_lines.append("text")
.datum(function(d, i) { return {name: datasets[i].label, final: d[d.length-1]}; })
.attr("transform", function(d) {
return ( "translate(" + x_scale(d.final[0]) + "," +
y_scale(d.final[1]) + ")" ) ; })
.attr("x", 3)
.attr("dy", ".35em")
.attr("fill", function(_, i) { return color_scale(i); })
.text(function(d) { return d.name; }) ;
}) ;
}
chart.width = function(value) {
if (!arguments.length) return width;
width = value;
return chart;
};
chart.height = function(value) {
if (!arguments.length) return height;
height = value;
return chart;
};
chart.xlabel = function(value) {
if(!arguments.length) return xlabel ;
xlabel = value ;
return chart ;
} ;
chart.ylabel = function(value) {
if(!arguments.length) return ylabel ;
ylabel = value ;
return chart ;
} ;
return chart;
}
>
