D3.js include external image on the third button

Question

this is an excerpt from an index.html of D3.js that I have been doing, my idea is to include an external image and make it appear by clicking on the 'btn3' button. On button 1 and 2 I have two charts that work normally, the problem is to have button 3 display the image (from a link), D3.json is an example I’m trying to use for testing. Other options are welcome. I appreciate the help.

<button id="btn1">Sobreviventes e mortos por grupos</button>
<button id="btn2">Sobreviventes e mortos por porta de embarque</button>
<button id="btn3">Fotos</button>


<div id="chartContainer">

    <script type="text/javascript">

    // novo gráfio bubble incluso 

        var svg = dimple.newSvg("#chartContainer", 590, 400);
        d3.csv("d3_1.csv", function (data) {
            var myChart = new dimple.chart(svg, data);
            myChart.setBounds(65, 30, 505, 330)
            myChart.addCategoryAxis("x", ["Embarked", "Survived"]);
            myChart.addMeasureAxis("y", "Amount");
            myChart.addMeasureAxis("z", "Amount");
            myChart.addSeries("Survived", dimple.plot.bubble);   
            myChart.addLegend(70, 10, 510, 20, "right");
            myChart.draw();
        });
    </script>

    <script type="text/javascript">

        d3.select("#btn1").on("click", function(){
            d3.select("svg").remove();     
            var svg = dimple.newSvg("#chartContainer", 590, 400);
            d3.csv("d3_1.csv", function (data) {
                var myChart = new dimple.chart(svg, data);
                myChart.setBounds(65, 30, 505, 330)
                myChart.addCategoryAxis("x", ["Embarked", "Survived"]);
                myChart.addMeasureAxis("y", "Amount");
                myChart.addMeasureAxis("z", "Amount");
                myChart.addSeries("Survived", dimple.plot.bubble);
                myChart.addLegend(70, 10, 510, 20, "right");
                myChart.draw();
            });
        });
    </script>

    <script type="text/javascript">

        d3.select("#btn2").on("click", function(){
            d3.select("svg").remove();
            var svg = dimple.newSvg("#chartContainer", 600, 400);
            d3.csv("d3_1.csv", function (data) {
                var myChart = new dimple.chart(svg, data);
                myChart.setBounds(80, 30, 480, 330)
                myChart.addMeasureAxis("x", "Amount");
                myChart.addCategoryAxis("y", ["Embarked", "Survived"]);
                myChart.addSeries("Survived", dimple.plot.bar);
                myChart.addLegend(60, 10, 510, 20, "right");
                myChart.draw();

            });
        });
    </script>

    <script>

        d3.select("#btn3").on("click", function(){
            // Fazer com que o link abaixo funcione com o botão acima exibindo a imagem

            d3.json("http://www.reddit.com/r/earthporn.json?limit=80", function(error, imgs) {
                // filter out posts without a thumbnail
                var images = imgs.data.children.filter(function(d) {
                    return d.data.thumbnail.slice(-3) == "jpg";
                });

                images.forEach(function(img) {
                    d3.select("body")
                      .append("a")
                      .attr("href", img.data.url)
                      .append("img")
                      .attr({
                        height: 66,
                        src: img.data.thumbnail
             });        
        });
    </script>

</script>

Answer 1

You need to specify the image attributes separately, not in batch. Noting that there was a function without closing:

d3.select("#btn3").on("click", function(){
    // Fazer com que o link abaixo funcione com o botão acima exibindo a imagem

    d3.json("http://www.reddit.com/r/earthporn.json?limit=80", function(error, imgs) {
        // filter out posts without a thumbnail
        var images = imgs.data.children.filter(function(d) {
            return d.data.thumbnail.slice(-3) == "jpg";
        });

        images.forEach(function(img) {
            d3.select("body")
            .append("a")
            .attr("href", img.data.url)
            .append("img")
            .attr("src",img.data.thumbnail)
            .attr("height","66")
        });
    }); // estava faltando esse fechamento       
});