I'm trying to add more visualization options to Apache Zeppelin by integrating it with d3.js

I found an example where someone did it with leaflet.js here, and tried to do something similar -- unfortunately I'm not too familiar with angularJS (what Zeppelin uses to interpret front end languages). I'm also not streaming data. Below is my code, using just a simple tutorial example from d3.js

%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 = '.5.16/d3.min.js';
    sc.onload = useD3;
    sc.onerror = function(err) { alert(err); }
    document.getElementsByTagName('head')[0].appendChild(sc);
}
</script>

However, in Zeppelin, it finishes running with no errors, and all I get is a blank div. Any help is appreciated.

I'm trying to add more visualization options to Apache Zeppelin by integrating it with d3.js

I found an example where someone did it with leaflet.js here, and tried to do something similar -- unfortunately I'm not too familiar with angularJS (what Zeppelin uses to interpret front end languages). I'm also not streaming data. Below is my code, using just a simple tutorial example from d3.js

%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./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>

However, in Zeppelin, it finishes running with no errors, and all I get is a blank div. Any help is appreciated.

• javascript
• d3.js
• apache-zeppelin

• did you managed to solve this issue? – perrohunter Commented Jun 29, 2016 at 18:54
• 1 Your example works in Zeppelin version 0.6.0-SNAPSHOT – Paul-Armand Verhaegen Commented Jul 5, 2016 at 15:16
• 3 works in Version 0.7.1 just fine – Walker Rowe Commented May 18, 2017 at 18:40
• The solution I was looking for is in the question! Thank you :-) – mrbrahman Commented Aug 10, 2021 at 14:43

1 Answer 1

The Zeppelin version is 0.7.0. The example works in this version. You could also use the html display system. The results are on the pictures.