This is an excerpt from an index.html of D3.js I have done, my idea is to include an external image and make it appear by clicking the 'btn3' button. In button 1 and 2 I have two graphs that work normally, the problem is to make button 3 display the image (of a link), D3.json is an example that I am trying to use for testing. Other options are welcome. Thanks for 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>