Build 3 Codex
Dashboards From
Your Customer Data

Build me a self-contained HTML dashboard from the uploaded orders CSV. Dashboard title: "Where My Customers Actually Live" GOAL Create a premium, Apple-like 2D interactive map of U.S. customer shipping locations. Use my CSV only. Do not include or expose any exact order counts by city in the final browser file. FILE STRUCTURE Save everything to: Desktop/Codex Dashboards/ Where My Customers Actually Live.html (final dashboard) build_us_orders_map.py (reusable Python builder script) .assets/ us-states.json (U.S. state outlines GeoJSON) census-place-gazetteer.zip (Census places with city/state coordinates) geonames-us-postal.zip (ZIP code coordinate fallback) geonames-cities500.zip (city coordinate fallback) Use a Python builder script to parse the CSV, normalize data, and write the final HTML. Download the reference asset files from public sources. Do NOT send my CSV to any external geocoding API. DATA REQUIREMENTS - Auto-detect the shipping city, state, ZIP/postal code, and country columns from the CSV headers. - Support common Shopify-style headers such as: - shipping_city / Shipping City - shipping_state / Shipping Province - shipping_zip / Shipping Zip - shipping_country / Shipping Country - Skip rows silently if the city is blank. - This is U.S.-only. Ignore customers outside the United States. - If country is present, only include rows where the country means United States, USA, US, or similar. - If state is present as either abbreviation or full state name, normalize it to a two-letter U.S. state code. - Geocode city/state/ZIP to latitude and longitude using the local reference files. Not a paid API. - If multiple orders map to the same city/state location, aggregate them into one city dot. DATA PIPELINE (in order) 1. Read the uploaded CSV. 2. Detect likely city, state, ZIP, and country columns. 3. Normalize city names: trim whitespace, collapse repeated spaces, compare case-insensitively. 4. Normalize states: accept "CA" and "California", convert to two-letter code. 5. Filter to U.S. rows only. 6. Skip blank city rows silently. 7. Match each city/state/ZIP to lat/lon using the reference asset files. 8. Aggregate rows by city + state + approximate coordinate. 9. Sort cities internally by order count. 10. Create public city payload fields only: { "id": 0, "rank": 1, "city": "Example City", "state": "TX", "stateName": "Texas", "lat": 0, "lon": 0, "source": "Reference Source", "x": 0, "y": 0, "weight": 0.91 } "weight" is allowed because it is normalized (0 to 1) and does not reveal exact order counts. Do NOT include fields named count, orders, orderCount, totalOrders, mappedOrders, or similar in the final public payload. PRIVACY REQUIREMENTS - Internally, you may count orders per city so the dot sizes and rankings can be calculated. - Do not expose exact per-city order counts in the generated HTML payload. - Do not show exact order counts in tooltips. - Do not show exact order counts in the Top 10 list. - Do not show a total order count at the top. - The only visible numeric business metric is the number of unique U.S. cities. - Tooltips show only city and state, for example: "Example City, ST". - The Top 10 list shows only rank, city, and state name. Before finishing, search the final HTML for any sensitive count fields. The final HTML must NOT contain any of these strings outside of code logic: count, orders, orderCount, totalOrders, mappedOrders, "Number of orders". It is okay if the private builder script contains internal variables. The public HTML should not expose them. MAP PROJECTION - Use an Albers-style projection for the mainland U.S. - Use separate inset transforms for Alaska and Hawaii. - Alaska and Hawaii must be shown as tasteful insets to the LEFT of the mainland U.S., not in their real geographic positions. They should be scaled down and positioned cleanly. Geographic accuracy of these two is not required. - Project every city into canvas coordinates. - Build the map bounds from the display coordinates, not raw longitude/latitude. Layout: [Alaska / Hawaii insets, LEFT] [Mainland United States, RIGHT] CANVAS RENDERING - Render using one canvas element. - Draw order (back to front): 1. Dark map card background 2. U.S. landmass polygons 3. State outlines 4. City glows 5. City dots 6. Hover/selected rings - Use a 2D canvas renderer instead of thousands of DOM/SVG markers. - Cap device pixel ratio to avoid overheating high-resolution displays. - Draw only the visible dots when panned or zoomed. - Do NOT run continuous animation loops. Use requestAnimationFrame only when drawing is needed (on interact, resize, hover, or select). SUGGESTED COLORS Outside U.S.: #000000 or #030407 U.S. land: rgba(248, 251, 255, 0.9) State outlines: rgba(98, 117, 137, 0.34) Top 10 dots: rgba(232, 35, 28, 0.96) Non-Top 10 dots: warm heat palette from blue to yellow/orange based on normalized city weight VISUAL DESIGN Apple-made aesthetic: clean, premium, calm. - Soft frosted-glass page background. - Keep the title on one line on desktop: "Where My Customers Actually Live". - Place a small glass stat card at the top right showing ONLY the number of cities. - Put the map inside a large rounded card. - The map is 2D canvas (not 3D). - The card background outside the U.S. is solid black or very near black. - The U.S. landmass looks refined and bright against the black field. - State outlines should be subtle. - Soft glow around prominent dots, but performance-lightweight. - No explanatory text or credits inside the map card. - Below the map card, add a permanent "Top 10 Cities" section. - Top 10 styling: polished glass/pill rows, red circular rank badges, no order counts. - Responsive layout for desktop and screen recording. PAGE STRUCTURE (use this exact HTML structure) <main class="dashboard"> <section class="topbar"> <h1>Where My Customers Actually Live</h1> <div class="counter" aria-label="City totals"> <div class="stat"> <strong id="totalCities">0</strong> <span>Number of cities</span> </div> </div> </section> <section class="map-card" aria-label="Interactive customer city map"> <canvas id="mapCanvas" aria-label="Interactive 2D map of US customer city locations"></canvas> </section> <section id="panel" class="panel" aria-live="polite"> <div class="panel-header"> <div class="panel-title">Top 10 Cities</div> </div> <div id="topCities" class="city-list"></div> </section> </main> <div id="tooltip" class="tooltip" role="status"></div> CSS DIRECTION (use as a base) body { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, Segoe UI, sans-serif; color: #10131a; background: linear-gradient(125deg, #eef3f8 0%, #f8f8f1 44%, #e2efea 100%); } .dashboard { width: min(1280px, calc(100vw - 32px)); min-height: 100vh; margin: 0 auto; } h1 { white-space: nowrap; letter-spacing: 0; } .map-card { position: relative; height: clamp(460px, 62vh, 680px); overflow: hidden; border-radius: 30px; background: linear-gradient(145deg, #030407 0%, #101318 48%, #030407 100%); } #mapCanvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; } .panel { margin-top: 14px; border-radius: 28px; padding: 20px; backdrop-filter: blur(28px) saturate(1.35); } .city-row { display: grid; grid-template-columns: 34px 1fr; align-items: center; min-height: 52px; border-radius: 24px; } .rank { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(145deg, #ff6b61, #d91518); } INTERACTIVITY Event handlers: - pointerdown: begin panning. - pointermove: pan if dragging, otherwise detect nearest city for hover. - pointerup: select city if pointer did not move much. - pointerleave: clear hover state. - wheel: zoom in/out around the pointer position. - resize: resize canvas and redraw. Hit testing from drawn city points: hitPoints.push({ city, x: projectedX, y: projectedY, r: clickableRadius }); Tooltip content shows only: City, ST When a city is selected and it is in the Top 10 list, highlight that Top 10 row. Clicking a Top 10 row should select that city on the map. OUTPUT - Save the finished file as: Desktop/Codex Dashboards/Where My Customers Actually Live.html - Also save the reusable build script in the same folder. - The final HTML must be self-contained and open directly in a browser. - Do not include the raw CSV in the HTML. - Do not include exact city order counts in the HTML. VISUAL QA CHECKLIST (verify before considering done) - The headline is one line on desktop. - The map is 2D, not 3D. - The U.S. fills the map card well. - The outside area is black. - Alaska and Hawaii sit to the LEFT of the mainland. - Top 10 city dots are red. - Tooltips show city/state only. - The Top 10 list shows city/state only. - No order counts visible anywhere. - Panning and zooming are smooth. - The laptop does not spin up heavily while idle.

I am uploading a CSV that shows how many orders my customers placed during each hour of the day. Build me a single self-contained HTML dashboard I can open in my browser. CSV FORMAT My CSV has these columns: - hour_0_23 - order_count The hour column uses 24-hour time: 0 = 12 AM 1 = 1 AM 12 = 12 PM 23 = 11 PM 24 rows total, one per hour from 0 through 23. PRIVACY RULES Use order_count only internally. Do not show raw order counts anywhere in the dashboard. The viewer should see the pattern, not the underlying numbers. VISIBLE in the final dashboard: - Best buying hour - Top three ranked hours (gold, silver, bronze) - Hour labels (e.g., "10 AM") - Rank numbers (e.g., "#1") - Signal labels (Peak / Top-tier / Very high / High / Moderate / Quiet) - Daypart labels (Overnight / Morning / Afternoon / Evening / Late evening) - Heatmap color intensity - Quiet / Middle / Peak legend HIDDEN in the final dashboard: - Raw order counts - Sales totals - Revenue - Conversion rates - Percentages - Customer data DASHBOARD LOGIC (run in order) 1. Parse the CSV. 2. Validate that each row has a usable hour and order count. 3. Skip invalid rows silently. 4. Create one entry for each hour from 0 to 23. 5. Rank populated hours by order_count, highest first. 6. Assign each hour a rank. 7. Find the top three hours. 8. Use the highest hour for the headline. 9. Use the internal order count only to calculate color intensity. 10. Render the heatmap with hour and rank only. 11. Render top three as podium cards. 12. Render tooltip and side panel with rank/signal language only. HEADLINE Show the best hour in a large headline that says: "My Customers Buy Most at [hour]" [hour] is the top-ranked hour formatted in 12-hour time with AM/PM (e.g., "10 AM"). PODIUM CARDS At the top, show the top three hours as podium/medal cards: - First place: gold - Second place: silver - Third place: bronze Each top-three card shows ONLY the placement and the hour. No order count, no percentage. HEATMAP Create an interactive heatmap showing all 24 hours. Each heatmap cell shows: - Hour (e.g., "10 AM") - Rank number (e.g., "#1") Example cell: 10 AM #1 Do NOT show order totals, percentages, revenue, sales numbers, or conversion rates anywhere in a cell. Color the heatmap cells based on relative buying intensity: - Quiet (lowest intensity color) - Middle - Peak (highest intensity color) Add a legend with: Quiet | Middle | Peak. TOOLTIP (on hover) When hovering over a cell, show a tooltip with: - Hour - Rank - Signal strength - Daypart Example tooltip: 10 AM Rank: #1 Signal: Peak signal Daypart: Morning Do NOT show raw order count in tooltip. SIDE PANEL (on click) When clicking a cell, open a side panel showing: - Hour - Rank - Signal - Map position - Daypart - Adjacent hours (one hour before, the clicked hour, one hour after) with each rank Example panel: 10 AM Rank: #1 Signal: Peak signal Map position: Top tier Daypart: Morning Adjacent hours: 9 AM #3 10 AM #1 11 AM #2 Do NOT show raw order count in side panel. SIGNAL LABEL LOGIC Rank #1: Peak signal Ranks #2 to #3: Top-tier signal Ranks #4 to #6: Very high signal Ranks #7 to #12: High signal Ranks #13 to #18: Moderate signal Ranks #19 to #24: Quiet signal DAYPART LOGIC 12 AM to 4 AM: Overnight 5 AM to 11 AM: Morning 12 PM to 4 PM: Afternoon 5 PM to 8 PM: Evening 9 PM to 11 PM: Late evening VISUAL DIRECTION Aesthetic: premium product dashboard designed by Apple or Tesla. Use: - Dark background - Animated smoke or liquid background - Light text - Frosted glass panels - Soft borders - Smooth hover effects - Clean grid layout - Elegant spacing - Minimal copy - High contrast - Gold, silver, and bronze top-three placement cards Avoid: - Bright white dashboard backgrounds - Heavy marketing copy - Raw tables - Overly colorful rainbow palettes - Displaying raw sales numbers - Cluttered labels BACKGROUND SHADER Add an animated smoke background using a WebGL canvas behind the dashboard. The canvas should: - Fill the entire viewport. - Sit behind all dashboard content. - Use a dark smoky visual. - Be subtle enough that text stays readable. - Respect prefers-reduced-motion (no animation if user prefers reduced motion). Recommended smoke tint: #6a6388 OUTPUT Make the file fully self-contained with HTML, CSS, and JavaScript in one file. No external CDN dependencies. No npm or React requirements. Save it as: Email Send-Time Heatmap.html FINAL QUALITY CHECKLIST (verify before considering done) - The file opens in a browser. - The headline shows the strongest hour. - Top three hours are shown as gold, silver, and bronze placements. - The heatmap shows ranks, not raw counts. - No sales/order totals are visible anywhere. - Hover tooltips work. - Click side panel works. - The legend is visible. - Text is readable against the dark background. - The layout works on desktop. - The layout works on mobile. - There are no console errors.

I am giving you a CSV of customer reviews for my brand. CSV path: [PASTE_FULL_LOCAL_PATH_TO_CSV_HERE] Build me a single self-contained HTML dashboard I can open in my browser. Use only this CSV. Do not use sample data, old data, or another brand's data. GOAL Create a premium interactive customer-language word map for marketing strategy. This is not a generic word cloud. It surfaces the most useful descriptive product language customers use in reviews. WHAT THIS BUILDS A single self-contained HTML file with three parts: 1. A full first-screen interactive word map. 2. A click-to-open review proof panel for any word. 3. A concise marketing-angle section underneath the map. No top filters, no visible review counters, no legend, no table, and no explanatory clutter above the word map. REQUIRED INPUT Read only the provided CSV. Minimum required column: - A review text column. Likely names: review, review_text, body, comment, content, text. Optional useful columns: - rating - stars - score - date - product Do not use any data from any previous file, sample file, old export, or another brand. PRIVACY RULES - Do not hard-code any review text from another brand. - Do not hard-code any real customer snippets from another source. - Do not hard-code any counts from another dashboard. - Generate all words, counts, snippets, and marketing conclusions from this CSV only. DATA PROCESSING Process every row with a non-empty review text value. Normalize review text by: - Lowercasing everything. - Normalizing unicode to plain ASCII where possible. - Removing punctuation. - Collapsing extra whitespace. - Removing words under 3 characters. - Removing common stopwords (list below). STOPWORDS (baseline list to strip): the and is it this was my i you we for on of to a with in but so just really very have had are am be been that they them their there then than or an as at by from if not no do does did get got can will would could should its im ive youre our your he she his her him me us all out up down into over after before about because were dont doesnt isnt arent wasnt didnt cant wont wouldnt couldnt shouldnt MARKETING FILTERING Do not simply show the most common words. Apply a second marketing-quality filter. KEEP words and short phrases that describe: - Customer feeling or outcome - Product experience - Fit or usability - Material or texture - Quality or durability - Performance - Appearance or style - Versatility or use cases - Repeat purchase or recommendation intent REMOVE words that are mostly: - Shipping terms - Customer service terms - Transaction words - Time words - Generic sentence structure words - Product names if they dominate the map without adding insight - Words that are common but not useful for positioning The goal is a marketing-language map, not a generic word cloud. TERM AND PHRASE EXTRACTION 1. Tokenize cleaned review text. 2. Count individual marketing-relevant words. 3. Extract common 2-word and 3-word phrases after stopword cleanup. 4. Keep only phrases that are product-descriptive or marketing-useful. 5. Avoid duplicate concepts where one term fully cannibalizes another. 6. Use negation checks for sensitive terms. Phrases like "not [TERM]" do NOT count as positive proof. Check for nearby "not", "no", or "never". Test each phrase: would this help write better product positioning, ad copy, PDP copy, email copy, or creative hooks? If no, drop it. WORD MAP SELECTION - Generate a ranked candidate list of 30 to 40 terms. - Let the layout place as many as fit without overlap. - The visible map will usually show roughly 20 to 35 terms depending on viewport size. Hero word: - The highest-frequency marketing-relevant descriptor or phrase. - Not necessarily the highest-frequency raw word. - Not hard-coded. VISUAL TIERS Five tiers, biggest to smallest: 1. Hero term: massive, centered, strongest weight. 2. Tier 1: large support terms. 3. Tier 2: medium support terms. 4. Tier 3: small supporting terms. 5. Tier 4: smallest proof terms. The result should feel like a word map with hierarchy, not a list. VISUAL DESIGN Aesthetic: Apple, WHOOP, or Oura. Premium, dark, calm, technical, high-end. Use: - Dark almost-black background. - Monochrome ivory and silver typography. - Clean bold system sans-serif. Do NOT use: - Colorful rainbow word cloud styling. - Cards around the main map. - Legends. - Explanatory text above the map. - Top filter buttons. CSS COLOR VARIABLES (use these exact values): --bg: #000000; --ink: #f5f5f7; --hero: #f8f8f3; --text-rgb: 226, 229, 235; --muted: rgba(245,245,247,0.58); --line: rgba(255,255,255,0.12); BACKGROUND Use a self-contained animated mesh-gradient background inspired by the Paper / 21st.dev shader aesthetic. CRITICAL: - The final HTML must work without installing React, Vite, or npm packages. - Implement the background as a vanilla WebGL canvas or an equivalent self-contained canvas effect. - The background should have visible movement, but stay subtle and premium. - Use black, deep gray, mid gray, and white as the mesh colors. - Add a dark overlay so text remains readable. Background behavior: - Fixed full-screen canvas. - Slow organic motion. - Soft high-contrast gray and white movement. - No colorful gradient blobs. - No decorative orbs. WORD MOTION Words should feel like they are floating over the background. Two levels of motion: 1. A tiny internal float on each word label. 2. A subtle whole-word drift around its placed coordinate. Keep motion slow and restrained. Requirements: - Words must not visibly overlap. - Hovering a word slightly scales it up and brightens it. - Selected words remain visually emphasized. - Respect prefers-reduced-motion (disable motion if user prefers reduced motion). LAYOUT The first viewport must be the word map. Do NOT include above the map: - A headline - A subtitle - A stats pill - A filter bar - Review counts - Legends - Instructions The word map should: - Fill the first screen. - Center the hero term. - Place supporting terms around it. - Use absolute positioning or canvas placement with collision detection. - Avoid overlap. - Recalculate on resize. REVIEW PROOF PANEL When a user clicks a word, open a right-side glass panel. Panel content: - Small label: "Review proof" - Selected word as title. - Mention count and number of reviews where it appears, based on this CSV. - Three real review snippets from this CSV where that word appears. - The selected word or phrase highlighted inside each snippet. Panel behavior: - Opens when a word is clicked. - Includes a clean circular close button in the top right. - Closes when the close button is clicked. - Closes when Escape is pressed. - Clears the selected word state when closed. Panel styling: - Dark translucent glass. - Thin white border. - Blur / saturation backdrop. - Rounded corners around 8px. - Premium, compact typography. Do not include snippets from any other dashboard or brand. MARKETING SECTION Under the word map, include one clean strategy section. Headline must say exactly: Here's your marketing angle. Headline requirements: - Centered. - One line. - Large, clean, premium typography. - No line break. Below the headline: - One concise paragraph explaining what the review language suggests from a marketing standpoint. - One stronger copy line that could be used as a positioning direction. Both must be generated from this CSV's top marketing terms. Do not reuse copy from another brand. OUTPUT Create one self-contained HTML file named: Customer Review Word Map.html The final HTML must contain: - Embedded CSS. - Embedded JavaScript. - Embedded processed term data from this CSV. - No external CDN dependencies. - No external package imports. - No private source data except snippets from this CSV. QA CHECKLIST (verify before considering done) - The correct CSV was used. - The file contains no data from previous dashboards. - No top filters exist. - No visible stats counter appears above the map. - The first viewport is only the word map. - The word hierarchy has a clear hero term and multiple smaller tiers. - Words do not overlap. - Hover scale works. - Clicking a word opens the proof panel. - The proof panel shows exactly three snippets when available. - Highlighting works inside snippets. - The close button closes the panel. - Escape closes the panel. - The marketing headline says exactly "Here's your marketing angle." - The marketing headline is centered and stays on one line. - The marketing section is below the map. - There are no browser console errors.