// Give the chart a specific name for embedding viewof creditRatingChart = { const chart = Plot.plot({ marks: [ // Bid price line Plot.line(chartData, { x: "date", y: "probability", stroke: "steelblue", strokeWidth: 2 }), // Ask price line Plot.line(chartData, { x: "date", y: "askPrice", stroke: "coral", strokeWidth: 2 }), // Points for bid and ask Plot.dot(chartData, { x: "date", y: "probability", stroke: "steelblue", fill: "white", r: 3 }), Plot.dot(chartData, { x: "date", y: "askPrice", stroke: "coral", fill: "white", r: 3 }), // Add a rule for today Plot.ruleX([new Date()], {stroke: "gray", strokeDasharray: "5,5"}) ], y: { domain: [0, 100], label: "Price (%)", grid: true }, x: { label: "Date", grid: true }, height: 500, width: 800, marginRight: 60, marginLeft: 60, marginBottom: 40, marginTop: 40, // Add title title: "US Credit Rating Downgrade Probability", subtitle: "Bid and Ask prices from Kalshi prediction market" }); // Create the container with better positioned elements const container = html`

${chart}

Bid Price

Ask Price

ADJACENT

`; return container; }