Making a consumer interface that visualizes a real-world construction \u2014 just like the Thirty Meter Telescope’s mirror \u2014 would possibly look like a process that calls for deep information of geometry, D3.js, and SVG graphics. However with a Massive Language Mannequin (LLM) like Claude or ChatGPT, you needn’t know all the pieces upfront.<\/p>\n

This text paperwork a journey in constructing a posh, interactive UI with no prior expertise in D3.js or UI growth usually.
\n The work was achieved as a part of constructing a prototype for an operational consumer interface for the telescope’s major mirror, designed to point out real-time standing of mirror segments.
\n It highlights how LLMs allow you to \u201cget on with it\u201d, supplying you with a working prototype
\n even while you’re unfamiliar with the underlying tech.
\n Extra importantly, it reveals how iterative prompting \u2014 refining your requests step-by-step \u2014
\n leads not solely to the suitable code but additionally to a clearer understanding
\n of what you are attempting to construct.\n <\/p>\n

The Purpose<\/h2>\n
We wished to create an HTML-based visualization of the Thirty Meter Telescope’s major mirror, composed of 492 hexagonal segments organized symmetrically in a round sample.<\/p>\n
We started with a high-level immediate that described the construction, however quickly realized that to succeed in my objective, I might must information the AI step-by-step.<\/p>\n<\/section>\n
\n
Step 1: The Preliminary Immediate<\/h2>\n
\n
\u201cI need to create an HTML view of the Thirty Meter Telescope’s honeycomb mirror.
\n Attempt to generate an HTML and CSS primarily based UI for this mirror, which consists of 492 hexagonal segments organized in a round sample.
\n General construction is of a honeycomb. The construction needs to be symmetric.
\n For instance the variety of hexagons within the first row needs to be similar within the final row.
\n The variety of hexagons within the second row needs to be similar because the one within the second final row, and many others.\u201d<\/p>\n<\/div>\n
Claude gave it a shot \u2014 however the consequence wasn’t what I had in thoughts. The format was blocky and never fairly symmetric. That is after I determined to take a step-by-step strategy.<\/p>\n
$\"Initial$ <\/p>\n<\/div>\n<\/section>\n
\n
Step 2: Drawing One Hexagon<\/h2>\n
\n
\u201cThis isn’t what I need… Let’s do it step-by-step.\u201d<\/p>\n
\u201cLet’s draw one hexagon with flat edge vertical. The hexagon ought to have all sides of similar size.\u201d<\/p>\n
\u201cLet’s use d3.js and draw svg.\u201d<\/p>\n
\u201cLet’s draw just one hexagon with d3.\u201d<\/p>\n<\/div>\n
Claude generated clear D3 code to attract a single hexagon with the right orientation and geometry. It labored \u2014 and gave me confidence within the constructing blocks.<\/p>\n
Lesson: Begin small. Affirm the muse works earlier than scaling complexity.<\/p>\n
$\"Single$ <\/p>\n<\/div>\n<\/section>\n
\n
Step 3: Including a Second Hexagon<\/h2>\n
\n
\u201cGood… Now let’s add yet one more hexagon subsequent to this one. It ought to share vertical edge with the primary hexagon.\u201d<\/p>\n<\/div>\n
Claude adjusted the coordinates, putting the second hexagon adjoining to the primary by aligning their vertical edges. The format logic was starting to emerge.<\/p>\n
$\"Two$ <\/p>\n<\/div>\n<\/section>\n
\n
Step 4: Creating the Second Row<\/h2>\n
\n
\u201cNow let’s add yet one more row.<\/p>\n
The hexagons within the second row share vertical edges with one another much like the primary row.<\/p>\n
The highest slanting edges of the hexagons within the second row needs to be shared with the underside slanting edges of the hexagons within the first row.<\/p>\n
The variety of hexagons within the second row needs to be such that the primary row seems centrally positioned with the second row.\u201d<\/p>\n<\/div>\n
Preliminary makes an attempt did not correctly align the slanting edges.<\/p>\n
\n \u201cOops… this doesn’t share the slanting edges with the earlier row.\u201d\n <\/p>\n
$\"Two$ <\/p>\n<\/div>\n
However ultimately, after clarifying spacing and offset logic, Claude obtained it proper.<\/p>\n
$\"Two$ <\/p>\n<\/div>\n
Lesson: Geometry-based layouts typically require a number of iterations with cautious visible inspection.<\/p>\n<\/section>\n
\n
Step 5: Increasing right into a Symmetric Construction<\/h2>\n
\n \u201cNow we have to create greater construction with extra hexagons organized in additional rows such that:
\n The general construction seems round like honeycomb.
\n The variety of hexagons within the rows goes on growing after which goes on reducing to type a superbly symmetric construction.
\n The overall variety of hexagons must be 492 to match the TMT telescope.
\n We will have an empty hexagon (displaying empty house) precisely on the heart of the circle.\u201d\n <\/p>\n
Claude used a ring-based format strategy to simulate round symmetry. However at first:<\/p>\n
\n \u201cThis isn’t round however seems to be extra like a hexagonal general view…\u201d\n <\/p>\n
Then I advised:<\/p>\n
\u201cAttempt with solely 6 hexagons within the first and final row.\u201d<\/p>\n
This transformation improved symmetry and helped obtain a visually round format. The variety of hexagons per row elevated after which decreased \u2014 precisely as desired.<\/p>\n<\/section>\n
\n
Step 6: Tuning the Central Opening<\/h2>\n
\n \u201cThat is higher however we want a smaller opening on the heart.The black house on the heart is simply too large. It needs to be at most 1 or just a few hexagons.\u201d\n <\/p>\n
By decreasing the empty house and rebalancing the internal rings, we lastly obtained a well-packed, round construction with a small central hole \u2014 matching the TMT design.<\/p>\n
Lesson: Use domain-specific constraints (like whole depend = 492) as guideposts for format parameters.<\/p>\n<\/section>\n
\n
Step 7: Including Numbering and Tooltips<\/h2>\n
\n \u201cWe need to have a quantity on every hexagonal section. They need to be numbered sequentially. The primary within the first row needs to be 1 and the final within the final row needs to be 492. Once we present the hexagonal section info on mouseover, we must always present the quantity as effectively.\u201d\n <\/p>\n
Claude initially assigned numbers primarily based on ring index, not row order.<\/p>\n
\u201cYou’re producing numbers primarily based on place within the ring… However the numbering needs to be row-based. So we must always one way or the other map the rings to the row. For instance, Ring 13 section quantity 483 is in row 1 and needs to be numbered 1, and many others. Are you able to counsel a solution to map segments from rings to rows this fashion?\u201d<\/p>\n
As soon as this mapping was carried out, all the pieces fell into place:<\/p>\n
\n
A round format of 492 numbered segments<\/li>\n
A small central hole<\/li>\n
Tooltips displaying section metadata<\/li>\n
Visible symmetry from outer to internal rings<\/li>\n<\/ul>\n
$\"Final$ <\/p>\n<\/div>\n<\/section>\n
\n
Reflections<\/h2>\n
This expertise taught me a number of key classes:<\/p>\n
\n
LLMs allow you to get on with it<\/b>: Even with zero information of D3.js or SVG geometry, I may begin constructing instantly. The AI scaffolded the coding, and I discovered by the method.<\/li>\n
Prompting is iterative<\/b>: My first immediate wasn’t incorrect \u2014 it simply wasn’t particular sufficient. By reviewing the output at every step, clarified what I actually wished and refined my asks accordingly.<\/li>\n
LLMs unlock studying by constructing<\/b>: In the long run, I did not simply get a working UI. I obtained an comprehensible codebase and a hands-on entry level into a brand new know-how. Constructing first and studying from it.<\/li>\n<\/ol>\n<\/section>\n
\n
Conclusion<\/h2>\n
What began as a imprecise design thought was a functioning, symmetric, interactive visualization of the Thirty Meter Telescope’s mirror \u2014 constructed collaboratively with an LLM.<\/p>\n
This expertise reaffirmed that prompt-driven growth is not nearly producing code \u2014 it is about pondering by design, clarifying intent, and constructing your means into understanding.<\/p>\n
In case you’ve ever wished to discover a brand new know-how, construct a UI, or sort out a domain-specific visualization \u2014 do not wait to be taught all of it first.<\/p>\n
Begin constructing with an LLM. You may be taught alongside the way in which.<\/p>\n<\/section>\n
\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"
Making a consumer interface that visualizes a real-world construction \u2014 just like the Thirty Meter Telescope’s mirror \u2014 would possibly look like a process that calls for deep information of geometry, D3.js, and SVG graphics. However with a Massive Language Mannequin (LLM) like Claude or ChatGPT, you needn’t know all the pieces upfront. This text […]<\/p>\n","protected":false},"author":2,"featured_media":2084,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[56],"tags":[475,2055,74,2053,77,2052,2054],"class_list":["post-2082","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software","tag-building","tag-journey","tag-llm","tag-mirror","tag-stepbystep","tag-tmt","tag-visualization"],"_links":{"self":[{"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=\/wp\/v2\/posts\/2082","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2082"}],"version-history":[{"count":1,"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=\/wp\/v2\/posts\/2082\/revisions"}],"predecessor-version":[{"id":2083,"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=\/wp\/v2\/posts\/2082\/revisions\/2083"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=\/wp\/v2\/media\/2084"}],"wp:attachment":[{"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2082"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2082"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2082"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}