viewof xaxis = DOM.select(colors)
md`### Y axis`
colors = ["Magnitude", "Depth_km", "Horizontal_Distance_km","Date"]
//load data
data = d3.csv("https://gist.githubusercontent.com/johnrmurray/743e6e6c69dc5b1c8035891891ed6835/raw/d789724c8bc16956380525dbb21fdb67e25b668d/earthquake%2520total.csv")
.then(data => {
data.forEach( d => {
d.Depth_km = +d.Depth_km;
d.Horizontal_Distance_km = +d.Horizontal_Distance_km;
d.Date =+ new Date(d.Date).getFullYear();
d["Magnitude"] = +d["Magnitude"]
d.xValue = +d.Depth_km;
d.yValue = +d.Date;
});
return data;
})
viewof scatter_all = {
const svg = d3.select("body").select("svg#vis3");
//d3.select(DOM.svg(width + 50, height+150));
// define circle attributes
var circleAttrs = {
cx: d => xScale_scatter(d[xaxis]),
cy: d => yScale_scatter(d[yaxis]),
r: 5,
fill: "red",
stroke: "black",
width: 2,
strokeOpacity: 0.7,
fillOpacity: 1
};
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
svg.append("g")
svg.selectAll("circle")
.data(data)
.join("circle")
.attr("cx", circleAttrs.cx)
.attr("cy", circleAttrs.cy)
.attr("r", circleAttrs.r)
.attr('fill', circleAttrs.fill)
.attr('opacity', circleAttrs.fillOpacity)
.attr('stroke', circleAttrs.stroke)
.attr("stroke-width", circleAttrs.width)
//.attr("stroke-opacity", circleAttrs.strokeOpacity)
/*
.attr("fill", "none")
.attr("stroke", d => colorScale(d.species))
.attr("stroke-width", 2)
.attr("stroke-opacity", 0.7)
*/
.on('mouseover', handleMouseOver)
.on('mouseout', handleMouseOut);
// .on("click", function(d) {
// if(d3.select(this).style("opacity") != 0){
// div.transition()
// .duration(200)
// .style("opacity", .8);
// // div .html(d.datetime.substring(0,10) )
// // .style("left", (d3.event.pageX + 5) + "px")
// // .style("top", (d3.event.pageY - 24) + "px");
// }
// })
// x axis
svg.select("#axis2").remove();
var xAxis = d3.axisBottom();
xAxis.scale(xScale_scatter)
svg.append("g")
.attr("transform", `translate(0, ${height+135- margin.bottom})`)
.attr("id", "axis2")
.style("font", "bold 12px sans-serif")
.attr("fill", "black")
.call(xAxis)
// x axis label
svg.select("#text2").remove();
svg.append("text")
.attr("transform", `translate(${width/2}, ${height+135- margin.bottom+40})`)
.attr("id", "text2")
.style("text-anchor", "middle")
.attr("fill", "black")
.style("font", "bold 15px sans-serif")
.text(xaxis);
svg.append("text")
.attr("x", width / 2 )
.attr("y", +50)
.style("text-anchor", "middle")
.attr("fill", "black")
.text("Earthquake Data 1965-2016")
// y axis
svg.select("#axis1").remove();
var yAxis = d3.axisLeft();
yAxis.scale(yScale_scatter)
svg.append("g")
.attr("transform", `translate(${margin.left}, 0)`)
.attr("id", "axis1")
.style("font", "bold 12px sans-serif")
.attr("fill", "black")
.call(yAxis)
// y axis label
svg.select("#text3").remove();
svg.append("text")
.attr("transform", `translate(${margin.left - 50}, ${(height+135- margin.bottom)/2+25})rotate(-90)`)
.attr("id", "text3")
.style("text-anchor", "middle")
.style("font", "bold 15px sans-serif")
.attr("fill", "black")
.text(yaxis);
// function to handle mouseover event
function handleMouseOver(d, i) {
console.log(d,i)
console.log(this)
d3.select(this)//.transition()
//.duration(10)
.attr("fill", "springgreen")
.attr("stroke-width", 20)
.attr("stroke", "springgreen")
svg.append("text")
.attr('x', this.getAttribute('cx'))
.attr('y', this.getAttribute('cy'))
.attr('id', 'tooltip')
.style("font", "bold 25px sans-serif")
.text(`(${d.Depth_km}, ${d.Magnitude})`)
.attr("fill", "white")
.attr("stroke", "black")
.attr("stroke-width", 1)
}
function handleMouseOut(d, i) {
d3.select(this).transition()
.attr('fill', 'red')
.attr("stroke-width", circleAttrs.width)
.attr("stroke", "black")
svg.select('#tooltip').remove()
}
return svg.node();
}
xScale_scatter = d3.scaleLinear()
.domain(d3.extent(data, d => d[xaxis])).nice()
.range([margin.left, width-margin.right])
yScale_scatter = d3.scaleLinear()
.domain(d3.extent(data, d => d[yaxis])).nice()
.range([height+135 - margin.bottom, margin.top])
colorScale = d3.scaleOrdinal()
.domain(data.map(d => d.species))
.range(d3.schemeCategory10)
margin = ({top: 10, right: 50, bottom:35, left:70})
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.
