{"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\/ja\/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\/ja\/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\/ja\/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 no [&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>\u7121\u6599\u97f3\u697d\u30b8\u30e3\u30f3\u30eb \u30c4\u30ea\u30fc \u30a8\u30af\u30b9\u30d7\u30ed\u30fc\u30e9\u30fc - Stereo Daily<\/title>\n<meta name=\"description\" content=\"\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u306a\u30b8\u30e3\u30f3\u30eb \u30c4\u30ea\u30fc\u3067\u97f3\u697d\u306e\u9032\u5316\u3092\u63a2\u3063\u3066\u304f\u3060\u3055\u3044\u3002\u89aa\u30b8\u30e3\u30f3\u30eb\u3068\u3001Phonk\u3001Hyperpop\u3001Amapiano \u306a\u3069\u306e\u30d0\u30a4\u30e9\u30eb\u306a\u30b5\u30d6\u30b8\u30e3\u30f3\u30eb\u3068\u306e\u95a2\u4fc2\u3092\u30de\u30c3\u30d4\u30f3\u30b0\u3057\u307e\u3059\u3002\" \/>\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\/ja\/wp-json\/wp\/v2\/pages\/2689\/\" \/>\n<meta property=\"og:locale\" content=\"ja_JP\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u7121\u6599\u97f3\u697d\u30b8\u30e3\u30f3\u30eb \u30c4\u30ea\u30fc \u30a8\u30af\u30b9\u30d7\u30ed\u30fc\u30e9\u30fc - Stereo Daily\" \/>\n<meta property=\"og:description\" content=\"\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u306a\u30b8\u30e3\u30f3\u30eb \u30c4\u30ea\u30fc\u3067\u97f3\u697d\u306e\u9032\u5316\u3092\u63a2\u3063\u3066\u304f\u3060\u3055\u3044\u3002\u89aa\u30b8\u30e3\u30f3\u30eb\u3068\u3001Phonk\u3001Hyperpop\u3001Amapiano \u306a\u3069\u306e\u30d0\u30a4\u30e9\u30eb\u306a\u30b5\u30d6\u30b8\u30e3\u30f3\u30eb\u3068\u306e\u95a2\u4fc2\u3092\u30de\u30c3\u30d4\u30f3\u30b0\u3057\u307e\u3059\u3002\" \/>\n<meta property=\"og:url\" content=\"https:\/\/stereodaily.com\/ja\/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=\"\u63a8\u5b9a\u8aad\u307f\u53d6\u308a\u6642\u9593\" \/>\n\t<meta name=\"twitter:data1\" content=\"9\u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/stereodaily.com\\\/ja\\\/music-genre-tree-explorer\\\/\",\"url\":\"https:\\\/\\\/stereodaily.com\\\/ja\\\/music-genre-tree-explorer\\\/\",\"name\":\"Free Music Genre Tree Explorer - Stereo Daily\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/stereodaily.com\\\/ja\\\/#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\\\/ja\\\/music-genre-tree-explorer\\\/#breadcrumb\"},\"inLanguage\":\"ja\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/stereodaily.com\\\/ja\\\/music-genre-tree-explorer\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/stereodaily.com\\\/ja\\\/music-genre-tree-explorer\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/stereodaily.com\\\/ja\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Music Genre Tree Explorer\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/stereodaily.com\\\/ja\\\/#website\",\"url\":\"https:\\\/\\\/stereodaily.com\\\/ja\\\/\",\"name\":\"Stereo Daily\",\"description\":\"Your Global Music News Since 2012\",\"publisher\":{\"@id\":\"https:\\\/\\\/stereodaily.com\\\/ja\\\/#organization\"},\"alternateName\":\"StereoDaily\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/stereodaily.com\\\/ja\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ja\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/stereodaily.com\\\/ja\\\/#organization\",\"name\":\"Stereo Daily\",\"alternateName\":\"StereoDaily\",\"url\":\"https:\\\/\\\/stereodaily.com\\\/ja\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ja\",\"@id\":\"https:\\\/\\\/stereodaily.com\\\/ja\\\/#\\\/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\\\/ja\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/stereodaily\\\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\u7121\u6599\u97f3\u697d\u30b8\u30e3\u30f3\u30eb \u30c4\u30ea\u30fc \u30a8\u30af\u30b9\u30d7\u30ed\u30fc\u30e9\u30fc - Stereo Daily","description":"\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u306a\u30b8\u30e3\u30f3\u30eb \u30c4\u30ea\u30fc\u3067\u97f3\u697d\u306e\u9032\u5316\u3092\u63a2\u3063\u3066\u304f\u3060\u3055\u3044\u3002\u89aa\u30b8\u30e3\u30f3\u30eb\u3068\u3001Phonk\u3001Hyperpop\u3001Amapiano \u306a\u3069\u306e\u30d0\u30a4\u30e9\u30eb\u306a\u30b5\u30d6\u30b8\u30e3\u30f3\u30eb\u3068\u306e\u95a2\u4fc2\u3092\u30de\u30c3\u30d4\u30f3\u30b0\u3057\u307e\u3059\u3002","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\/ja\/wp-json\/wp\/v2\/pages\/2689\/","og_locale":"ja_JP","og_type":"article","og_title":"\u7121\u6599\u97f3\u697d\u30b8\u30e3\u30f3\u30eb \u30c4\u30ea\u30fc \u30a8\u30af\u30b9\u30d7\u30ed\u30fc\u30e9\u30fc - Stereo Daily","og_description":"\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u306a\u30b8\u30e3\u30f3\u30eb \u30c4\u30ea\u30fc\u3067\u97f3\u697d\u306e\u9032\u5316\u3092\u63a2\u3063\u3066\u304f\u3060\u3055\u3044\u3002\u89aa\u30b8\u30e3\u30f3\u30eb\u3068\u3001Phonk\u3001Hyperpop\u3001Amapiano \u306a\u3069\u306e\u30d0\u30a4\u30e9\u30eb\u306a\u30b5\u30d6\u30b8\u30e3\u30f3\u30eb\u3068\u306e\u95a2\u4fc2\u3092\u30de\u30c3\u30d4\u30f3\u30b0\u3057\u307e\u3059\u3002","og_url":"https:\/\/stereodaily.com\/ja\/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":{"\u63a8\u5b9a\u8aad\u307f\u53d6\u308a\u6642\u9593":"9\u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/stereodaily.com\/ja\/music-genre-tree-explorer\/","url":"https:\/\/stereodaily.com\/ja\/music-genre-tree-explorer\/","name":"Free Music Genre Tree Explorer - Stereo Daily","isPartOf":{"@id":"https:\/\/stereodaily.com\/ja\/#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\/ja\/music-genre-tree-explorer\/#breadcrumb"},"inLanguage":"ja","potentialAction":[{"@type":"ReadAction","target":["https:\/\/stereodaily.com\/ja\/music-genre-tree-explorer\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/stereodaily.com\/ja\/music-genre-tree-explorer\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/stereodaily.com\/ja\/"},{"@type":"ListItem","position":2,"name":"Music Genre Tree Explorer"}]},{"@type":"WebSite","@id":"https:\/\/stereodaily.com\/ja\/#website","url":"https:\/\/stereodaily.com\/ja\/","name":"Stereo Daily","description":"Your Global Music News Since 2012","publisher":{"@id":"https:\/\/stereodaily.com\/ja\/#organization"},"alternateName":"StereoDaily","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/stereodaily.com\/ja\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ja"},{"@type":"Organization","@id":"https:\/\/stereodaily.com\/ja\/#organization","name":"Stereo Daily","alternateName":"StereoDaily","url":"https:\/\/stereodaily.com\/ja\/","logo":{"@type":"ImageObject","inLanguage":"ja","@id":"https:\/\/stereodaily.com\/ja\/#\/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\/ja\/#\/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}]}}