Built with blockbuilder.org
xxxxxxxxxx
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="wells.js"></script>
<script src="wells2.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<div id="something"></div>
<div id="vis"></div>
</body>
<script>
var w = 1000;
var h = 800;
var svgVar = d3.select("#something")
.append("svg")
.attr("width", w)
.attr("height", h)
;
svgVar.append('rect')
.attr('width', w / 2)
.attr('height', h / 2 )
.attr('fill', '#00FF00')
;
svgVar.append('rect')
.attr('x', 50)
.attr('y', 50)
.attr('width', w / 2)
.attr('height', h / 2 )
.attr('fill', '#FFFF00')
;
var w = 1000;
var h = 2000;
var svgNew = d3.select("#vis")
.append("svg")
.attr("width", w)
.attr("height", h)
;
function draw(wells){
console.log(wells);
svgVar.selectAll('circle')
.data(wells)
.enter()
.append('circle')
.attr('cx', function(d,i){
return i * 20
})
.attr('cy', function(d,i){
return parseInt(wells[i].depth) / 30
})
.attr('r', function(d,i){ return wells[i].depth/1000})
.attr('fill', '#0055FF');
d3.select('svg') // begin transition on click
.on('click', function(){
// d3.json("https://localhost:3000/api/nd.json", trans) // get new data from server
trans(wells2);
function trans(newWells){
console.log(newWells) // console.log new data
svgVar.selectAll('circle')
.data(newWells) // update new data
.transition() // transition from old to new
.duration(1000) // length of animation
.delay(function(d,i){
return i / newWells.length * 2000
})
.attr('cx', function(d,i) {
return i * 20
})
.attr('cy', function(d,i) {
return parseInt(newWells[i].depth) / 30
})
.attr('r', function(d,i){ return newWells[i].depth/1000})
.attr('fill', '#0055FF');
}
});
};
// d3.json("https://localhost:3000/api/nd.json", draw); // begin visualization
draw(wells);
</script>
https://d3js.org/d3.v3.min.js