Checking the Code: D3 Supply Curves

I often need to visualize how adaptive subsidies shift curves in real-time. Here is the basic D3.js setup I use for my sketches.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
const svg = d3.select("#sketch");
const demand = d3.line()([[20, 30], [380, 200]]);
const supply = d3.line()([[20, 200], [380, 40]]);

// Render curves with Celadon Theme colors
svg.append("path").attr("d", demand)
  .attr("stroke", "#7DA2A9") // Teal
  .attr("stroke-width", 3)
  .attr("fill", "none");

svg.append("path").attr("d", supply)
  .attr("stroke", "#C0564B") // Cinnabar
  .attr("stroke-width", 3)
  .attr("fill", "none");

// Add axes
svg.append("line").attr("x1", 20).attr("y1", 200)
  .attr("x2", 20).attr("y2", 30)
  .attr("stroke", "#4A4A4A") // Dark Gray
  .attr("stroke-width", 2);
svg.append("line").attr("x1", 20).attr("y1", 200)
  .attr("x2", 380).attr("y2", 200)
  .attr("stroke", "#4A4A4A") // Dark Gray
  .attr("stroke-width", 2);

The intersection point represents our equilibrium $E^*$.

$$ E^* = \frac{Q_d - Q_s}{P} $$