在 Apache Zeppelin 中使用 D3 图表答案

【问题标题】：Using D3 Charts in Apache Zeppelin在 Apache Zeppelin 中使用 D3 图表
【发布时间】：2021-12-25 08:01:21
【问题描述】：

我主要使用 Scala 来满足我所有的数据工程需求，并且我已经感觉到在使用 Pyhton 中提供的一些好的库时没有太多支持。一个例子是绘图库。似乎Scala中没有。我在 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 轴上的特征来绘制它。我怎么能这样做？

【问题讨论】：

标签： scala apache-spark d3.js apache-zeppelin

【解决方案1】：

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

但是，我建议如果您只想在 javascript 中使用“标准”图表，如散点图、条形图等，请使用基于 d3 的图表库，如 britecharts、billboard 等，这些图表以更方便和更短的语法提供，而不是通过自己在 d3 中构建它们来“重新发明轮子”，您必须在其中绘制数据、计算范围/比例并设置轴（工作量惊人）。

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

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

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

【讨论】：