sandsnapRaw = FileAttachment("SandSnap_for__Public_Download_Modified@2.csv").csv()
viewof selectedStates = Inputs.table(sandsnapStates)
grainSizeExtents = d3.extent(sandsnapStates, (state) => state.D50)
simpleViz = {
//Create SVG artboard
const svg = d3.create("svg").attr("width", width).attr("height", height);
//Create SVG rect for background color
svg
.append("rect")
.attr("width", width)
.attr("height", height)
.attr("fill", bkgdColor);
//add axes defined below
svg
.append("g")
.attr("transform", "translate(0," + (height - margin) + ")")
.call(xAxis)
.call((g) => {
g.selectAll("line");
});
svg
.append("g")
.attr("transform", "translate(" + margin + ")")
.call(yAxis)
.call((g) => {
g.select(".domain").remove();
g.selectAll("line").attr("opacity", ".1");
});
svg
.selectAll(".dataPoints")
.data(sandsnapStates)
.join("circle")
.attr("cx", (d) => statesToPixelsX(d.state))
.attr("cy", (d) => grainSizeToPixelsY(d.D50))
.attr("r", 3)
.attr("fill", eleColor);
return svg.node();
}
grainSizeToPixelsY = d3
.scaleLinear()
.domain([0, 2])
.range([height - margin, margin])
xAxis = d3
.axisBottom(statesToPixelsX)
.tickPadding(10)
.tickSizeInner(5)
//.tickSizeInner(-height + margin * 2) //try this one too to see vertical grid lines!
.tickSizeOuter(0)
olympians
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.
