futarchy.dev + yield.sh

Took a while to write the prompt, based on knowledge of Manifold API. But really pays off!

‣

Full original prompt

Create futarchy.dev: a data visualization website, which displays the prediction market probabilities of various US outcomes, based on the results of the US 2024 election between Harris and Trump.

The site should consist of 11 different cards, each card showing a specific outcome like "Will marijuana be federally rescheduled from Schedule 1 drug?", and a horizontal line chart from 0 to 100%, with a red dot showing the market probability if Trump is elected, blue dot if Harris. Also show the projected difference like "+20% more likely if Harris wins".

The website style should be inspired by visualizations like 538 and Our World in Data, presenting the information in a clean, modern, easy-to-understand manner. No backend or auth is needed.

Here's the full list of the pairs of conditional prediction markets to use:

[
  {
    title: 'Will undocumented immigration at the southern border go down?',
    harrisSlug: 'if-harris-wins-will-undocumented-im',
    trumpSlug: 'if-trump-wins-will-immigration-go-d',
  },
  {
    title: 'Will the president appoint another SCOTUS Justice before 2027?',
    harrisSlug: 'if-harris-wins-will-she-appoint-ano',
    trumpSlug: 'if-trump-wins-will-he-appoint-anoth',
  },
  {
    title: 'Will marijuana be federally rescheduled from Schedule 1 drug?',
    harrisSlug: 'if-harris-wins-will-marijuana-be-fe',
    trumpSlug: 'if-trump-wins-will-marijuana-be-fed',
  },
  {
    title: 'Will there be a ceasefire in Ukraine before the 2026 midterms?',
    harrisSlug: 'if-harris-is-elected-will-there-be-1bw27ghde1',
    trumpSlug: 'if-trump-is-elected-will-there-be-a-40ca39e5dcec',
  },
  {
    title:
      'Will there be an executive order or legislation focused on AI before the 2026 midterms?',
    harrisSlug: 'if-harris-is-elected-will-there-be-uve99bjbbo',
    trumpSlug: 'if-trump-is-elected-will-there-be-a-01a15c4aa239',
  },
  {
    title: 'Will gas prices stay under $4 a gallon before the midterms?',
    harrisSlug: 'if-harris-becomes-president-will-ga-rpkm0uqss8',
    trumpSlug: 'if-trump-becomes-president-will-gas',
  },
  {
    title: 'Will the inflation rate in 2025 be below 2.5%? (Current 3.2%)',
    harrisSlug: 'if-harris-wins-the-election-will-th',
    trumpSlug: 'if-trump-wins-the-election-will-the',
  },
  {
    title:
      'Will the US enter a recession before 2027? (as measured by Sahm rule)',
    harrisSlug: 'if-harris-wins-will-the-us-enter-a',
    trumpSlug: 'if-trump-wins-will-the-us-enter-a-r',
  },
  {
    title: 'Gallup satisfaction poll greater than Obama',
    harrisSlug: 'if-harris-becomes-president-will-sh',
    trumpSlug: 'if-trump-becomes-president-will-he',
  },
  {
    title: 'Will annual US CO2 emissions be below 4.5 billion tons in 2030?',
    harrisSlug: 'carbon-brief-forecast-if-harris-win',
    trumpSlug: 'carbon-brief-forecast-if-trump-wins',
  },
  {
    title: 'Will Donald Trump serve time in 2025?',
    harrisSlug: 'if-donald-trump-loses-the-election',
    trumpSlug: 'if-donald-trump-wins-the-election-w',
  },
]

To get up to date information from each market, use fetch() from the Manifold API. Relevant data like the current `probability`, `uniqueBettorCount`, and `volume` is available via GET on `https://api.manifold.markets/v0/slug/<slug>`, which returns JSON formatted like:

{
  "id": "7bUDWjuwZDThjeNKHZ1C",
  "creatorId": "vuI5upWB8yU00rP7yxj95J2zd952",
  "creatorUsername": "ManifoldPolitics",
  "creatorName": "Manifold Politics",
  "createdTime": 1710029008019,
  "creatorAvatarUrl": "https://firebasestorage.googleapis.com/v0/b/mantic-markets.appspot.com/o/user-images%2FManifoldPolitics%2Ffpkehyxcjv.png?alt=media&token=463863cf-9ddd-46b0-87d6-f89dcf8e5621",
  "closeTime": 1731311940000,
  "question": "If Donald Trump loses the election, will he serve time in 2025?",
  "slug": "if-donald-trump-loses-the-election",
  "url": "https://manifold.markets/ManifoldPolitics/if-donald-trump-loses-the-election",
  "pool": {
    "NO": 1303.92145572973,
    "YES": 925.877344341676
  },
  "probability": 0.443284043371789,
  "p": 0.361182797568747,
  "totalLiquidity": 1170,
  "outcomeType": "BINARY",
  "mechanism": "cpmm-1",
  "volume": 29121.7472574816,
  "volume24Hours": 1210,
  "isResolved": false,
  "uniqueBettorCount": 249,
  "lastUpdatedTime": 1729856275987,
  "lastBetTime": 1729856275987,
  "lastCommentTime": 1724160193970,
  "marketTier": "plus",
  "token": "MANA",
  "description": {...},
    "groupSlugs": [
    "us-politics",
    "politics-default",
    "manifold-6748e065087e",
    "2024-us-presidential-election",
    "conditional-on-bidentrump"
  ],
  "textDescription": "What counts:\n\nPrison, jail or house arrest pre-conviction does not, must be serving a sentence.\n\nPrison, jail or house arrest post-conviction counts.\n\nCommunity service, probation, and other non-custodial sentences do not count.\n\nIt does not count if he is pardoned or otherwise granted clemency before his imprisonment.\n\nRelated:\n\n(https://manifold.markets/embed/ManifoldPolitics/if-donald-trump-wins-the-election-w)"
}

(You may want to do all fetches in Promise.all() to reduce loading time.)

Was already familiar with Manifold API and response, had to provide that context
Knew roughly how yield could use this (fetch, promise.all)
Knew where to look in Manifold codebase to

yield.sh actually worked better than Claude:

could fetch
didn’t use recharts which was fine
didn’t use shadcn, which also was fine (though! turns out shadcn is available at https://esm.sh/shadcdn )

Then, I asked Claude to suggest different visualization approaches — this was really good

In context window of above, I prompted

Suggest 4 different prompts for yourself, exploring different possible ways to represent the same data to viewers
<prompt>
The site should consist of 11 different cards, each card showing a specific outcome like "Will marijuana be federally rescheduled from Schedule 1 drug?", and a horizontal line chart from 0 to 100%, with a red dot showing the market probability if Trump is elected, blue dot if Harris. Also show the projected difference like "+20% more likely if Harris wins".
</prompt>`

‣

Claude response

I'll suggest 4 different visualization approaches for this prediction market data:

1. **Butterfly Chart Approach**
```
Create a horizontal butterfly/tornado chart visualization where each outcome is a row. The center line is 0% difference, with bars extending left (red) for Trump advantages and right (blue) for Harris advantages. Each bar shows the absolute probability (e.g., 75%) at the end, and the comparative difference (e.g., +20%) is shown in the bar itself. Add a hoverable tooltip that shows the full market details.
```

2. **Grid of Mini Gauge Charts**
```
Design a grid layout where each prediction is shown as a semicircular gauge chart. The gauge spans from 0-100%, with both Trump (red) and Harris (blue) probabilities shown as needle positions. The difference between them is displayed prominently in the center of each gauge. Arrange these in a 4-3-4 grid pattern with a minimal, clean design inspired by Bloomberg terminals.
```

3. **Connected Timeline View**
```
Create an interactive timeline visualization where each prediction is shown as a pair of connected dots (red for Trump, blue for Harris) with a line between them showing the spread. Stack these vertically, grouped by category (economy, policy, legal, etc.). Allow users to reorder by: absolute probability, difference magnitude, or alphabetically. The time axis should show key events (debates, primaries, election) that might impact these probabilities.
```

4. **Comparative Dot Matrix**
```
Build a dot matrix visualization where each prediction is represented by a 10x10 grid of tiny circles (100 total). Fill in the appropriate number of circles in blue for Harris's probability and red for Trump's probability, with empty circles for the remainder. Position these grids in a flowing layout, sorted by the magnitude of difference between candidates. Add a small bar below each grid showing the numerical difference.

This creates an immediate visual impact of the probability differences while maintaining mathematical precision - each dot represents exactly 1% probability. The grid format makes it easy to quickly estimate probabilities (e.g., 7 rows filled = ~70%) while the overall pattern reveals broader trends in which candidate is favored across different scenarios.
```

Each of these approaches emphasizes different aspects of the data:
- Butterfly chart emphasizes the differences between candidates
- Gauge charts provide an intuitive sense of probability magnitude
- Timeline view adds temporal context and grouping
- Dot matrix provides a concrete visualization of probability (each dot = 1%)

Would you like me to implement any of these alternative visualizations? Or would you prefer to explore other visualization patterns that might work well for this data?

There are small errors with each of the visualizations, but really good for inspiration

things to improve in yield.sh

~~Support multiline pastes or complex prompts~~

~~Collapse long prompts in chat window~~

Have Claude help user make a good prompt? Like interactive prompt forming, or asking y/n questions on how things should look

“What do you want your app to do?”
“Where do you want to get the data?”
“What aesthetic do you want? Modern design? 2000s chaotic myspace? black-and-green hacker terminal?”

Make it much easier to generate & preview 4 different versions

Should be able to do this all in one shot, no extra copying+pasting required

futarchy.dev + yield.sh

things to improve in yield.sh

Example visualizations