MediaWiki:Gadget-GlossaryGraph.js: Difference between revisions

Jump to navigation Jump to search
← Older editNewer edit →
AdminIsidore (talk | contribs)
aether-access, Bureaucrats, contubadmin, duffers, Interface administrators, latin, liberty, mystery, proveit, Administrators (Semantic MediaWiki), Curators (Semantic MediaWiki), Editors (Semantic MediaWiki), Suppressors, swift, Administrators, Upload Wizard campaign editors, visualdata-admin, visualdata-editor, wayfinder
708 edits
No edit summary
AdminIsidore (talk | contribs)
aether-access, Bureaucrats, contubadmin, duffers, Interface administrators, latin, liberty, mystery, proveit, Administrators (Semantic MediaWiki), Curators (Semantic MediaWiki), Editors (Semantic MediaWiki), Suppressors, swift, Administrators, Upload Wizard campaign editors, visualdata-admin, visualdata-editor, wayfinder
708 edits
No edit summary
Line 10: Line 10:
             }
             }


            // Use MediaWiki API to get links
             new mw.Api().get({
             new mw.Api().get({
                 action: 'query',
                 action: 'query',
Line 25: Line 24:
                 }
                 }


                // Transform API data into nodes and links
                 var nodes = [{ id: pageTitle }];
                 var nodes = [{ id: pageTitle }];
                 var edges = [];
                 var edges = [];
Line 33: Line 31:
                 });
                 });


                // Clear container and create SVG
                 $container.empty();
                 $container.empty();
                 var width = 400, height = 300;
                 var width = 400, height = 300;
Line 40: Line 37:
                     .attr('width', width)
                     .attr('width', width)
                     .attr('height', height)
                     .attr('height', height)
                     .style('background-color', '#000000'); // Black background for IBM style
                     .style('background-color', '#000000');


                // Force simulation
                 var simulation = d3.forceSimulation(nodes)
                 var simulation = d3.forceSimulation(nodes)
                     .force('link', d3.forceLink(edges).id(d => d.id).distance(100))
                     .force('link', d3.forceLink(edges).id(d => d.id).distance(100))
Line 48: Line 44:
                     .force('center', d3.forceCenter(width / 2, height / 2));
                     .force('center', d3.forceCenter(width / 2, height / 2));


                // Draw links
                 var link = svg.append('g')
                 var link = svg.append('g')
                     .selectAll('line')
                     .selectAll('line')
                     .data(edges)
                     .data(edges)
                     .enter().append('line')
                     .enter().append('line')
                     .attr('stroke', '#00FF00') // Green lines
                     .attr('stroke', '#00FF00')
                     .attr('stroke-width', 2);
                     .attr('stroke-width', 2);


                // Draw nodes
                 var node = svg.append('g')
                 var node = svg.append('g')
                     .selectAll('circle')
                     .selectAll('circle')
Line 62: Line 56:
                     .enter().append('circle')
                     .enter().append('circle')
                     .attr('r', 10)
                     .attr('r', 10)
                     .attr('fill', '#00CC00') // Darker green nodes
                     .attr('fill', '#00CC00')
                     .call(d3.drag()
                     .call(d3.drag()
                         .on('start', function(event, d) {
                         .on('start', function(event, d) {
Line 79: Line 73:
                         }));
                         }));


                // Add tooltips
                 node.append('title').text(d => d.id);
                 node.append('title').text(d => d.id);


                // Update positions on tick
                 simulation.on('tick', function() {
                 simulation.on('tick', function() {
                     link.attr('x1', d => d.source.x)
                     link.attr('x1', d => d.source.x)
Retrieved from "https://www.ooda.wiki/wiki/MediaWiki:Gadget-GlossaryGraph.js"