| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| <title>Azure Databricks Compute Flip Rows</title> |
| <style> |
| body { |
| margin: 0; |
| font-family: Arial, sans-serif; |
| background: #f5f7fb; |
| padding: 24px; |
| color: #0f172a; |
| } |
| |
| h1 { |
| text-align: center; |
| margin-bottom: 24px; |
| } |
| |
| .stack { |
| max-width: 1050px; |
| margin: auto; |
| display: flex; |
| flex-direction: column; |
| gap: 12px; |
| } |
| |
| .row-card { |
| height: 118px; |
| perspective: 1200px; |
| cursor: pointer; |
| } |
| |
| .row-inner { |
| position: relative; |
| width: 100%; |
| height: 100%; |
| transition: transform 0.7s ease; |
| transform-style: preserve-3d; |
| } |
| |
| .row-card.flipped .row-inner { |
| transform: rotateX(180deg); |
| } |
| |
| .face { |
| position: absolute; |
| inset: 0; |
| border: 1.5px solid #334155; |
| border-radius: 8px; |
| background: #f8fafc; |
| backface-visibility: hidden; |
| display: grid; |
| grid-template-columns: 58px 1fr; |
| overflow: hidden; |
| box-shadow: 0 5px 14px rgba(15, 23, 42, 0.1); |
| } |
| |
| .back { |
| transform: rotateX(180deg); |
| background: #0f172a; |
| color: white; |
| } |
| |
| .number { |
| color: white; |
| font-size: 34px; |
| font-weight: bold; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
| |
| .blue { background: #1479c9; } |
| .orange { background: #f04b23; } |
| .magenta { background: #c02aaa; } |
| .sky { background: #65b8dc; } |
| .coral { background: #ff8c72; } |
| |
| .content { |
| padding: 14px 22px; |
| display: flex; |
| align-items: center; |
| gap: 18px; |
| flex-wrap: wrap; |
| } |
| |
| .title { |
| font-size: 26px; |
| font-weight: 800; |
| min-width: 210px; |
| line-height: 1.05; |
| } |
| |
| .pill { |
| border: 1px solid #64748b; |
| border-radius: 6px; |
| padding: 8px 16px; |
| background: white; |
| font-weight: 700; |
| font-size: 15px; |
| } |
| |
| .section { |
| border: 1px solid #94a3b8; |
| border-radius: 7px; |
| padding: 10px 16px; |
| background: #f8fafc; |
| min-width: 200px; |
| } |
| |
| .section h3 { |
| margin: 0 0 8px; |
| font-size: 19px; |
| color: #d63324; |
| } |
| |
| .section.purple h3 { |
| color: #b2178c; |
| } |
| |
| .back .content { |
| display: block; |
| } |
| |
| .back h2 { |
| margin: 0 0 8px; |
| font-size: 24px; |
| } |
| |
| .back p { |
| margin: 0; |
| font-size: 17px; |
| line-height: 1.45; |
| } |
| |
| .hint { |
| text-align: center; |
| margin-top: 16px; |
| color: #475569; |
| } |
| </style> |
| </head> |
| <body> |
| <h1>Azure Databricks Compute Options</h1> |
|
|
| <div class="stack"> |
| <div class="row-card" onclick="this.classList.toggle('flipped')"> |
| <div class="row-inner"> |
| <div class="face front"> |
| <div class="number blue">1</div> |
| <div class="content"> |
| <div class="title">SERVERLESS COMPUTE</div> |
| <div class="pill">2–6 sec startup</div> |
| <div class="pill">Fully managed</div> |
| <div class="pill">Scale to zero</div> |
| <div class="pill">Performance-optimized</div> |
| </div> |
| </div> |
| <div class="face back"> |
| <div class="number blue">1</div> |
| <div class="content"> |
| <h2>Serverless Compute</h2> |
| <p>Fully managed, on-demand Databricks compute that starts quickly, automatically scales with workload demand, and removes most cluster management tasks from the user.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="row-card" onclick="this.classList.toggle('flipped')"> |
| <div class="row-inner"> |
| <div class="face front"> |
| <div class="number orange">2</div> |
| <div class="content"> |
| <div class="title">CLASSIC COMPUTE</div> |
| <div class="section"><h3>STANDARD</h3><span class="pill">Multi-user</span> <span class="pill">Python / SQL / Scala</span></div> |
| <div class="section"><h3>DEDICATED</h3><span class="pill">Single user or group</span> <span class="pill">RDD / R / GPU</span></div> |
| <div class="pill">3–7 min startup</div> |
| </div> |
| </div> |
| <div class="face back"> |
| <div class="number orange">2</div> |
| <div class="content"> |
| <h2>Classic Compute</h2> |
| <p>User-provisioned compute that runs in your Azure subscription. Use it when you need custom networking, special libraries, GPUs, R workloads, or more direct control over cluster configuration.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="row-card" onclick="this.classList.toggle('flipped')"> |
| <div class="row-inner"> |
| <div class="face front"> |
| <div class="number magenta">3</div> |
| <div class="content"> |
| <div class="title">SQL<br>WAREHOUSES</div> |
| <div class="section purple"><h3>SERVERLESS</h3><span class="pill">2–6 sec</span> <span class="pill">Photon + Predictive IO + IWM</span></div> |
| <div class="section purple"><h3>PRO</h3><span class="pill">~4 min</span> <span class="pill">Photon + Predictive IO</span></div> |
| <div class="section purple"><h3>CLASSIC</h3><span class="pill">~4 min</span> <span class="pill">Photon only</span></div> |
| </div> |
| </div> |
| <div class="face back"> |
| <div class="number magenta">3</div> |
| <div class="content"> |
| <h2>SQL Warehouses</h2> |
| <p>Compute resources optimized for SQL analytics, dashboards, and BI tools. Serverless is fastest and most automated; Pro and Classic provide alternatives when serverless is unavailable or custom networking is required.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="row-card" onclick="this.classList.toggle('flipped')"> |
| <div class="row-inner"> |
| <div class="face front"> |
| <div class="number sky">4</div> |
| <div class="content"> |
| <div class="title">INSTANCE POOLS</div> |
| <div class="pill"><1 min startup</div> |
| <div class="pill">Pre-warmed VMs</div> |
| <div class="pill">Pay for idle capacity</div> |
| </div> |
| </div> |
| <div class="face back"> |
| <div class="number sky">4</div> |
| <div class="content"> |
| <h2>Instance Pools</h2> |
| <p>Reusable groups of pre-warmed virtual machines that reduce cluster startup time. They improve responsiveness, but you pay for idle capacity while VMs wait in the pool.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="row-card" onclick="this.classList.toggle('flipped')"> |
| <div class="row-inner"> |
| <div class="face front"> |
| <div class="number coral">5</div> |
| <div class="content"> |
| <div class="title">JOB COMPUTE</div> |
| <div class="section"><h3>SERVERLESS JOBS</h3><span class="pill">2–6 sec</span> <span class="pill">Auto-terminated</span></div> |
| <div class="section"><h3>CLASSIC JOBS</h3><span class="pill">3–7 min</span> <span class="pill">Spot instances</span></div> |
| </div> |
| </div> |
| <div class="face back"> |
| <div class="number coral">5</div> |
| <div class="content"> |
| <h2>Job Compute</h2> |
| <p>Compute created specifically to run automated workflows and tasks. It is preferred for production jobs because it can start for a run, execute the workload, and terminate afterward to control cost.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <p class="hint">Click any row to flip it and see the definition.</p> |
| </body> |
| </html> |
|
|
