| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Intro Chart</title> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script> |
| <style> |
| body { |
| margin: 0; |
| padding: 20px; |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; |
| background-color: #fafafa; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| min-height: 100vh; |
| } |
| #chart { |
| background: white; |
| border-radius: 8px; |
| padding: 40px; |
| box-shadow: 0 2px 8px rgba(0,0,0,0.1); |
| } |
| </style> |
| </head> |
| <body> |
| <div id="chart"></div> |
| |
| <script> |
| const data = [ |
| { |
| title: "Model builders", |
| items: ["best training method", "non-regression", "risks/costs"], |
| color: "#FFA500" |
| }, |
| { |
| title: "Users", |
| items: ["best model for X", "hype vs trust"], |
| color: "#FFD700" |
| }, |
| { |
| title: "Field", |
| items: ["capabilities", "direction"], |
| color: "#FFA500", |
| hasIcon: true |
| } |
| ]; |
| |
| const width = 800; |
| const height = 300; |
| const boxWidth = 200; |
| const boxHeight = 180; |
| const boxSpacing = 50; |
| |
| const svg = d3.select("#chart") |
| .append("svg") |
| .attr("width", width) |
| .attr("height", height); |
| |
| const boxes = svg.selectAll("g.box") |
| .data(data) |
| .enter() |
| .append("g") |
| .attr("class", "box") |
| .attr("transform", (d, i) => `translate(${i * (boxWidth + boxSpacing) + 50}, 50)`); |
| |
| |
| boxes.append("rect") |
| .attr("width", boxWidth) |
| .attr("height", boxHeight) |
| .attr("rx", 20) |
| .attr("ry", 20) |
| .attr("fill", "white") |
| .attr("stroke", d => d.color) |
| .attr("stroke-width", 3); |
| |
| |
| boxes.append("text") |
| .attr("x", boxWidth / 2) |
| .attr("y", 35) |
| .attr("text-anchor", "middle") |
| .attr("font-size", "16px") |
| .attr("font-weight", "600") |
| .text(d => d.title); |
| |
| |
| boxes.each(function(d) { |
| const box = d3.select(this); |
| |
| d.items.forEach((item, i) => { |
| box.append("text") |
| .attr("x", 20) |
| .attr("y", 70 + i * 25) |
| .attr("font-size", "13px") |
| .attr("fill", "#333") |
| .text(`- ${item}`); |
| }); |
| |
| |
| if (d.hasIcon) { |
| box.append("text") |
| .attr("x", boxWidth - 40) |
| .attr("y", boxHeight - 25) |
| .attr("font-size", "32px") |
| .text("🔄"); |
| } |
| }); |
| </script> |
| </body> |
| </html> |
