| | <!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> |
| |
|
| |
|
