md`# Final project scatter plot`
chart = {
var height = 500
var margin = ({top: 20, right: 70, bottom: 40, left: 50})
// Making the svg
const svg = d3.select(DOM.svg(width,height))
//// Functions for plotting ////
// Define the div for the hover effect
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
// xAxis functions
let xAxis = g => g
.attr("transform", `translate(0,${height-margin.bottom})`)
.call(d3.axisBottom(x))
.call(g => g.select(".domain").remove())
.call(g => g.append("text") // Adding axis label
.attr("x", width - margin.right)
.attr("y", -4)
.attr("fill", "#000")
.attr("font-weight", "bold")
.attr("font-size", 13)
.attr("text-anchor", "end")
.text(xSelect))
let x = d3.scaleLinear()
.domain([0.9*d3.min(data, d => parseFloat(d[xSelect])),1.05*d3.max(data, d => parseFloat(d[xSelect]))])
.range([margin.left,width-margin.right])
// Y-axis functions
let yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y))
.call(g => g.select(".domain").remove())
.call(g => g.select(".tick:last-of-type text").clone() // Adding axis label
.attr("x", 4)
.attr("text-anchor", "start")
.attr("font-weight", "bold")
.attr("font-size", 13)
.text(ySelect))
let y = d3.scaleLinear()
.domain([0.95*d3.min(data, d => parseFloat(d[ySelect])),1.05*d3.max(data, d => parseFloat(d[ySelect]))])
.range([height-margin.bottom,margin.top])
//// Drawing map ////
let el = this;
// If plot has changed do this:
if (!el) {
// Adding dots
const dot = svg.append("g")
.attr("fill", "steelblue")
.attr("stroke", "steelblue")
.attr("stroke-width", 2)
.style('fill-opacity',.5)
.selectAll("g")
.data(data)
.join("circle")
.attr("transform", d => `translate(${x(d[xSelect])},${y(d[ySelect])})`)
.attr("r", d => 10)
// Mouseover function high lighting point with red
.on('mouseover', function (d, i) {
d3.select(this).transition()
.duration('50')
.attr('opacity', '.85')
.attr("stroke", "red")
.attr('fill','red');
// Shows the tooltip
div.transition()
.duration(50)
.style("opacity", .9);
// Writes the municipality name in the tooltip
div.html(d.Municipality)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY) + "px")
})
// Setting things back to normal after tool tip
.on('mouseout', function (d, i) {
d3.select(this).transition()
.duration('50')
.attr('opacity', '1')
.attr('stroke','steelblue')
.attr('fill','steelblue');
// Deletes the tool tip (i.e just makes it invisible)...
div.transition()
.duration('50')
.style("opacity", 0);
});
// Adding axes to plot
svg.append('g')
.call(xAxis);
svg.append('g')
.call(yAxis);
el = svg.node()
} else {
//// Updating scatterplot when things change ////
let tmp = d3.select(this);
// Removes the text on the axes
tmp.selectAll("text")
.transition()
.duration(1000)
.style('opacity', 0)
.remove();
// Removes the ticklines on the axes
tmp.selectAll(".tick line").remove();
// Moving the circles
d3.selectAll("circle")
.data(data)
.join("circle")
.transition()
.duration(1000)
.attr("transform", d => `translate(${x(d[xSelect])},${y(d[ySelect])})`)
.attr("r", d => 10)
tmp.append('g')
.call(xAxis);
tmp.append('g')
.call(yAxis);
el = tmp.node()
}
// return the plot to observable
return el
}
data = d3.csv('https://gist.githubusercontent.com/elisabethzinck/7dfba9f528eb8e2b5abb11c2975b233c/raw/ab555a85dbca5e501a8fa36a0c3d79faf9e92f63/scatterplotdata.csv')
import {select} from "@jashkenas/inputs"
d3= require("d3@5")
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.
