Sunspots

Astronomy

Contour Chart

d3 = require("d3@7");

import { fullWidth, fullHeight } from "./tools/Globals.js";

viewof message = html`<span class="message">Loading data ...</span>`
spots = FileAttachment("sunspots.csv").csv()
  .then(data => {
    viewof message.textContent = "";
    return data.map(d => ({ year: +d.year, lat: +d.lat }));
  });

Code

chart = {
  const margin = { top: 20, right: 10, bottom: 20, left: 60 };
  const width = fullWidth - margin.left - margin.right,
        height = fullHeight - margin.top - margin.bottom;

  const window = d3.create("svg")
    .attr("width", "100%")
    .attr("height", "100%")
    .attr("viewBox", `0 0 ${fullWidth} ${fullHeight}`)
    .attr("preserveAspectRatio", "xMidYMid meet");

  const svg = window.append("g")
    .attr("class", "sunspots")
    .attr("transform", `translate(${margin.left},${margin.top})`);

  const x = d3.scaleLinear()
    .domain([1917, 1986])
    .rangeRound([0, width]);

  const y = d3.scaleLinear()
    .domain([-40, 40])
    .rangeRound([height, 0]);

  const xAxis = d3.axisBottom(x)
    .tickValues(d3.range(1910, 1990, 10))
    .tickFormat(d3.format("d"));

  const yAxis = d3.axisLeft(y);

  svg.append("g")
    .attr("class", "grid")
  .selectAll("path")
    .data(d3.range(-30, 40, 10))
    .join("path")
      .attr("d", d => `M0,${y(d)}H${width}`)
      .style("stroke", "lightgrey")
      .style("stroke-opacity", 0.7)
      .style("shape-rendering", "crispEdges");

  svg.append("g")
    .attr("class", "contours");

  svg.append("g")
    .attr("class", "axis axis-x")
    .attr("transform", `translate(0,${height})`)
    .call(xAxis);

  svg.append("g")
    .attr("class", "axis axis-y")
    .call(yAxis);

  svg.append("text")
    .attr("alignment-baseline", "hanging")
    .attr("dx", 10)
    .text("Latitude of sunspot group (deg.)");

  const density = d3.contourDensity()
    .x(d => x(d.year))
    .y(d => y(d.lat))
    .size([width, height])
    .cellSize(2)
    .thresholds(10)
    .bandwidth(6)
    (spots);

  const color = d3.scaleSequential(d3.interpolateYlOrBr)
    .domain(d3.extent(density, d => d.value));

  svg.select(".contours").selectAll("path")
    .data(density)
    .join("path")
      .attr("fill", d => color(d.value))
      .attr("d", d3.geoPath());

  return window.node();
}

This butterfly diagram shows the latitude distribution of sunspot groups over several past solar cycles.

Resources

Data

Inputs.table(spots, {
  header: { year: "Year", lat: "Latitude (deg.)" },
  format: { year: d => d.toFixed(3), lat: d => d.toFixed(1) },
  align: { year: "right", lat: "left" },
});