{"id":10641,"date":"2025-10-22T14:56:00","date_gmt":"2025-10-22T12:56:00","guid":{"rendered":"https:\/\/spgoo.org\/?page_id=10641"},"modified":"2025-10-22T14:57:00","modified_gmt":"2025-10-22T12:57:00","slug":"act-severine-morisset-lopez","status":"publish","type":"page","link":"https:\/\/spgoo.org\/?page_id=10641","title":{"rendered":"Act S\u00e9verine Morisset-Lopez"},"content":{"rendered":"\n<link rel='stylesheet' id='10639-css'  href='https:\/\/spgoo.org\/wp-content\/uploads\/winp-css-js\/10639.css?ver=1761139721' type='text\/css' media='all' \/>\n\n\n<script type='text\/javascript'>\nvar id = \"10637\";<\/script>\n<script type='text\/javascript' src='https:\/\/spgoo.org\/wp-content\/uploads\/winp-css-js\/10637.js?ver=1761137673'><\/script>\n\n\n<script type=\"text\/javascript\" src=\"https:\/\/fastly.jsdelivr.net\/npm\/echarts@5\/dist\/echarts.min.js\"><\/script>\r\n<script type=\"text\/javascript\" src=\"https:\/\/fastly.jsdelivr.net\/npm\/echarts@5\/dist\/extension\/dataTool.min.js\"><\/script>\r\n<!-- <script type=\"text\/javascript\" src=\"https:\/\/echarts.apache.org\/en\/js\/vendors\/echarts-gl@2\/dist\/echarts-gl.min.js\"><\/script>-->\r\n<!-- <script type=\"text\/javascript\" src=\"jquery_37.min.js\"><\/script> -->\r\n\r\n<div style=\"display:flex;\">        \r\n        <div id=\"main\" style=\"width:750px;height:800px;\"><\/div>\r\n        <div class=\"timeline-container\">\r\n            <div class=\"timeline-header\">\r\n            <\/div>\r\n    \r\n            <div class=\"slider-container\">\r\n                <div class=\"slider-labels\">\r\n                    <span>1991<\/span>\r\n                    <span>2025<\/span>\r\n                <\/div>\r\n                <input type=\"range\" min=\"1991\" max=\"2025\" value=\"2008\" class=\"timeline-slider\" id=\"yearSlider\">\r\n                <div class=\"selected-year-display\">\r\n                    <span id=\"selectedYear\">1999<\/span>\r\n                <\/div>\r\n            <\/div>\r\n    \r\n            <div class=\"timeline\">\r\n                <div class=\"cursor-marker\" id=\"cursorMarker\">\r\n                    <div class=\"cursor-dot\"><\/div>\r\n                    <div class=\"cursor-label\">1999<\/div>\r\n                <\/div>\r\n    \r\n                <div class=\"timeline-item\">\r\n                    <div class=\"timeline-dot\"><\/div>\r\n                    <div class=\"timeline-content\">\r\n                        <div class=\"timeline-card\">\r\n                            <div class=\"year\">1991<\/div>\r\n                            <div class=\"description\">D\u00e9but Paris VI<\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n    \r\n                <div class=\"timeline-item\">\r\n                    <div class=\"timeline-dot\"><\/div>\r\n                    <div class=\"timeline-content\">\r\n                        <div class=\"timeline-card\">\r\n                            <div class=\"year\">1999<\/div>\r\n                            <div class=\"description\">PhD<\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n    \r\n                <div class=\"timeline-item\">\r\n                    <div class=\"timeline-dot\"><\/div>\r\n                    <div class=\"timeline-content\">\r\n                        <div class=\"timeline-card\">\r\n                            <div class=\"year\">2000-2001<\/div>\r\n                            <div class=\"description\">Post Doc Illkirch Strasbourg<\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n    \r\n                <div class=\"timeline-item\">\r\n                    <div class=\"timeline-dot\"><\/div>\r\n                    <div class=\"timeline-content\">\r\n                        <div class=\"timeline-card\">\r\n                            <div class=\"year\">2002-2008<\/div>\r\n                            <div class=\"description\">INSERM U576 Paris<\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n    \r\n                <div class=\"timeline-item\">\r\n                    <div class=\"timeline-dot\"><\/div>\r\n                    <div class=\"timeline-content\">\r\n                        <div class=\"timeline-card\">\r\n                            <div class=\"year\">2009-2025<\/div>\r\n                            <div class=\"description\">CBM CNRS Orl\u00e9ans<\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>    \r\n<\/div>\t\r\n        \r\n        \r\n        \r\n<script>\r\nvar ROOT_PATH = 'http:\/\/localhost:8777\/';\r\n\r\nvar chartDom = document.getElementById('main');\r\nvar myChart = echarts.init(chartDom,'dark', {renderer:'svg'});\r\nvar option;\r\n\r\n\/\/ ------------------------------------\r\n\/\/ constitution du graphe par ann\u00e9e : on extrait les publications et les co-auteurs pour reconstruire le graphe\r\n\/\/ ------------------------------------\r\nconst creation_graphe=function(year) {\r\n    let graph={};  \/\/ creation nodes, links, categories\r\n    graph.nodes=[]; \r\n    graph.links=[]; \r\n    graph.categories=[]; \r\n    graph.categories=[{\"name\": \"H\"},{\"name\": \"F\"}]; \r\n    let id=0;\r\n    let author_year={};\r\n    \/\/ premier jet pour extraire les co-auteurs des publications \r\n    severine_publications.forEach(pub=> {\r\n        if (pub.revue.indexOf(year)!=-1) {\r\n            pub.authors.forEach(auteur=>author_year[auteur]=1);\r\n        }\r\n    });\r\n    \/\/ on a la liste des auteurs presents sur cette ann\u00e9e \r\n    let Node_auteurs={};\r\n    auteurs.forEach(aut=> {\r\n        let Categ_sexe=0;\r\n        if (aut.sexe==\"F\") {\r\n            Categ_sexe=1;\r\n        }\r\n        if (author_year[aut.name]) {\r\n            const auteur= {\"id\": id,\"name\": aut.name,\r\n            \"symbolSize\": 20.665,\r\n            \"x\": -4.08344,\r\n            \"y\": 4.8853,\r\n            \"value\": 4,\r\n            \"category\": Categ_sexe};\r\n            Node_auteurs[aut.name]=id;\r\n            graph.nodes.push(auteur);\r\n            id++;\r\n        }\r\n    })\r\n    graph.links=[]; \r\n\r\n    \/\/ il faut \u00e9tablir les links entre les nodes  en fonction des publications \r\n    severine_publications.forEach(pub=> {\r\n        \/\/ on teste si fait parti de l'ann\u00e9e recherch\u00e9e \r\n        if (pub.revue.indexOf(year)!=-1) {\r\n            \/\/ \"source\": \"1\",\r\n            \/\/ \"target\": \"0\"\r\n            let pairs = (arr) => arr.map( (v, i) => arr.slice(i + 1).map(w => [v, w]) ).flat();\r\n            tab = pairs(pub.authors);\r\n            tab.forEach(couple=>{\r\n                graph.links.push({\"source\":Node_auteurs[couple[0]],\"target\":Node_auteurs[couple[1]]});\r\n                author_year[\"'\"+Node_auteurs[couple[0]]+\"'\"]=1;\r\n                author_year[\"'\"+Node_auteurs[couple[1]]+\"'\"]=1;\r\n            });    \r\n        }\r\n    });\r\n\r\n    console.log(author_year, graph.links);\r\n    return graph;\r\n}\r\n\r\nlet graph= creation_graphe(\"2008\");\r\n\r\nconst mgcir_reajuste_graphe=function(year) {\r\n\tconst graphe=creation_graphe(year);\r\n\t\/\/ console.log(nodes,links);\r\n\tmyChart.setOption({\r\n\t\tseries : [ {\r\n\t\t\tdata:graphe.nodes,\r\n\t\t\tlinks: graphe.links,\r\n\t\t\tcategories:[{ \"name\": \"H\" },\r\n\t\t\t\t\t{ \"name\": \"F\" },\r\n\t\t\t],\r\n\t\t\tlabel: {\r\n\t\t\t  show: true,\r\n\t\t\t  position: 'right',\r\n\t\t\t  formatter: '{b}'\r\n\t\t\t},\r\n\t\t}\r\n\t\t]\r\n\t})\r\n}\r\n\r\noption = {\r\n    title: {\r\n        text: 'SML',\r\n        subtext: 'Circular layout',\r\n        top: 'bottom',\r\n        left: 'right'\r\n    },\r\n    tooltip: {},\r\n    legend: [{\r\n        data: graph.categories.map(function (a) {\r\n        return a.name;\r\n        })\r\n    }],\r\n    animationDurationUpdate: 1500,\r\n    animationEasingUpdate: 'quinticInOut',\r\n    series: [\r\n    {\r\n        name: 'S\u00e9verine',\r\n        type: 'graph',\r\n        layout: 'circular',\r\n        circular: {\r\n            rotateLabel: true\r\n        },\r\n        data: graph.nodes,\r\n        links: graph.links,\r\n        categories: graph.categories,\r\n        roam: true,\r\n        label: {\r\n            position: 'right',\r\n            formatter: '{b}',\r\n            show:true\r\n        },\r\n        lineStyle: {\r\n            color: 'source',\r\n            curveness: 0.3\r\n        }\r\n    }\r\n    ]\r\n};\r\noption && myChart.setOption(option);\r\n\r\n    const slider = document.getElementById('yearSlider');\r\n            const selectedYear = document.getElementById('selectedYear');\r\n            const cursorMarker = document.getElementById('cursorMarker');\r\n            const cursorLabel = cursorMarker.querySelector('.cursor-label');\r\n            const timeline = document.querySelector('.timeline');\r\n    \r\n            \/\/ Ann\u00e9es des \u00e9v\u00e9nements\r\n            const events = [\r\n                { year: 1991, offset: 6 },\r\n                { year: 1999, offset: 5 },\r\n                { year: 2000, offset: 4 },\r\n                { year: 2002, offset: 3 },\r\n                { year: 2008, offset: 2 },\r\n                { year: 2009, offset: 1 },\r\n                { year: 2025, offset: 0 }\r\n            ];\r\n    \r\n            function updateCursor(year) {\r\n                selectedYear.textContent = year;\r\n                cursorLabel.textContent = year;\r\n                \r\n                \/\/ Calculer la position du curseur sur la timeline\r\n                const minYear = 1991;\r\n                const maxYear = 2025;\r\n                const totalYears = maxYear - minYear;\r\n                const currentYearOffset = year - minYear;\r\n                const percentage = currentYearOffset \/ totalYears;\r\n                \r\n                \/\/ Calculer la position en pixels\r\n                const timelineItems = document.querySelectorAll('.timeline-item');\r\n                const totalItems = timelineItems.length;\r\n                const itemSpacing = 50; \/\/ margin-bottom des items\r\n                \r\n                let totalHeight = 0;\r\n                timelineItems.forEach((item, index) => {\r\n                    if (index < totalItems - 1) {\r\n                        totalHeight += item.offsetHeight + itemSpacing;\r\n                    } else {\r\n                        totalHeight += item.offsetHeight;\r\n                    }\r\n                });\r\n                \r\n                const topPosition = percentage * totalHeight + 70;\r\n                cursorMarker.style.top = topPosition + 'px';\r\n                \r\n                \/\/ Mettre en \u00e9vidence les cartes proches\r\n                timelineItems.forEach(item => {\r\n                    const card = item.querySelector('.timeline-card');\r\n                    const itemYear = parseInt(item.querySelector('.year').textContent);\r\n                    const difference = Math.abs(itemYear - year);\r\n                    \r\n                    if (difference <= 2) {\r\n                        card.style.background = 'rgba(251,191,36,0.2)';\r\n                        card.style.borderColor = 'rgba(251,191,36,0.5)';\r\n                    } else {\r\n                        card.style.background = 'rgba(255,255,255,0.1)';\r\n                        card.style.borderColor = 'rgba(255,255,255,0.2)';\r\n                    }\r\n                });\r\n            }\r\n    \r\n            slider.addEventListener('input', (e) => {\r\n                updateCursor(parseInt(e.target.value));\r\n                console.log(\"reactualise le graphe\"); \r\n                mgcir_reajuste_graphe(parseInt(e.target.value));\r\n            });\r\n    \r\n            \/\/ Initialiser la position\r\n            updateCursor(2008);\r\n\r\n\r\n\r\n\r\n<\/script>\r\n\r\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-10641","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages\/10641","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/spgoo.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=10641"}],"version-history":[{"count":1,"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages\/10641\/revisions"}],"predecessor-version":[{"id":10642,"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages\/10641\/revisions\/10642"}],"wp:attachment":[{"href":"https:\/\/spgoo.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=10641"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}