在 Apache Zeppelin 中使用 D3 图表

Question

我主要使用 Scala 来满足我所有的数据工程需求，我已经感觉到在使用 Pyhton 中提供的一些优秀库时没有太多支持。一个例子是绘图库。似乎 Scala 中有 none。我在 GitHub 中找到的那些像 matplotlib4j 似乎已经过时或者没有人在使用它了。

我意识到我们可以使用 Javascript 库，我遇到了 D3，我想尝试一下。我在下面有这个例子：

%angular

<div>
    <svg class="chart"></svg>
</div>
<script>
function useD3() {
    var data = [4, 8, 15, 16, 23, 42];

    var width = 420,
        barHeight = 20;

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

    var chart = d3.select(".chart")
        .attr("width", width)
        .attr("height", barHeight * data.length);

    var bar = chart.selectAll("g")
        .data(data)
      .enter().append("g")
        .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });

    bar.append("rect")
        .attr("width", x)
        .attr("height", barHeight - 1);
}

if (window.d3) {
    useD3();
} else {
    var sc = document.createElement('script');
    sc.type = 'text/javascript';
    sc.src = 'https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js';
    sc.onload = useD3;
    sc.onerror = function(err) { alert(err); }
    document.getElementsByTagName('head')[0].appendChild(sc);
}
</script>

它呈现了应有的效果，但我的问题是如何将我的 Spark Scala 中的数据导入此 Javascript？例如，我从我的一个 DataFrame 计算中打印出以下 Scala 元组：

Threshold = 0.0, Features = 48
Threshold = 0.05, Features = 36
Threshold = 0.1, Features = 35
Threshold = 0.15, Features = 34
Threshold = 0.2, Features = 34
Threshold = 0.25, Features = 34
Threshold = 0.3, Features = 34
Threshold = 0.35, Features = 34
Threshold = 0.4, Features = 34
Threshold = 0.45, Features = 32
Threshold = 0.5, Features = 30

我想用 x 轴上的阈值和 y 轴上的特征来绘制它。我该怎么做？

Answer 1

d3 是一个相当低级的库，可以让您使用数据到视觉变量（通常是 svg 元素属性）的映射来构建非常复杂的交互式可视化。

但是，如果您只想在 javascript 中使用 'standard' 散点图、条形图等图表，我建议您使用基于 d3 的图表库，例如 britecharts、billboard 等，这些图表可用在更方便和更短的语法中，而不是 're-inventing the wheel' 通过自己在 d3 中构建它们，您必须在其中绘制数据，计算 ranges/scales 并设置轴（数量惊人工作）。

https://britecharts.github.io/britecharts/tutorial-scatter-plot.html

https://naver.github.io/billboard.js/

其他可用，但这些正在积极维护

在 Apache Zeppelin 中使用 D3 图表

Using D3 Charts in Apache Zeppelin

scala

apache-spark

d3.js

apache-zeppelin