← Back Home

Graph HTML Scraper — Visualizer

How do you scrape Craigslist, Kijiji, or eBay without writing XPath selectors? Parse the HTML into a graph, then find the container whose children have the most homogeneous, substantial metadata — that's your listing grid.

Step 1

HTML → Graph

The page's DOM is parsed into a directed graph. Every element becomes a node with serialized metadata. Color shows its fate in the algorithm.

Step 2

DOM as a Graph

Every element is a node; edges connect parent → child. Color shows each node's fate: green = winner, blue = candidate, red = filtered out, gray = skipped. Node size reflects metadata length.

Step 3

Candidate Analysis — Children Metadata Lengths

Each row is a candidate node that survived filtering. Each dot is one of its children, plotted at its metadata char length. The shaded band is ±1 std dev around the mean. The listing container stands out: many dots, tightly clustered, at a high value.

● dot = one child element ━ vertical tick = mean (μ) ▬ shaded band = ±1 std dev (σ) ╌ dashed line = min–max range
Step 4

Scoring Breakdown

Each of 7 criteria awards 1 point to the best candidate. The node with the most points wins. ★ marks the winner of each criterion.

Step 5

Extracted Listings

The winner node's children are the listing cards. Their text fields contain the actual product data — pulled out without writing a single XPath or CSS selector.