| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>D3 Python Visualizer</title> |
| <link rel="stylesheet" href="/static/style.css"> |
| <script src="https://d3js.org/d3.v7.min.js"></script> |
| </head> |
| <body> |
| <h2>🐍 Python Visualizer with D3.js</h2> |
|
|
| <form method="post" action="/run"> |
| <textarea name="code" rows="10" cols="70" placeholder="Enter Python code here...">{{ code or '' }}</textarea><br> |
| <button type="submit">Run Code</button> |
| </form> |
|
|
| {% if output %} |
| <h3>Output:</h3> |
| <pre>{{ output }}</pre> |
| {% endif %} |
|
|
| <div id="viz"></div> |
|
|
| <script> |
| const traceData = {{ trace_json | safe if trace_json else '[]' }}; |
| if (traceData.length > 0) { |
| const width = 700, height = 400; |
| const svg = d3.select("#viz") |
| .append("svg") |
| .attr("width", width) |
| .attr("height", height) |
| .style("background", "#f8f8f8") |
| .style("border-radius", "10px"); |
| |
| let currentStep = 0; |
| |
| const frameGroup = svg.append("g").attr("transform", "translate(50,80)"); |
| |
| function renderStep(step) { |
| frameGroup.selectAll("*").remove(); |
| |
| const stepData = traceData[step]; |
| if (stepData.error) { |
| frameGroup.append("text") |
| .text("Error: " + stepData.error) |
| .attr("fill", "red") |
| .attr("x", 50) |
| .attr("y", 20); |
| return; |
| } |
| |
| frameGroup.append("text") |
| .text("Line: " + stepData.line) |
| .attr("x", 0) |
| .attr("y", -30) |
| .attr("font-weight", "bold"); |
| |
| const vars = Object.entries(stepData.locals); |
| vars.forEach((v, i) => { |
| const [name, val] = v; |
| const boxY = i * 50; |
| frameGroup.append("rect") |
| .attr("x", 0) |
| .attr("y", boxY) |
| .attr("width", 200) |
| .attr("height", 40) |
| .attr("fill", "#fff") |
| .attr("stroke", "#000"); |
| |
| frameGroup.append("text") |
| .text(name + " = " + val) |
| .attr("x", 10) |
| .attr("y", boxY + 25) |
| .attr("font-family", "monospace"); |
| }); |
| } |
| |
| function addButtons() { |
| const controls = d3.select("body").append("div").attr("id", "controls"); |
| controls.append("button").text("◀ Prev").on("click", () => { |
| if (currentStep > 0) { currentStep--; renderStep(currentStep); } |
| }); |
| controls.append("button").text("▶ Next").on("click", () => { |
| if (currentStep < traceData.length - 1) { currentStep++; renderStep(currentStep); } |
| }); |
| controls.append("span") |
| .text(" Step " + (currentStep+1) + " of " + traceData.length) |
| .attr("id", "stepInfo"); |
| } |
| |
| addButtons(); |
| renderStep(0); |
| } |
| </script> |
| </body> |
| </html> |
|
|
|
|
