Data Engineer and aspiring Data Visualization Journalist, you can reach me at rjhontomin@gmail.com
{
// canvas
const svg = d3.create('g').attr("width", width+margin.left+margin.right).attr("height", height+margin.top+margin.bottom)
var canvas_node = svg.append('canvas')
const context = canvas_node.node().getContext('2d')
d3.select(context.canvas).attr('width', width+margin.left+margin.right).attr('height', height);
var velocityDecay = 0.2; // velocity decay: higher value, less overshooting
let nodes = []
var cycles = 1000;
const simulation = d3.forceSimulation();
simulation.nodes(nodes);
simulation.force('x', d3.forceX(d => x("All")).strength(0.01))
.force('y', d3.forceY().strength(0.05).y(d => y(parseFloat(d.depth))))
.force('collide',d3.forceCollide().radius(function(d) { return size(d.magnitude) + 1}))
.force("charge", d3.forceManyBody().strength(-0.1 ))
.alphaDecay(0).velocityDecay(velocityDecay).on('tick', ticked)
simulation.tick(10)
var tick = 0
var start = 1
var limit = 20
function ticked() {
tick = tick+1
context.clearRect(0, 0, width+margin.left+margin.right, height)
nodes.forEach(v => {
context.beginPath();
context.fillStyle = "orange";
context.arc(v.x,v.y,size(v.magnitude),0,Math.PI*2);
context.fill();
})
}
uniq_dates.forEach((val, i) => {
console.log(val, i)
setTimeout(function() {
console.log(val, i)
nodes = [...nodes, ...data.filter(v => v.date_f == val) ]
simulation.nodes(nodes)
} , i*200)
if (i > uniq_dates.length) {
simulation.alphaDecay(0.5).stop()
}
})
return svg.node()
}
phl_regions2 = FileAttachment("phl_regions2.geojson").json()
_philvolcs = FileAttachment("2021_philvolcs.csv").csv()
x = d3.scaleBand().domain(["All"]).range([0, width]).padding(1)
y = d3.scaleSequentialSqrt().domain([0, 500]).range([100, height])
d3.extent(_philvolcs.map(v => parseFloat(v.depth)))
size = d3.scaleLinear().domain([0,6]).range([0.2, 3])
parseDate = d3.utcParse("%Y-%m-%d") //2021-01-31
height = 900
width = 750
margin = ({"top":100, "bottom":50, "left":30, "right":30})
innerHeight = height - margin.top - margin.bottom
innerWidth = width - margin.left - margin.right
projection = d3.geoMercator().translate([margin.left, margin.top]).fitSize([innerWidth, innerHeight], phl_regions2)
uniq_dates = data.map(v => v.date_f).filter((v, i, a) => a.indexOf(v) === i)
// only show 5000
data = ( await FileAttachment("2021_philvolcs.csv").csv()).map(d => {
let geoJsonPoint = {
type: "Point",
coordinates: [d.lat, d.long]
}
let t = projection([parseFloat(d.long), parseFloat(d.lat)]);
console.log(d.lat, d.long, t)
return {...d, "x": t[0], "y":t[1], date: parseDate(d.date)}
}).sort((a, b) => a.date - b.date).splice(0, 4000)
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
