{"id":2689,"date":"2026-01-10T07:28:41","date_gmt":"2026-01-10T15:28:41","guid":{"rendered":"https:\/\/stereodaily.com\/?page_id=2689"},"modified":"2026-01-10T07:38:36","modified_gmt":"2026-01-10T15:38:36","slug":"music-genre-tree-explorer","status":"publish","type":"page","link":"https:\/\/stereodaily.com\/uk\/music-genre-tree-explorer\/","title":{"rendered":"Music Genre Tree Explorer"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2689\" class=\"elementor elementor-2689\">\n\t\t\t\t<div class=\"elementor-element elementor-element-df60ffe e-flex e-con-boxed e-con e-parent\" data-id=\"df60ffe\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-13d9221 elementor-widget elementor-widget-html\" data-id=\"13d9221\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- \r\n    ##########################################################################\r\n    \u2605 WIDGET: MUSIC GENRE TREE EXPLORER (V3.2 - PERSISTENT SPATIAL) \u2605\r\n    TYPE: HTML (Optimized for Mobile, Tablet, PC)\r\n    DESIGN: BOLD EDITORIAL \/ BRUTALIST\r\n    ##########################################################################\r\n-->\r\n\r\n<!-- Tailwind & Fonts -->\r\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;600;700;900&family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,900&family=Archivo+Narrow:wght@400;700&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n    :root {\r\n        --sd-black: #000000;\r\n        --sd-gray-light: #f9f9f9;\r\n        --sd-border: #000000;\r\n    }\r\n\r\n    .sd-widget { \r\n        font-family: 'Inter', sans-serif; \r\n        background-color: #fff; \r\n        color: #000; \r\n        text-rendering: optimizeLegibility;\r\n        -webkit-font-smoothing: antialiased;\r\n    }\r\n    \r\n    .font-masthead { font-family: 'Playfair Display', serif; }\r\n    .font-body { font-family: 'Inter', sans-serif; }\r\n    .font-narrow { font-family: 'Archivo Narrow', sans-serif; }\r\n\r\n    .node {\r\n        cursor: pointer;\r\n        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);\r\n    }\r\n    .node:hover circle {\r\n        fill: #000;\r\n        r: 12;\r\n    }\r\n    .node:hover text {\r\n        fill: #000;\r\n        font-weight: 900;\r\n    }\r\n    \r\n    .node.active circle {\r\n        fill: #000;\r\n        r: 10;\r\n    }\r\n\r\n    .link {\r\n        stroke: #e5e7eb;\r\n        stroke-width: 2;\r\n        fill: none;\r\n        transition: all 0.5s ease;\r\n        stroke-dasharray: 1000;\r\n        stroke-dashoffset: 0;\r\n    }\r\n    \r\n    .link.active {\r\n        stroke: #000;\r\n        stroke-width: 3;\r\n    }\r\n\r\n    .metric-bar {\r\n        transition: width 1s cubic-bezier(0.16, 1, 0.3, 1);\r\n    }\r\n\r\n    .fade-in {\r\n        animation: fadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;\r\n    }\r\n\r\n    @keyframes fadeIn {\r\n        from { opacity: 0; transform: translateY(15px); }\r\n        to { opacity: 1; transform: translateY(0); }\r\n    }\r\n\r\n    .spatial-bg {\r\n        background-image: radial-gradient(#e5e7eb 1px, transparent 1px);\r\n        background-size: 40px 40px;\r\n    }\r\n\r\n    .breadcrumb-item {\r\n        transition: opacity 0.2s ease;\r\n    }\r\n\r\n    #graph-container {\r\n        cursor: grab;\r\n        user-select: none;\r\n    }\r\n    #graph-container:active {\r\n        cursor: grabbing;\r\n    }\r\n\r\n    svg {\r\n        overflow: visible;\r\n        width: 100%;\r\n        height: 100%;\r\n    }\r\n<\/style>\r\n\r\n<div class=\"sd-widget max-w-[1280px] mx-auto border-x border-gray-200 min-h-screen flex flex-col\">\r\n    \r\n    <!-- Header Section -->\r\n    <div class=\"px-6 py-12 md:py-16 border-b-4 border-black text-center relative bg-white\">\r\n        <div class=\"font-body text-xs font-bold uppercase tracking-[0.4em] text-gray-400 mb-4\">The <a href=\"https:\/\/stereodaily.com\/uk\/what-is-stereo-daily-inside-the-modern-music-journalism-platform\/\">Stereo Daily<\/a> Intelligence<\/div>\r\n        <h1 class=\"font-masthead text-5xl sm:text-6xl md:text-7xl font-black tracking-tighter text-black mb-6 leading-[0.9]\">\r\n            Genre Logic.\r\n        <\/h1>\r\n        <div class=\"max-w-2xl mx-auto border-t border-black pt-6\">\r\n            <div class=\"font-body text-base text-gray-600 leading-relaxed italic px-4\">\r\n                Spatial taxonomy of sound. Navigate the lineage tree by clicking nodes to expand branches. Clicking an active node will minimize its branch.\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Navigation Breadcrumbs -->\r\n    <div class=\"border-b border-gray-200 bg-gray-50 px-6 py-4 flex items-center gap-2 overflow-x-auto whitespace-nowrap z-20\">\r\n        <div id=\"breadcrumbs\" class=\"flex items-center gap-2 font-narrow text-[10px] font-black uppercase tracking-widest text-gray-400\">\r\n            <!-- Breadcrumbs injected here -->\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"grid grid-cols-1 lg:grid-cols-12 gap-0 border-b border-gray-200 flex-grow\">\r\n        \r\n        <!-- Left: Intelligence Sidebar -->\r\n        <div class=\"lg:col-span-4 border-r border-gray-200 p-6 md:p-10 bg-white z-10\">\r\n            <div class=\"sticky top-10\">\r\n                <div id=\"lineage-container\" class=\"fade-in\">\r\n                    <div class=\"mb-10\">\r\n                        <label class=\"font-narrow text-xs font-black uppercase tracking-widest text-gray-400 block mb-3\">Active Classification<\/label>\r\n                        <h2 id=\"current-genre-name\" class=\"font-masthead text-5xl font-black italic tracking-tighter uppercase leading-[0.85] mb-6\">Root<\/h2>\r\n                        <p id=\"genre-description\" class=\"font-body text-sm md:text-base leading-relaxed text-gray-600 mb-8\">\r\n                            The industrial foundation of modern musical classification.\r\n                        <\/p>\r\n                    <\/div>\r\n\r\n                    <!-- Metrics Graph -->\r\n                    <div class=\"mb-10 border-t border-gray-100 pt-8\">\r\n                        <label class=\"font-narrow text-xs font-black uppercase tracking-widest text-gray-400 block mb-6\">Sonic Profile Graph<\/label>\r\n                        <div class=\"space-y-6\">\r\n                            <div>\r\n                                <div class=\"flex justify-between text-[10px] font-black uppercase mb-2\">\r\n                                    <span>Commercial Weight<\/span>\r\n                                    <span id=\"val-weight\">100%<\/span>\r\n                                <\/div>\r\n                                <div class=\"h-2 bg-gray-100 w-full\">\r\n                                    <div id=\"bar-weight\" class=\"metric-bar h-full bg-black\" style=\"width: 100%\"><\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n                            <div>\r\n                                <div class=\"flex justify-between text-[10px] font-black uppercase mb-2\">\r\n                                    <span>Energy \/ Intensity<\/span>\r\n                                    <span id=\"val-energy\">50%<\/span>\r\n                                <\/div>\r\n                                <div class=\"h-2 bg-gray-100 w-full\">\r\n                                    <div id=\"bar-energy\" class=\"metric-bar h-full bg-black\" style=\"width: 50%\"><\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n                            <div>\r\n                                <div class=\"flex justify-between text-[10px] font-black uppercase mb-2\">\r\n                                    <span>Harmonic Complexity<\/span>\r\n                                    <span id=\"val-harmonic\">50%<\/span>\r\n                                <\/div>\r\n                                <div class=\"h-2 bg-gray-100 w-full\">\r\n                                    <div id=\"bar-harmonic\" class=\"metric-bar h-full bg-black\" style=\"width: 50%\"><\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"bg-black text-white p-6 border-l-8 border-gray-500\">\r\n                        <h3 class=\"font-masthead text-xl font-black italic mb-2 tracking-tighter\">Analysis.<\/h3>\r\n                        <p id=\"analysis-text\" class=\"text-[10px] font-body leading-relaxed uppercase font-bold tracking-tight opacity-80\">\r\n                            Aggregate of all global music market capitalization.\r\n                        <\/p>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Right: Spatial Lineage Map -->\r\n        <div class=\"lg:col-span-8 bg-gray-50 flex flex-col min-h-[500px] lg:min-h-[700px] spatial-bg overflow-hidden relative\">\r\n            <div class=\"p-6 flex justify-between items-center border-b border-gray-200 bg-white bg-opacity-80 backdrop-blur-sm z-10\">\r\n                <div class=\"text-[10px] font-bold uppercase tracking-[0.3em] text-gray-400\">Spatial Lineage Engine<\/div>\r\n                <div class=\"flex items-center gap-4\">\r\n                    <button id=\"reset-view-btn\" class=\"text-[9px] font-black uppercase tracking-widest text-black border-2 border-black px-3 py-1 hover:bg-black hover:text-white transition-all\">Re-Center<\/button>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"flex-grow relative\" id=\"graph-container\">\r\n                <svg id=\"lineage-map\" class=\"absolute inset-0\">\r\n                    <g id=\"viewport-group\">\r\n                        <g id=\"links-group\"><\/g>\r\n                        <g id=\"nodes-group\"><\/g>\r\n                    <\/g>\r\n                <\/svg>\r\n            <\/div>\r\n\r\n            <div class=\"bg-white border-t-4 border-black p-6 z-10\">\r\n                <div class=\"text-[10px] font-black uppercase tracking-widest mb-1 opacity-30 text-black\">Engine Status<\/div>\r\n                <div id=\"status-display\" class=\"font-masthead text-xl font-black italic tracking-tighter uppercase leading-none\">\r\n                    Map Initialized\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- START WIDGET 5.3 footer -->\r\n    <div id=\"mc_embed_signup\" class=\"bg-[#fdfdfd] w-full mt-auto\">\r\n        <div class=\"p-6\">\r\n            <div class=\"border-[6px] border-black p-8 bg-white\">\r\n                <div class=\"flex flex-col md:flex-row items-center justify-between gap-6\">\r\n                    <div class=\"text-center md:text-left\">\r\n                        <h4 class=\"text-4xl font-masthead font-black italic tracking-tighter\">Stereo Daily.<\/h4>\r\n                        <p class=\"text-[10px] uppercase tracking-[0.2em] font-bold text-black font-narrow\"><a href=\"https:\/\/stereodaily.com\/uk\/music-finance-stocks\/\">Music News<\/a> & Industry Whispers<\/p>\r\n                    <\/div>\r\n                    <div class=\"flex-grow w-full max-xl\">\r\n                        <form action=\"#\" class=\"flex border-2 border-black\">\r\n                            <input type=\"email\" placeholder=\"Enter Your Email\" class=\"flex-grow p-3 text-[10px] font-bold uppercase tracking-widest outline-none\">\r\n                            <button class=\"bg-black text-white px-8 py-3 text-[10px] font-black uppercase tracking-widest\">JOIN<\/button>\r\n                        <\/form>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<script>\r\n    const genreData = {\r\n        'root': { name: 'Root', description: 'Foundation of modern classification.', analysis: 'Aggregate of all global music market capitalization.', metrics: { weight: 100, energy: 50, harmonic: 50 }, children: ['hiphop', 'electronic', 'rock', 'jazz', 'pop'] },\r\n        'hiphop': { name: 'Hip Hop', description: 'Rhythmic storytelling and community origins.', analysis: '30% of global streaming; primary driver of youth culture.', metrics: { weight: 95, energy: 85, harmonic: 30 }, children: ['trap', 'boombap', 'phonk', 'drill', 'grime', 'conscious-rap'] },\r\n        'trap': { name: 'Trap', description: 'Double-time hi-hats and heavy 808 sub-bass.', analysis: 'Standard sonic template for 21st-century charts.', metrics: { weight: 90, energy: 75, harmonic: 25 }, children: ['drill', 'latin-trap'] },\r\n        'phonk': { name: 'Phonk', description: '90s Memphis inspired distortion and cowbells.', analysis: 'Algorithm-driven phenomenon bridging Eastern Europe and US.', metrics: { weight: 60, energy: 95, harmonic: 20 }, children: ['drift-phonk', 'brazilian-phonk'] },\r\n        'electronic': { name: 'Electronic', description: 'Digital synthesis and club infrastructure.', analysis: 'Multi-billion dollar festival economy.', metrics: { weight: 85, energy: 90, harmonic: 45 }, children: ['house', 'techno', 'ambient', 'hyperpop', 'dubstep', 'trance', 'dnb'] },\r\n        'house': { name: 'House', description: 'Repetitive 4\/4 beats and soulful vocal loops.', analysis: 'The blueprint for modern dance music.', metrics: { weight: 80, energy: 70, harmonic: 55 }, children: ['deep-house', 'tech-house', 'acid-house'] },\r\n        'hyperpop': { name: 'Hyperpop', description: 'Maximalist, glitchy, neon-soaked production.', analysis: 'Digital-first genre defining Gen Z sub-communities.', metrics: { weight: 45, energy: 98, harmonic: 60 }, children: [] },\r\n        'rock': { name: 'Rock', description: 'Electric guitars and raw, distorted energy.', analysis: 'Highest live touring equity in the industry.', metrics: { weight: 75, energy: 95, harmonic: 65 }, children: ['punk', 'metal', 'shoegaze', 'grunge', 'psychedelic-rock'] },\r\n        'shoegaze': { name: 'Shoegaze', description: 'Walls of feedback and obscured vocals.', analysis: 'Viral aesthetic resurgence on social media.', metrics: { weight: 35, energy: 60, harmonic: 85 }, children: [] },\r\n        'jazz': { name: 'Jazz', description: 'Improvisation and sophisticated harmonic structures.', analysis: 'The technical apex of music theory.', metrics: { weight: 40, energy: 50, harmonic: 98 }, children: ['fusion', 'bebop', 'bossa-nova', 'cool-jazz'] },\r\n        'pop': { name: 'Pop', description: 'High-fidelity accessibility and universal narratives.', analysis: 'The ultimate commercial brand vehicle.', metrics: { weight: 100, energy: 75, harmonic: 50 }, children: ['kpop', 'synthpop', 'bedroom-pop', 'indie-pop'] },\r\n        'drill': { name: 'Drill', description: 'Dark, sliding basslines and hyper-local lyricism.', analysis: 'Global scale via social media visuals.', metrics: { weight: 75, energy: 92, harmonic: 15 }, children: [] },\r\n        'latin-trap': { name: 'Latin Trap', description: 'Fusion of trap beats and reggaeton melodies.', analysis: 'Fastest growing global market since 2020.', metrics: { weight: 85, energy: 88, harmonic: 40 }, children: [] },\r\n        'drift-phonk': { name: 'Drift Phonk', description: 'Aggressive phonk paired with car culture.', analysis: 'TikTok-first viral algorithm play.', metrics: { weight: 50, energy: 100, harmonic: 10 }, children: [] },\r\n        'brazilian-phonk': { name: 'Brazilian Phonk', description: 'Memphis Phonk meets Funk Carioca.', analysis: 'Cross-continental high-energy hybrid.', metrics: { weight: 55, energy: 97, harmonic: 15 }, children: [] },\r\n        'boombap': { name: 'Boom Bap', description: 'Golden Era sampled jazz and soul loops.', analysis: 'The gold standard for technical lyricism.', metrics: { weight: 65, energy: 70, harmonic: 45 }, children: [] },\r\n        'techno': { name: 'Techno', description: 'Industrial, machine-like repetition.', analysis: 'Pure rhythmic efficiency for club endurance.', metrics: { weight: 70, energy: 92, harmonic: 35 }, children: [] },\r\n        'ambient': { name: 'Ambient', description: 'Sonic atmospheres over melodic structure.', analysis: 'Functional music category for relaxation.', metrics: { weight: 30, energy: 10, harmonic: 90 }, children: [] },\r\n        'punk': { name: 'Punk', description: 'High-speed, raw DIY anti-establishment sound.', analysis: 'Cultural driver of indie label infrastructure.', metrics: { weight: 45, energy: 99, harmonic: 15 }, children: [] },\r\n        'metal': { name: 'Metal', description: 'Technical distortion and extreme power.', analysis: 'Most loyal fanbase retention in the market.', metrics: { weight: 60, energy: 100, harmonic: 70 }, children: [] },\r\n        'kpop': { name: 'K-Pop', description: 'Global hybrid of pop, hiphop, and R&B.', analysis: 'Masterclass in idol economy and merchandise.', metrics: { weight: 100, energy: 95, harmonic: 55 }, children: [] },\r\n        'deep-house': { name: 'Deep House', description: 'Atmospheric and soulful electronic textures.', analysis: 'High streaming retention in lounge environments.', metrics: { weight: 60, energy: 40, harmonic: 75 }, children: [] },\r\n        'tech-house': { name: 'Tech House', description: 'Fusion of techno grit with house grooves.', analysis: 'Dominant sound in global festival circuits.', metrics: { weight: 85, energy: 80, harmonic: 40 }, children: [] },\r\n        'fusion': { name: 'Jazz Fusion', description: 'Jazz improvisation meets rock and funk.', analysis: 'Technical peak of instrumental versatility.', metrics: { weight: 30, energy: 70, harmonic: 95 }, children: [] },\r\n        'bebop': { name: 'Bebop', description: 'Fast tempos and virtuosic improvisation.', analysis: 'Historical shift to jazz as high intellectual art.', metrics: { weight: 20, energy: 85, harmonic: 100 }, children: [] },\r\n        'synthpop': { name: 'Synthpop', description: 'Pop driven by electronic synthesizers.', analysis: 'Foundation of 80s nostalgia and modern indie.', metrics: { weight: 90, energy: 65, harmonic: 70 }, children: [] },\r\n        'grime': { name: 'Grime', description: 'High-tempo UK urban sound with electronic roots.', analysis: 'A pivotal development in the London underground scene.', metrics: { weight: 65, energy: 95, harmonic: 25 }, children: [] },\r\n        'conscious-rap': { name: 'Conscious Rap', description: 'Lyrical hiphop focused on social and political awareness.', analysis: 'Critical for cultural narratives and artistic depth.', metrics: { weight: 40, energy: 60, harmonic: 50 }, children: [] },\r\n        'dubstep': { name: 'Dubstep', description: 'Heavy sub-bass and syncopated drum patterns.', analysis: 'Revolutionized the sound of electronic festivals.', metrics: { weight: 70, energy: 95, harmonic: 30 }, children: [] },\r\n        'trance': { name: 'Trance', description: 'Euphonic electronic music focused on euphoria.', analysis: 'The sonic backbone of massive arena events.', metrics: { weight: 75, energy: 90, harmonic: 65 }, children: [] },\r\n        'dnb': { name: 'Drum and Bass', description: 'Breakbeat-heavy music with extremely fast tempos.', analysis: 'A technical marvel of rhythmic engineering.', metrics: { weight: 60, energy: 100, harmonic: 40 }, children: [] },\r\n        'grunge': { name: 'Grunge', description: 'The abrasive and melancholic sound of the Pacific Northwest.', analysis: 'Redefined rock for an entire generation in the 90s.', metrics: { weight: 70, energy: 80, harmonic: 35 }, children: [] },\r\n        'psychedelic-rock': { name: 'Psychedelic Rock', description: 'Experimentation and mind-expanding sonic textures.', analysis: 'The origin of progressive musical structures.', metrics: { weight: 50, energy: 70, harmonic: 90 }, children: [] },\r\n        'bossa-nova': { name: 'Bossa Nova', description: 'Lyrical Brazilian jazz with a distinct rhythmic swing.', analysis: 'Global standard for sophisticated acoustic textures.', metrics: { weight: 55, energy: 30, harmonic: 85 }, children: [] },\r\n        'bedroom-pop': { name: 'Bedroom Pop', description: 'DIY pop music recorded at home with a lo-fi aesthetic.', analysis: 'The primary entry point for independent Gen Z creators.', metrics: { weight: 80, energy: 40, harmonic: 60 }, children: [] },\r\n        'indie-pop': { name: 'Indie Pop', description: 'Alternative pop with a focus on melody and indie values.', analysis: 'The alternative commercial engine of the pop market.', metrics: { weight: 85, energy: 65, harmonic: 75 }, children: [] },\r\n        'acid-house': { name: 'Acid House', description: 'Squelching 303 synthesizers and hypnotic rhythms.', analysis: 'The revolutionary spark of the UK rave movement.', metrics: { weight: 50, energy: 92, harmonic: 20 }, children: [] },\r\n        'cool-jazz': { name: 'Cool Jazz', description: 'A relaxed and melodic style of jazz performance.', analysis: 'Balanced the intensity of bebop with accessibility.', metrics: { weight: 45, energy: 25, harmonic: 90 }, children: [] }\r\n    };\r\n\r\n    let history = ['root'];\r\n    let currentGenreId = 'root';\r\n    let zoom = 1;\r\n    let pan = { x: 0, y: 0 };\r\n    \r\n    const graphContainer = document.getElementById('graph-container');\r\n    const viewportGroup = document.getElementById('viewport-group');\r\n    const mapLinks = document.getElementById('links-group');\r\n    const mapNodes = document.getElementById('nodes-group');\r\n    const breadcrumbsEl = document.getElementById('breadcrumbs');\r\n\r\n    function updateTransform() {\r\n        viewportGroup.setAttribute('transform', `translate(${pan.x}, ${pan.y}) scale(${zoom})`);\r\n    }\r\n\r\n    function navigateTo(id) {\r\n        if (!genreData[id]) return;\r\n        \r\n        const pathIndex = history.indexOf(id);\r\n        \r\n        \/\/ If clicking the currently active node, go back to parent (minimize\/collapse)\r\n        if (id === currentGenreId && history.length > 1) {\r\n            history.pop();\r\n            currentGenreId = history[history.length - 1];\r\n        } \r\n        \/\/ If clicking a node already in the history path, truncate back to it\r\n        else if (pathIndex !== -1) {\r\n            history = history.slice(0, pathIndex + 1);\r\n            currentGenreId = id;\r\n        } \r\n        \/\/ If clicking a new node, expand it\r\n        else {\r\n            history.push(id);\r\n            currentGenreId = id;\r\n        }\r\n        \r\n        render();\r\n    }\r\n\r\n    function calculatePositions() {\r\n        const positions = {};\r\n        const width = graphContainer.clientWidth;\r\n        const height = graphContainer.clientHeight;\r\n        \r\n        positions['root'] = { x: width\/2, y: height\/2, angle: -Math.PI\/2 };\r\n\r\n        for (let i = 0; i < history.length; i++) {\r\n            const parentId = history[i];\r\n            const data = genreData[parentId];\r\n            const pPos = positions[parentId];\r\n            \r\n            if (data.children && data.children.length > 0) {\r\n                const radius = 180 - (i * 20); \r\n                const baseAngle = pPos.angle;\r\n                const spread = Math.PI * 0.9; \r\n                \r\n                data.children.forEach((childId, index) => {\r\n                    const offset = (index - (data.children.length - 1) \/ 2) * (spread \/ Math.max(data.children.length, 1));\r\n                    const angle = baseAngle + offset;\r\n                    positions[childId] = {\r\n                        x: pPos.x + radius * Math.cos(angle),\r\n                        y: pPos.y + radius * Math.sin(angle),\r\n                        angle: angle,\r\n                        parent: parentId\r\n                    };\r\n                });\r\n            }\r\n        }\r\n        return positions;\r\n    }\r\n\r\n    function render() {\r\n        const data = genreData[currentGenreId];\r\n        if (!data) return;\r\n\r\n        document.getElementById('current-genre-name').textContent = data.name;\r\n        document.getElementById('genre-description').textContent = data.description;\r\n        document.getElementById('analysis-text').textContent = data.analysis;\r\n        document.getElementById('status-display').textContent = `Tracing Lineage: ${data.name}`;\r\n        \r\n        document.getElementById('bar-weight').style.width = data.metrics.weight + '%';\r\n        document.getElementById('val-weight').textContent = data.metrics.weight + '%';\r\n        document.getElementById('bar-energy').style.width = data.metrics.energy + '%';\r\n        document.getElementById('val-energy').textContent = data.metrics.energy + '%';\r\n        document.getElementById('bar-harmonic').style.width = data.metrics.harmonic + '%';\r\n        document.getElementById('val-harmonic').textContent = data.metrics.harmonic + '%';\r\n\r\n        breadcrumbsEl.innerHTML = history.map((h, i) => `\r\n            <span class=\"breadcrumb-item cursor-pointer hover:text-black ${i === history.length-1 ? 'opacity-100' : 'opacity-60'}\" onclick=\"navigateTo('${h}')\">${genreData[h].name}<\/span>\r\n        `).join('<span class=\"text-gray-200 mx-1\">\/<\/span>');\r\n\r\n        const positions = calculatePositions();\r\n        mapNodes.innerHTML = '';\r\n        mapLinks.innerHTML = '';\r\n\r\n        Object.keys(positions).forEach(id => {\r\n            const pos = positions[id];\r\n            const gData = genreData[id];\r\n            if (!gData) return;\r\n\r\n            if (pos.parent) {\r\n                const pPos = positions[pos.parent];\r\n                if (pPos) {\r\n                    const line = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"line\");\r\n                    line.setAttribute(\"x1\", pPos.x); line.setAttribute(\"y1\", pPos.y);\r\n                    line.setAttribute(\"x2\", pos.x); line.setAttribute(\"y2\", pos.y);\r\n                    line.setAttribute(\"class\", `link ${history.includes(id) ? 'active' : ''}`);\r\n                    mapLinks.appendChild(line);\r\n                }\r\n            }\r\n\r\n            const g = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"g\");\r\n            const isActive = (id === currentGenreId);\r\n            g.setAttribute(\"class\", `node ${isActive ? 'active' : ''}`);\r\n            g.setAttribute(\"transform\", `translate(${pos.x}, ${pos.y})`);\r\n            g.onclick = (e) => { e.stopPropagation(); navigateTo(id); };\r\n\r\n            const circle = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"circle\");\r\n            circle.setAttribute(\"r\", isActive ? 10 : 7);\r\n            circle.setAttribute(\"fill\", isActive ? \"#000\" : \"#fff\");\r\n            circle.setAttribute(\"stroke\", \"#000\");\r\n            circle.setAttribute(\"stroke-width\", \"2.5\");\r\n            g.appendChild(circle);\r\n\r\n            const text = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"text\");\r\n            text.textContent = gData.name;\r\n            text.setAttribute(\"y\", 22);\r\n            text.setAttribute(\"text-anchor\", \"middle\");\r\n            text.setAttribute(\"class\", \"font-narrow text-[9px] font-bold uppercase tracking-tighter\");\r\n            g.appendChild(text);\r\n\r\n            mapNodes.appendChild(g);\r\n        });\r\n\r\n        updateTransform();\r\n    }\r\n\r\n    let isDragging = false;\r\n    let startPan = { x: 0, y: 0 };\r\n\r\n    graphContainer.onmousedown = (e) => {\r\n        isDragging = true;\r\n        startPan = { x: e.clientX - pan.x, y: e.clientY - pan.y };\r\n    };\r\n\r\n    window.onmousemove = (e) => {\r\n        if (!isDragging) return;\r\n        pan.x = e.clientX - startPan.x;\r\n        pan.y = e.clientY - startPan.y;\r\n        updateTransform();\r\n    };\r\n\r\n    window.onmouseup = () => isDragging = false;\r\n\r\n    graphContainer.onwheel = (e) => {\r\n        e.preventDefault();\r\n        const delta = -e.deltaY;\r\n        const factor = delta > 0 ? 1.1 : 0.9;\r\n        zoom = Math.min(Math.max(zoom * factor, 0.4), 3);\r\n        updateTransform();\r\n    };\r\n\r\n    document.getElementById('reset-view-btn').onclick = () => {\r\n        pan = { x: 0, y: 0 };\r\n        zoom = 1;\r\n        updateTransform();\r\n    };\r\n\r\n    window.addEventListener('load', () => {\r\n        render();\r\n        pan = { x: 0, y: 0 };\r\n        updateTransform();\r\n    });\r\n\r\n    if (document.readyState === 'complete') render();\r\n<\/script>\r\n\r\n<!-- Mailchimp Connected Script -->\r\n<script id=\"mcjs\">\r\n    !function(c,h,i,m,p){m=c.createElement(h),p=c.getElementsByTagName(h)[0],m.async=1,m.src=i,p.parentNode.insertBefore(m,p)}(document,\"script\",\"https:\/\/chimpstatic.com\/mcjs-connected\/js\/users\/ea67674782cf60158e68c325b\/68124561f80241ac1200140b3.js\");\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>The Stereo Daily Intelligence Genre Logic. Spatial taxonomy of sound. Navigate the lineage tree by clicking nodes to expand branches. Clicking an active node will minimize its branch. Active Classification Root The industrial foundation of modern musical classification. Sonic Profile Graph Commercial Weight 100% Energy \/ Intensity 50% Harmonic Complexity 50% Analysis. Aggregate of all [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-2689","page","type-page","status-publish","hentry"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":7}},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Free Music Genre Tree Explorer - Stereo Daily<\/title>\n<meta name=\"description\" content=\"Explore the evolution of music with our interactive genre tree. Map the relationships between parent genres and viral sub-genres like Phonk, Hyperpop, and Amapiano.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/stereodaily.com\/uk\/wp-json\/wp\/v2\/pages\/2689\/\" \/>\n<meta property=\"og:locale\" content=\"uk_UA\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Free Music Genre Tree Explorer - Stereo Daily\" \/>\n<meta property=\"og:description\" content=\"Explore the evolution of music with our interactive genre tree. Map the relationships between parent genres and viral sub-genres like Phonk, Hyperpop, and Amapiano.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/stereodaily.com\/uk\/music-genre-tree-explorer\/\" \/>\n<meta property=\"og:site_name\" content=\"Stereo Daily\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/stereodaily\/\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-10T15:38:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/stereodaily.com\/wp-content\/uploads\/2025\/12\/Stereo-Daily-Logo.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"675\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/stereodaily.com\\\/uk\\\/music-genre-tree-explorer\\\/\",\"url\":\"https:\\\/\\\/stereodaily.com\\\/uk\\\/music-genre-tree-explorer\\\/\",\"name\":\"Free Music Genre Tree Explorer - Stereo Daily\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/stereodaily.com\\\/uk\\\/#website\"},\"datePublished\":\"2026-01-10T15:28:41+00:00\",\"dateModified\":\"2026-01-10T15:38:36+00:00\",\"description\":\"Explore the evolution of music with our interactive genre tree. Map the relationships between parent genres and viral sub-genres like Phonk, Hyperpop, and Amapiano.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/stereodaily.com\\\/uk\\\/music-genre-tree-explorer\\\/#breadcrumb\"},\"inLanguage\":\"uk\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/stereodaily.com\\\/uk\\\/music-genre-tree-explorer\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/stereodaily.com\\\/uk\\\/music-genre-tree-explorer\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/stereodaily.com\\\/uk\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Music Genre Tree Explorer\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/stereodaily.com\\\/uk\\\/#website\",\"url\":\"https:\\\/\\\/stereodaily.com\\\/uk\\\/\",\"name\":\"Stereo Daily\",\"description\":\"Your Global Music News Since 2012\",\"publisher\":{\"@id\":\"https:\\\/\\\/stereodaily.com\\\/uk\\\/#organization\"},\"alternateName\":\"StereoDaily\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/stereodaily.com\\\/uk\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"uk\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/stereodaily.com\\\/uk\\\/#organization\",\"name\":\"Stereo Daily\",\"alternateName\":\"StereoDaily\",\"url\":\"https:\\\/\\\/stereodaily.com\\\/uk\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"uk\",\"@id\":\"https:\\\/\\\/stereodaily.com\\\/uk\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/stereodaily.com\\\/wp-content\\\/uploads\\\/2025\\\/12\\\/Stereo-Daily-Site-Map.png\",\"contentUrl\":\"https:\\\/\\\/stereodaily.com\\\/wp-content\\\/uploads\\\/2025\\\/12\\\/Stereo-Daily-Site-Map.png\",\"width\":512,\"height\":512,\"caption\":\"Stereo Daily\"},\"image\":{\"@id\":\"https:\\\/\\\/stereodaily.com\\\/uk\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/stereodaily\\\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Free Music Genre Tree Explorer - Stereo Daily","description":"Explore the evolution of music with our interactive genre tree. Map the relationships between parent genres and viral sub-genres like Phonk, Hyperpop, and Amapiano.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/stereodaily.com\/uk\/wp-json\/wp\/v2\/pages\/2689\/","og_locale":"uk_UA","og_type":"article","og_title":"Free Music Genre Tree Explorer - Stereo Daily","og_description":"Explore the evolution of music with our interactive genre tree. Map the relationships between parent genres and viral sub-genres like Phonk, Hyperpop, and Amapiano.","og_url":"https:\/\/stereodaily.com\/uk\/music-genre-tree-explorer\/","og_site_name":"Stereo Daily","article_publisher":"https:\/\/www.facebook.com\/stereodaily\/","article_modified_time":"2026-01-10T15:38:36+00:00","og_image":[{"width":1200,"height":675,"url":"https:\/\/stereodaily.com\/wp-content\/uploads\/2025\/12\/Stereo-Daily-Logo.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/stereodaily.com\/uk\/music-genre-tree-explorer\/","url":"https:\/\/stereodaily.com\/uk\/music-genre-tree-explorer\/","name":"Free Music Genre Tree Explorer - Stereo Daily","isPartOf":{"@id":"https:\/\/stereodaily.com\/uk\/#website"},"datePublished":"2026-01-10T15:28:41+00:00","dateModified":"2026-01-10T15:38:36+00:00","description":"Explore the evolution of music with our interactive genre tree. Map the relationships between parent genres and viral sub-genres like Phonk, Hyperpop, and Amapiano.","breadcrumb":{"@id":"https:\/\/stereodaily.com\/uk\/music-genre-tree-explorer\/#breadcrumb"},"inLanguage":"uk","potentialAction":[{"@type":"ReadAction","target":["https:\/\/stereodaily.com\/uk\/music-genre-tree-explorer\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/stereodaily.com\/uk\/music-genre-tree-explorer\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/stereodaily.com\/uk\/"},{"@type":"ListItem","position":2,"name":"Music Genre Tree Explorer"}]},{"@type":"WebSite","@id":"https:\/\/stereodaily.com\/uk\/#website","url":"https:\/\/stereodaily.com\/uk\/","name":"Stereo Daily","description":"Your Global Music News Since 2012","publisher":{"@id":"https:\/\/stereodaily.com\/uk\/#organization"},"alternateName":"StereoDaily","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/stereodaily.com\/uk\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"uk"},{"@type":"Organization","@id":"https:\/\/stereodaily.com\/uk\/#organization","name":"Stereo Daily","alternateName":"StereoDaily","url":"https:\/\/stereodaily.com\/uk\/","logo":{"@type":"ImageObject","inLanguage":"uk","@id":"https:\/\/stereodaily.com\/uk\/#\/schema\/logo\/image\/","url":"https:\/\/stereodaily.com\/wp-content\/uploads\/2025\/12\/Stereo-Daily-Site-Map.png","contentUrl":"https:\/\/stereodaily.com\/wp-content\/uploads\/2025\/12\/Stereo-Daily-Site-Map.png","width":512,"height":512,"caption":"Stereo Daily"},"image":{"@id":"https:\/\/stereodaily.com\/uk\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/stereodaily\/"]}]}},"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/stereodaily.com\/wp-json\/wp\/v2\/pages\/2689","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stereodaily.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/stereodaily.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/stereodaily.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stereodaily.com\/wp-json\/wp\/v2\/comments?post=2689"}],"version-history":[{"count":5,"href":"https:\/\/stereodaily.com\/wp-json\/wp\/v2\/pages\/2689\/revisions"}],"predecessor-version":[{"id":2707,"href":"https:\/\/stereodaily.com\/wp-json\/wp\/v2\/pages\/2689\/revisions\/2707"}],"wp:attachment":[{"href":"https:\/\/stereodaily.com\/wp-json\/wp\/v2\/media?parent=2689"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}