tess_scene1_sample.js

function drawScene1(data) {

    // prepare color scale
    var colorScale = d3.scaleSequential()
        .domain([2018, 2023])
        .interpolator(d3.interpolateOranges);

    // create SVG for the visualization
    var svg = d3.select("#visualization").append("svg")
        .attr("width", 800)
        .attr("height", 600);

    // ## scatter plot ##

    // define width and height for scatter plot
    var scatterWidth = 400;
    var scatterHeight = 300;

    // define scale for x-axis based on equilibrium temperature range
    var xScatter = d3.scaleLinear()
        .domain([d3.min(data, d => +d.pl_eqt), d3.max(data, d => +d.pl_eqt)])
        .range([0, scatterWidth]);

    // define scale for y-axis based on orbital eccentricity range
    var yScatter = d3.scaleLinear()
        .domain([d3.min(data, d => +d.pl_orbeccen), d3.max(data, d => +d.pl_orbeccen)])
        .range([scatterHeight, 0]);

    // apply transformation to position the visual
    var scatter = svg.append("g")
        .attr("transform", "translate(" + (scatterWidth / 2) + " , 50)");

    // draw circles in scatter plot for each data point
    var circles1 = scatter.selectAll("circle")
        .data(data)
        .enter().append("circle")
        .attr("cx", d => xScatter(d.pl_eqt))
        .attr("cy", d => yScatter(d.pl_orbeccen))
        .attr("r", 5)
        .attr("fill", (d) => colorScale(d.disc_year))
        .on("click", function(event, d) {
            // Clear the visualization
            d3.select("#visualization").html("");
            // Draw Scene 2
            drawScene2(d, data);
        });

    // add x-axis
    scatter.append("g")
        .attr("transform", "translate(0, " + scatterHeight + ")")
        .call(d3.axisBottom(xScatter));

    // add y-axis
    scatter.append("g")
        .call(d3.axisLeft(yScatter));
}