Geospatial Visual Analytics
barley.json
Type Table, then Shift-Enter. Ctrl-space for more options.
function plotBarley(site) {
const width = 1000;
const height = 200;
// const site = Array.from(groupedDataBySite.keys())[0];
const data = groupedDataBySite.get(site);
const margin = {
top: 30,
left: 110,
right: 30,
bottom: 35
};
const x = d3
.scaleLinear()
.domain([10, 70])
.range([margin.left, width - margin.right]);
// .padding(0.1);
const y = d3
.scaleBand()
.domain(Array.from(new Set(data.map((d) => d.variety))))
.range([height - margin.bottom, margin.top])
.padding(0.1);
// Create the SVG container.
const svg = d3
.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height])
.attr("style", "max-width: 100%; height: auto;");
const colorScale = d3
.scaleOrdinal()
.domain(Array.from(new Set(data.map((d) => d.year))))
.range(["red", "green"]);
const colorScaleLine = d3
.scaleDiverging()
.domain([-50, 0, 50])
.interpolator(d3.interpolateRdBu);
const shape = d3
.scaleOrdinal()
.domain(data.map((d) => d.year))
.range([d3.symbolCircle, d3.symbolDiamond2]);
const line = d3
.line()
.x((d) => x(d.yield))
.y((d) => y(d.variety));
svg
.append("text")
.attr("x", width - margin.right)
.attr("y", height / 2)
.attr("text-anchor", "end")
.style("font-size", "16px")
.text(site);
// Add the x-axis and label.
svg
.append("g")
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).tickSizeOuter(0));
// Add the y-axis and label, and remove the domain line.
svg
.append("g")
.call(d3.axisLeft(y))
.attr("transform", `translate(${margin.left},0)`);
// Group the data by variety
const groupedData = d3.group(
data.filter((d) => d.year == 1931 || d.year == 1932),
(d) => d.variety
);
// Create a group for the lines
const lineGroup = svg.append("g");
// Draw a line for each group
groupedData.forEach((value, key) => {
// console.log(value[0].yield);
lineGroup
.append("path")
.datum(value)
.attr("class", "line")
.attr("stroke", () => colorScaleLine(value[1].yield - value[0].yield))
.attr("stroke-width", 2)
.attr("fill", "none")
.attr("d", line);
});
svg
.append("g")
.selectAll("path")
.data(data)
.join("path")
.attr("transform", (d) => `translate(${x(d.yield)},${y(d.variety)})`)
.attr(
"d",
d3
.symbol()
.type((d) => shape(d.year))
.size(50)
)
.style("fill", (d) => colorScale(d.year));
return svg.node();
}
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.
