▸case-01 We need to render an interactive 3D topography terrain mesh in a web application, featuring depth buffering, orbit camera controls, and directional lighting. Recommend the appropriate JavaScript library for this task and outline the initial setup. | pass→pass | 18,852 | 13,229 | -30% | 1 | 1 | 0% | 3,709 | 9,236 | +149% | 0 | 0 | — |
▸case-07 We are laying out a Cartesian scatter plot inside an 800x400 SVG canvas. The axis ticks and labels on the left and top borders are getting clipped by the canvas boundary. Show how to structure the main SVG group container using margin dimensions in JavaScript. | pass→pass | 11,082 | 11,057 | -0% | 1 | 1 | 0% | 2,150 | 9,026 | +320% | 0 | 0 | — |
▸case-02 We are building a web-based biochemistry viewer to display 3D protein structures with rotatable volumetric spheres and ribbon meshes. Which JavaScript library should we select for rendering these 3D geometries? | fail→pass | 15,467 | 7,634 | -51% | 1 | 1 | 0% | 2,509 | 8,067 | +222% | 0 | 0 | — |
▸case-03 Our team needs to build a 3D scatter plot of spatial lidar point clouds where users can navigate along X, Y, and Z spatial axes in real-time WebGL canvas. Recommend the visual rendering library for this spatial task. | pass→pass | 15,728 | 10,052 | -36% | 1 | 1 | 0% | 2,527 | 8,637 | +242% | 0 | 0 | — |
▸case-04 We are building a simple SVG bar chart inside a React component. The team prefers React to manage the DOM declaratively and render `<rect>` elements via state rather than letting an external imperative library mutate DOM elements directly. How should we combine layout math with React rendering? Provide a code example showing scale generation and JSX output. | pass→pass | 12,933 | 15,070 | +17% | 1 | 1 | 0% | 2,545 | 9,793 | +285% | 0 | 0 | — |
▸case-05 Our SVG chart redraw function `updateChart(data)` appends chart groups whenever state updates, but during rapid filter changes, old visual elements stack up on top of new ones. Write the imperative update routine in JavaScript that prevents duplicate visual element accumulation. | fail→fail | 13,447 | 15,952 | +19% | 1 | 1 | 0% | 2,387 | 9,922 | +316% | 0 | 0 | — |
▸case-06 I am configuring a continuous linear scale for the vertical axis of an SVG line chart where container height is `innerHeight`. When data values increase, the plotted points appear near the bottom edge instead of the top. Write the scale initialization code snippet in JavaScript to fix the vertical visual orientation. | pass→pass | 5,643 | 4,071 | -28% | 1 | 1 | 0% | 1,025 | 7,586 | +640% | 0 | 0 | — |
▸case-08 We have an array of directional network flows between server nodes: `[{ source: 'web', target: 'db', value: 50 }]`. We need to render a circular diagram showing relationships using filled ribbons between circular arcs. Write the layout setup in JavaScript using standard math generators for chords and ribbons. | fail→fail | 36,411 | 12,914 | -65% | 1 | 1 | 0% | 5,172 | 9,452 | +83% | 0 | 0 | — |
▸case-09 We are generating a 2D matrix heat map representing matrix cell density values ranging from 0 to peak traffic. We need a continuous color scale that smoothly transitions from warm yellow to dark red based on numeric values. Show how to configure this scale in JavaScript. | fail→pass | 14,661 | 12,838 | -12% | 1 | 1 | 0% | 2,934 | 9,269 | +216% | 0 | 0 | — |
▸case-10 We are creating a network visualizer for graph nodes and edges. The nodes overlap into a tangled ball at the center. Show how to set up physics forces in JavaScript for multi-body repulsion, link constraints with unique IDs, and center attraction. | pass→pass | 17,166 | 14,126 | -18% | 1 | 1 | 0% | 3,243 | 9,417 | +190% | 0 | 0 | — |
▸case-11 In our physics graph, when a user drags a node, the rest of the network freezes immediately instead of fluidly adjusting positions while dragging. Write the drag event handler functions (`dragstarted`, `dragged`, `dragended`) in JavaScript to keep physics active while dragging. | pass→pass | 9,517 | 10,023 | +5% | 1 | 1 | 0% | 1,762 | 8,538 | +385% | 0 | 0 | — |
▸case-12 When hovering over scatter plot dots, our floating HTML tooltip div flickers uncontrollably and hides the hover target because the tooltip div pops up directly under the mouse cursor. How should the tooltip element CSS and positioning be configured in JavaScript setup code? | pass→pass | 12,464 | 11,528 | -8% | 1 | 1 | 0% | 2,313 | 8,993 | +289% | 0 | 0 | — |
▸case-13 We want users to pan and zoom smooth continuous vector graphics within an SVG chart container. How do we attach zoom behaviors to the SVG container while transforming the inner graphic group element `g` in JavaScript? | pass→pass | 15,927 | 10,714 | -33% | 1 | 1 | 0% | 3,284 | 8,836 | +169% | 0 | 0 | — |
▸case-14 We have an array of bar chart rectangles updating their height on state change. Instead of jumping instantly, we want the bars to animate upwards sequentially one after another with a 50ms stagger per bar. Write the selection transition snippet in JavaScript. | pass→pass | 9,238 | 5,063 | -45% | 1 | 1 | 0% | 1,632 | 7,754 | +375% | 0 | 0 | — |
▸case-15 We are generating discrete x-axis positions for a categorical bar chart across 12 product categories. We need equal width for each bar and uniform spacing gaps between adjacent bars across the inner width `innerWidth`. Show how to set up this scale in JavaScript. | pass→pass | 13,732 | 5,765 | -58% | 1 | 1 | 0% | 2,524 | 7,837 | +210% | 0 | 0 | — |
▸case-16 We need to render a donut or pie chart from an array of slice objects `[{ category: 'A', value: 30 }]`. Show how to configure slice angle layout computing and path string arc generation in JavaScript. | fail→pass | 18,834 | 12,524 | -34% | 1 | 1 | 0% | 3,805 | 9,217 | +142% | 0 | 0 | — |
▸case-17 Our chart component is embedded inside a flexible dashboard grid container that can be resized independently of the browser window. How do we automatically detect container resize events and adjust SVG canvas attributes in JavaScript? | pass→pass | 13,310 | 16,558 | +24% | 1 | 1 | 0% | 2,404 | 9,893 | +312% | 0 | 0 | — |
▸case-18 We are rendering time-series metric data with an SVG path generator. The plotted line shows abrupt sharp turns between data points. Write the path line generator configuration snippet in JavaScript to produce a smooth, monotonic curve across horizontal x-coordinates. | pass→pass | 5,820 | 5,370 | -8% | 1 | 1 | 0% | 950 | 7,679 | +708% | 0 | 0 | — |
▸case-19 We are rendering an interactive scatter plot with 50,000 data points. Appending 50,000 `<circle>` DOM elements into SVG causes severe browser lagging and high memory usage. What rendering approach and DOM strategy should be adopted for high element counts? | pass→pass | 17,806 | 17,601 | -1% | 1 | 1 | 0% | 2,890 | 10,240 | +254% | 0 | 0 | — |
▸case-20 We need to make an interactive SVG bar chart accessible to screen readers and assistive technology standards. Which SVG attributes and child tags should be added in JavaScript to provide a semantic summary? | pass→pass | 16,386 | 13,878 | -15% | 1 | 1 | 0% | 2,879 | 9,294 | +223% | 0 | 0 | — |
▸case-21 We are visualizing financial delta metrics ranging from -100 (loss) through 0 (neutral) to +100 (profit). We need a continuous color scale with three domain control points mapping to a diverging red-to-blue color scheme. Show how to initialize this scale in JavaScript. | fail→pass | 12,883 | 10,853 | -16% | 1 | 1 | 0% | 2,465 | 8,856 | +259% | 0 | 0 | — |
▸case-22 Our incoming JSON dataset contains date strings formatted as `'2024-01-15'`. When we pass these strings directly into a scale, coordinate calculation fails with `NaN`. Show how to parse date strings during data preparation and configure the corresponding axis scale in JavaScript. | pass→pass | 12,524 | 13,031 | +4% | 1 | 1 | 0% | 2,320 | 9,514 | +310% | 0 | 0 | — |
▸case-23 We want to style the axis ticks on a chart so that grid lines extend lightly across the chart area using subtle dashed lines instead of solid black lines. Show how to format the axis tick line elements in JavaScript. | pass→pass | 12,258 | 10,751 | -12% | 1 | 1 | 0% | 2,282 | 8,741 | +283% | 0 | 0 | — |
▸case-24 We have flat link records: `[{ source: 'A', target: 'B', value: 10 }]`. Chord layouts require a 2D square matrix of numbers. Show how to construct the unique node list and populate the 2D numeric square matrix in JavaScript. | pass→pass | 11,413 | 8,404 | -26% | 1 | 1 | 0% | 2,275 | 8,326 | +266% | 0 | 0 | — |
▸case-25 We have configured linear scales `xScale` and `yScale` for an SVG chart. Instead of manually looping over values to build SVG line and text elements, how do we generate bottom and left axes using axis generators in JavaScript? | pass→pass | 12,026 | 8,051 | -33% | 1 | 1 | 0% | 2,136 | 8,334 | +290% | 0 | 0 | — |