Saturday, August 23, 2025

Friday, August 8, 2025

Claude Plots Well

 


Incredibly, Claude was able to notice (I couldn't see it) that WTI was overlapped and hard to see at the bottom by USD index. After query I requested "bigger marker" which it dutifully did. Well done Claude (and also Grok).

Grok + Claude = This Plot





[Generation Method]
I initiated discussion with Grok, followed until Grok thew error in creating JSON graphic, copy/paste JSON into Claude who plotted the graphic, using similar logic/reasoning as Grok (but was able to find a missing semicolon that initially choked it)

[Claude "insights" are less verbose and possibly less useful than Grok]








[JSON]

 import React, { useState } from 'react';

import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';


const BloombergMetricsDashboard = () => {

  const [selectedMetrics, setSelectedMetrics] = useState({

    'S&P 500 Index': true,

    'Global PMI': true,

    'U.S. CPI (%)': true,

    'U.S. Unemployment Rate (%)': true,

    'VIX Index': true,

    'U.S. Dollar Index (DXY)': true,

    'WTI Crude Oil Prices ($)': true,

    'Corporate Bond Yields (%)': true,

    'MSCI World Equity Index': true,

    'Mean 55-Inch OLED TV Price ($)': true

  });


  const data = [

    {

      year: '2020',

      'S&P 500 Index': 3756,

      'Global PMI': 49.0,

      'U.S. CPI (%)': 1.2,

      'U.S. Unemployment Rate (%)': 8.1,

      'VIX Index': 22.8,

      'U.S. Dollar Index (DXY)': 89.9,

      'WTI Crude Oil Prices ($)': 48,

      'Corporate Bond Yields (%)': 7.51,

      'MSCI World Equity Index': 2500,

      'Mean 55-Inch OLED TV Price ($)': 1600

    },

    {

      year: '2021',

      'S&P 500 Index': 4766,

      'Global PMI': 54.0,

      'U.S. CPI (%)': 4.7,

      'U.S. Unemployment Rate (%)': 5.4,

      'VIX Index': 17.2,

      'U.S. Dollar Index (DXY)': 95.9,

      'WTI Crude Oil Prices ($)': 75,

      'Corporate Bond Yields (%)': -1.54,

      'MSCI World Equity Index': 3000,

      'Mean 55-Inch OLED TV Price ($)': 1450

    },

    {

      year: '2022',

      'S&P 500 Index': 4506,

      'Global PMI': 50.0,

      'U.S. CPI (%)': 8.0,

      'U.S. Unemployment Rate (%)': 3.6,

      'VIX Index': 21.0,

      'U.S. Dollar Index (DXY)': 103.2,

      'WTI Crude Oil Prices ($)': 94,

      'Corporate Bond Yields (%)': -13.01,

      'MSCI World Equity Index': 2875,

      'Mean 55-Inch OLED TV Price ($)': 1350

    },

    {

      year: '2023',

      'S&P 500 Index': 4882,

      'Global PMI': 49.5,

      'U.S. CPI (%)': 4.1,

      'U.S. Unemployment Rate (%)': 3.6,

      'VIX Index': 14.0,

      'U.S. Dollar Index (DXY)': 101.3,

      'WTI Crude Oil Prices ($)': 77,

      'Corporate Bond Yields (%)': 5.53,

      'MSCI World Equity Index': 3125,

      'Mean 55-Inch OLED TV Price ($)': 1500

    },

    {

      year: '2024',

      'S&P 500 Index': 5256,

      'Global PMI': 50.0,

      'U.S. CPI (%)': 3.0,

      'U.S. Unemployment Rate (%)': 4.1,

      'VIX Index': 15.0,

      'U.S. Dollar Index (DXY)': 103.0,

      'WTI Crude Oil Prices ($)': 80,

      'Corporate Bond Yields (%)': 1.25,

      'MSCI World Equity Index': 3375,

      'Mean 55-Inch OLED TV Price ($)': 1450

    },

    {

      year: '2025',

      'S&P 500 Index': 5782,

      'Global PMI': 49.7,

      'U.S. CPI (%)': 2.7,

      'U.S. Unemployment Rate (%)': 4.2,

      'VIX Index': 16.0,

      'U.S. Dollar Index (DXY)': 98.7,

      'WTI Crude Oil Prices ($)': 70,

      'Corporate Bond Yields (%)': 3.71,

      'MSCI World Equity Index': 3645,

      'Mean 55-Inch OLED TV Price ($)': 1800

    }

  ];


  const metricColors = {

    'S&P 500 Index': '#1f77b4',

    'Global PMI': '#2ca02c',

    'U.S. CPI (%)': '#d62728',

    'U.S. Unemployment Rate (%)': '#9467bd',

    'VIX Index': '#8c564b',

    'U.S. Dollar Index (DXY)': '#e377c2',

    'WTI Crude Oil Prices ($)': '#7f7f7f',

    'Corporate Bond Yields (%)': '#bcbd22',

    'MSCI World Equity Index': '#17becf',

    'Mean 55-Inch OLED TV Price ($)': '#ff9896'

  };


  const leftAxisMetrics = ['S&P 500 Index', 'U.S. Dollar Index (DXY)', 'WTI Crude Oil Prices ($)', 'MSCI World Equity Index', 'Mean 55-Inch OLED TV Price ($)'];

  const rightAxisMetrics = ['Global PMI', 'U.S. CPI (%)', 'U.S. Unemployment Rate (%)', 'VIX Index', 'Corporate Bond Yields (%)'];


  const toggleMetric = (metric) => {

    setSelectedMetrics(prev => ({

      ...prev,

      [metric]: !prev[metric]

    }));

  };


  const CustomTooltip = ({ active, payload, label }) => {

    if (active && payload && payload.length) {

      return (

        <div className="bg-white p-4 border border-gray-300 rounded shadow-lg">

          <p className="font-semibold text-gray-800">{`Year: ${label}`}</p>

          {payload.map((entry, index) => (

            <p key={index} style={{ color: entry.color }} className="text-sm">

              {`${entry.dataKey}: ${entry.value}`}

            </p>

          ))}

        </div>

      );

    }

    return null;

  };


  return (

    <div className="w-full h-screen bg-gradient-to-br from-slate-50 to-blue-50 p-6">

      <div className="max-w-7xl mx-auto">

        <h1 className="text-3xl font-bold text-gray-800 mb-6 text-center">

          Bloomberg Top 10 Metrics with 55-Inch OLED TV Price Dashboard

        </h1>

        

        <div className="bg-white rounded-lg p-6 mb-6 shadow-lg">

          <h2 className="text-lg font-semibold mb-4 text-gray-700">Select Metrics to Display:</h2>

          

          <div className="grid md:grid-cols-2 gap-6">

            <div>

              <h3 className="text-md font-medium mb-3 text-blue-700">Left Axis (Index Points / $):</h3>

              <div className="grid grid-cols-1 gap-2">

                {leftAxisMetrics.map((metric) => (

                  <label key={metric} className="flex items-center space-x-2 cursor-pointer">

                    <input

                      type="checkbox"

                      checked={selectedMetrics[metric]}

                      onChange={() => toggleMetric(metric)}

                      className="w-4 h-4"

                    />

                    <span

                      className="w-4 h-4 rounded"

                      style={{ backgroundColor: metricColors[metric] }}

                    ></span>

                    <span className="text-sm font-medium text-gray-600">{metric}</span>

                  </label>

                ))}

              </div>

            </div>

            

            <div>

              <h3 className="text-md font-medium mb-3 text-green-700">Right Axis (% / Index Points):</h3>

              <div className="grid grid-cols-1 gap-2">

                {rightAxisMetrics.map((metric) => (

                  <label key={metric} className="flex items-center space-x-2 cursor-pointer">

                    <input

                      type="checkbox"

                      checked={selectedMetrics[metric]}

                      onChange={() => toggleMetric(metric)}

                      className="w-4 h-4"

                    />

                    <span

                      className="w-4 h-4 rounded"

                      style={{ backgroundColor: metricColors[metric] }}

                    ></span>

                    <span className="text-sm font-medium text-gray-600">{metric}</span>

                  </label>

                ))}

              </div>

            </div>

          </div>

        </div>


        <div className="bg-white rounded-lg p-6 shadow-lg">

          <ResponsiveContainer width="100%" height={600}>

            <LineChart data={data} margin={{ top: 20, right: 60, left: 60, bottom: 60 }}>

              <CartesianGrid strokeDasharray="3 3" stroke="#e0e0e0" />

              <XAxis 

                dataKey="year" 

                stroke="#666"

                fontSize={12}

              />

              <YAxis 

                yAxisId="left"

                orientation="left"

                stroke="#1f77b4"

                fontSize={12}

                domain={[0, 6000]}

                label={{ value: 'Index Points / $', angle: -90, position: 'insideLeft' }}

              />

              <YAxis 

                yAxisId="right"

                orientation="right"

                stroke="#2ca02c"

                fontSize={12}

                domain={[-15, 60]}

                label={{ value: '% / Index Points', angle: 90, position: 'insideRight' }}

              />

              <Tooltip content={<CustomTooltip />} />

              <Legend 

                wrapperStyle={{ paddingTop: '20px' }}

                iconType="line"

              />

              

              {leftAxisMetrics.map((metric) => (

                selectedMetrics[metric] && (

                  <Line

                    key={metric}

                    yAxisId="left"

                    type="monotone"

                    dataKey={metric}

                    stroke={metricColors[metric]}

                    strokeWidth={2}

                    dot={{ r: 4, fill: metricColors[metric] }}

                    activeDot={{ r: 6, fill: metricColors[metric] }}

                  />

                )

              ))}

              

              {rightAxisMetrics.map((metric) => (

                selectedMetrics[metric] && (

                  <Line

                    key={metric}

                    yAxisId="right"

                    type="monotone"

                    dataKey={metric}

                    stroke={metricColors[metric]}

                    strokeWidth={2}

                    dot={{ r: 4, fill: metricColors[metric] }}

                    activeDot={{ r: 6, fill: metricColors[metric] }}

                  />

                )

              ))}

            </LineChart>

          </ResponsiveContainer>

        </div>


        <div className="mt-6 bg-white rounded-lg p-6 shadow-lg">

          <h2 className="text-lg font-semibold mb-4 text-gray-700">Key Insights (2020-2025):</h2>

          <div className="grid md:grid-cols-2 gap-4 text-sm text-gray-600">

            <div>

              <h3 className="font-semibold text-gray-800 mb-2">Market Performance:</h3>

              <ul className="space-y-1">

                <li>• S&P 500 shows consistent growth from 3,756 to 5,782</li>

                <li>• MSCI World Index recovered strongly after 2022 dip</li>

                <li>• VIX volatility declined from pandemic highs</li>

              </ul>

            </div>

            <div>

              <h3 className="font-semibold text-gray-800 mb-2">Economic Indicators:</h3>

              <ul className="space-y-1">

                <li>• CPI peaked at 8% in 2022, moderating to 2.7% by 2025</li>

                <li>• Unemployment normalized from pandemic spike</li>

                <li>• Dollar strength peaked in 2022-2024 period</li>

              </ul>

            </div>

            <div>

              <h3 className="font-semibold text-gray-800 mb-2">Commodities & Tech:</h3>

              <ul className="space-y-1">

                <li>• Oil prices volatile, ending lower in 2025 at $70</li>

                <li>• OLED TV prices declined 2020-2022, rising to $1,800 by 2025</li>

                <li>• Corporate bond yields highly volatile with negative periods</li>

              </ul>

            </div>

            <div>

              <h3 className="font-semibold text-gray-800 mb-2">Manufacturing:</h3>

              <ul className="space-y-1">

                <li>• Global PMI hovering around 50 (expansion/contraction line)</li>

                <li>• Manufacturing activity remained relatively stable</li>

              </ul>

            </div>

          </div>

        </div>

      </div>

    </div>

  );

};


export default BloombergMetricsDashboard;