Text

<h2 style="white-space:pre-line">Interactive Visualization</h2>
<p>As a UI/UX product designer, I am continuously exploring new ways to enhance digital experiences through data visualization. Interactive graphs, charts, and diagrams play a crucial role in making complex information accessible, engaging, and insightful for users. </p>
<p>This case study collection highlights my work with HTML and SVG-based visualizations, showcasing their potential in modern product design. Additionally, I focus on data and complex information analysis, along with research, and leverage AI tools to create meaningful visual representations that drive decision-making and user understanding.</p>

Embed

<div id="beverage-viz" style="width: 100%; height: 600px; margin: 20px 0;"></div>


<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>


<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize chart
    const chart = echarts.init(document.getElementById('beverage-viz'), null, {
        renderer: 'svg'
    });

    // Color scheme
    const colors = ['#FFF085', '#FCB454', '#FF9B17', '#F16767'];

    // Data configuration
    const option = {
        backgroundColor: '#ffffff',
        series: [{
            type: 'sunburst',
            data: [{
                name: "Coca-Cola",
                value: 1250,
                itemStyle: { color: colors[1] },
                children: [
                    { name: "Classic", value: 750, itemStyle: { color: colors[0] }},
                    { name: "Diet", value: 300, itemStyle: { color: colors[1] }},
                    { name: "Zero", value: 200, itemStyle: { color: colors[2] }}
                ]
            },{
                name: "Pepsi",
                value: 890,
                itemStyle: { color: colors[2] },
                children: [
                    { name: "Regular", value: 550, itemStyle: { color: colors[1] }},
                    { name: "Max", value: 300, itemStyle: { color: colors[0] }},
                    { name: "Diet", value: 40, itemStyle: { color: colors[3] }}
                ]
            },{
                name: "Red Bull",
                value: 680,
                itemStyle: { color: colors[3] },
                children: [
                    { name: "Original", value: 500, itemStyle: { color: colors[2] }},
                    { name: "Sugarfree", value: 150, itemStyle: { color: colors[1] }},
                    { name: "Zero", value: 30, itemStyle: { color: colors[0] }}
                ]
            },{
                name: "Lucozade",
                value: 420,
                itemStyle: { color: colors[0] },
                children: [
                    { name: "Energy", value: 300, itemStyle: { color: colors[3] }},
                    { name: "Sport", value: 120, itemStyle: { color: colors[2] }}
                ]
            },{
                name: "Irn-Bru",
                value: 380,
                itemStyle: { color: colors[1] },
                children: [
                    { name: "Original", value: 300, itemStyle: { color: colors[3] }},
                    { name: "Sugar Free", value: 80, itemStyle: { color: colors[0] }}
                ]
            }],
            radius: [0, '90%'],
            label: { color: '#333', fontSize: 12 },
            itemStyle: { borderWidth: 1, borderColor: '#fff' },
            emphasis: { itemStyle: { shadowBlur: 10 } }
        }]
    };

    // Apply configuration
    chart.setOption(option);

    // Handle window resize
    window.addEventListener('resize', () => chart.resize());
});
</script>

<!DOCTYPE html>
<html>
<head>
    <title>London Income Trends</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.2/echarts.min.js"></script>
    <style>
        #chart-container {
            width: 100%;
            height: 600px;
            background: #FFFFFF;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div id="chart-container"></div>

    <script>
    // Initialize chart
    const chart = echarts.init(document.getElementById('chart-container'), null, {
        renderer: 'svg'
    });

    // Chart data configuration
    const option = {
        color: ['#3E3F5B', '#8AB2A6', '#ACD3A8'],
        backgroundColor: '#FFFFFF',
        tooltip: {
            trigger: 'axis',
            axisPointer: { type: 'cross' },
            formatter: params => 
                `<strong>${params[0].name}</strong><br>` +
                params.map(item => 
                    `${item.marker} ${item.seriesName}: £${item.value}k`
                ).join('<br>')
        },
        legend: {
            data: ['Employment', 'Investments', 'Other'],
            top: 25,
            textStyle: { color: '#3E3F5B' }
        },
        grid: {
            top: 80,
            left: 50,
            right: 30,
            bottom: 30,
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['2013','2014','2015','2016','2017','2018','2019','2020','2021','2022'],
            axisLine: { lineStyle: { color: '#3E3F5B' } }
        },
        yAxis: {
            type: 'value',
            axisLabel: { 
                formatter: '£{value}k',
                color: '#3E3F5B'
            },
            axisLine: { show: false }
        },
        series: [
            {
                name: 'Employment',
                type: 'line',
                stack: 'Total',
                smooth: true,
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#3E3F5B' },
                        { offset: 1, color: '#3E3F5B22' }
                    ])
                },
                data: [45,47,49,51,54,56,58,55,59,62]
            },
            {
                name: 'Investments',
                type: 'line',
                stack: 'Total',
                smooth: true,
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#8AB2A6' },
                        { offset: 1, color: '#8AB2A622' }
                    ])
                },
                data: [12,13,14,15,16,17,18,16,19,21]
            },
            {
                name: 'Other',
                type: 'line',
                stack: 'Total',
                smooth: true,
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#ACD3A8' },
                        { offset: 1, color: '#ACD3A822' }
                    ])
                },
                data: [8,8.5,9,9.5,10,10.5,11,9.5,11.5,12.5]
            }
        ],
        animationDuration: 1500
    };

    chart.setOption(option);
    window.addEventListener('resize', () => chart.resize());
    </script>
</body>
</html>