Public
Edited
Oct 16, 2023
Insert cell
Insert cell
viewof s = Inputs.range([1, 100], {label: "s", step: 1})
Insert cell
chart115={
// Set up SVG dimensions
const svgWidth = 500;
const svgHeight = 500;
const margin = { top: 20, right: 20, bottom: 30, left: 40 };
const width = svgWidth - margin.left - margin.right;
const height = svgHeight - margin.top - margin.bottom;


// Create an SVG container
const svg = d3.create("svg")
.attr("width", svgWidth)
.attr("height", svgHeight);


var a =0;
var b =0;
var c =1;
var d =1;;


if(s <= 50){
a = s;
b = 0;
c = 1;
d = 0;
} else {
a = 0;
b = s - 50;
c = 0;
d = 1;
}


var ellipsesData = [
// { cx: 300, cy: 200, rx: 180, ry: 51, angle: 16 },
// { cx: 300, cy: 200, rx: 158, ry: 23, angle: 19 },
// { cx: 300, cy: 200, rx: 108, ry: 9, angle: 19 },
{ cx: 300, cy: 200, rx: c*180 - 0.22*2*a, ry: c*51- 0.28*2*a, angle: 16 + 0.03*2*a },
{ cx: 300, cy: 200, rx: d*158 - 0.5*2*b, ry: d*23- 0.14*2*b, angle: 19 },
// { cx: 300, cy: 200, rx: 230 - 0.8*a, ry: 40 - 0.32*a, angle: 28 , style: "black" },
// { cx: 300, cy: 200, rx: 230 - 0.8*b, ry: 40 - 0.32*b, angle: 28 , style: "black" }
];




// Write RSS text
svg.append("text")
.attr("x", 350) // Adjust the x-coordinate for positioning
.attr("y", 70) // Adjust the y-coordinate for positioning
.style("fill", "black")
.style("font-size", "14px")
.text(`RSS = ${2600 - s*s/4}`);




// Dimensions of the square
const squareSize = 100 + s;

// Coordinates of the center of the square
const centerX = 150;
const centerY = 260;

// Append a group element to the SVG
const squareGroup = svg.append("g")
.attr("transform", `translate(${centerX}, ${centerY})`); // Translate to the center

// Append a rotated square to the group
squareGroup.append("rect")
.attr("x", -squareSize / 2) // Set x to half the negative size
.attr("y", -squareSize / 2) // Set y to half the negative size
.attr("width", squareSize)
.attr("height", squareSize)
.attr("transform", "rotate(45)") // Rotate the square by 45 degrees
.style("stroke", "black")
.style("fill", "lightgrey");

// Function to create arrowheads
function createArrowhead(id, orientation) {
svg.append("defs").append("marker")
.attr("id", id)
.attr("refX", 6)
.attr("refY", 6)
.attr("markerWidth", 10)
.attr("markerHeight", 10)
.attr("orient", orientation)
.append("path")
.attr("d", "M2,2 L6,6 L2,10 L10,6 L2,2")
.style("fill", "grey");
}

// Create arrowheads for different directions
createArrowhead("arrowhead-left", 180);
createArrowhead("arrowhead-right", 0);
createArrowhead("arrowhead-up", 270);
createArrowhead("arrowhead-down", 90);



// Render X and Y axes
svg.append("line")
.attr("x1", 5)
.attr("y1", 260)
.attr("x2", 480)
.attr("y2", 260)
.style("stroke", "grey")
.attr("marker-start", "url(#arrowhead-left)")
.attr("marker-end", "url(#arrowhead-right)");

svg.append("line")
.attr("x1", 150)
.attr("y1", 50)
.attr("x2", 150)
.attr("y2", 410)
.style("stroke", "grey")
.attr("marker-start", "url(#arrowhead-up)")
.attr("marker-end", "url(#arrowhead-down)")

// Add "beta2" beside the Y-axis

svg.append("text")
.attr("x", 130) // Adjust the x-coordinate for positioning
.attr("y", 50) // Adjust the y-coordinate for positioning
.style("fill", "black")
.style("font-size", "14px")
.text("β")
.append("tspan")
.attr("dy", "0.5em")
.attr("font-size", "0.8em")
.text("2");

// Add "beta1" beside the X-axis
svg.append("text")
.attr("x", 480) // Adjust the x-coordinate for positioning
.attr("y", 275) // Adjust the y-coordinate for positioning
.style("fill", "black")
.style("font-size", "14px")
.text("β")
.append("tspan")
.attr("dy", "0.5em")
.attr("font-size", "0.8em")
.text("1");
// Add "beta1" beside the X-axis
svg.append("text")
.attr("x", 540) // Adjust the x-coordinate for positioning
.attr("y", 275) // Adjust the y-coordinate for positioning
.style("fill", "black")
.style("font-size", "14px")
.text("β")
.append("tspan")
.attr("dy", "0.5em")
.attr("font-size", "0.8em")
.text("1");

svg.selectAll("ellipse")
.data(ellipsesData)
.enter()
.append("ellipse")
.attr("cx", function (d) { return d.cx; })
.attr("cy", function (d) { return d.cy; })
.attr("rx", function (d) { return d.rx; })
.attr("ry", function (d) { return d.ry; })
.attr("transform", function (d) {
return "rotate(" + d.angle + " " + d.cx + " " + d.cy + ")";
})
.style("fill", "none")
.style("stroke", function (d) { return d.style || "steelblue"; }); // Use "black" if style is defined, otherwise use "steelblue"


// Make dot at the center
svg.selectAll("dot")
.data(ellipsesData)
.enter()
.append("circle")
.attr("cx", function (d) { return d.cx; })
.attr("cy", function (d) { return d.cy; })
.attr("r", 3) // Radius of the dot
.style("fill", "black");

// Add "OLS" label beside the dots
svg.selectAll("label")
.data(ellipsesData)
.enter()
.append("text")
.attr("x", function (d) { return d.cx + 5; }) // Adjust the x-coordinate for positioning
.attr("y", function (d) { return d.cy; })
.text("OLS")
.style("fill", "black")
.style("font-size", "10px");







svg.append("line")
.attr("x1", 150)
.attr("y1", 153)
.attr("x2", 150)
.attr("y2", 260)
.style("stroke", "red")
.style("stroke-width", 3)
.style("stroke-dasharray", "3,3");



svg.append("line")
.attr("x1", 150)
.attr("y1", 153)
.attr("x2", 300)
.attr("y2", 200)
.style("stroke", "red")
.style("stroke-width", 3)
.style("stroke-dasharray", "3,3");





// Make dot for the smallest ellipse
svg.selectAll("dot")
.data(ellipsesData)
.enter()
.append("circle")
.attr("cx", 150)
.attr("cy", 188 - 0.35*2*a )
.attr("r", 3*c) // Radius of the dot
.style("fill", "steelblue");



// Make dot for the smallest ellipse
svg.selectAll("dot")
.data(ellipsesData)
.enter()
.append("circle")
.attr("cx", 150 + 0.47*2*b)
.attr("cy", 153 + 0.14*2*b )
.attr("r", 3*d) // Radius of the dot
.style("fill", "steelblue");
return svg.node();
}
Insert cell

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.
Learn more