fork download
copy 
  1. /* package whatever; // don't place package name! */
  2.  
  3. import java.util.*;
  4. import java.lang.*;
  5. import java.io.*;
  6.  
  7. /* Name of the class has to be "Main" only if the class is public. */
  8. class Ideone
  9. {
  10. 	public static void main (String[] args) throws java.lang.Exception
  11. 	{
  12. 		// your code goes here
  13. 	}
  14. }
Success #stdin #stdout 0.09s 54712KB
comments (?)
stdin
copy 
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mapa Conceptual — Doctrina del Pecado</title>
<style>
  body {
    background-color: #000;
    color: #fff;
    font-family: 'Segoe UI', sans-serif;
    margin: 0;
    overflow: hidden;
  }
  h1 {
    text-align: center;
    margin-top: 20px;
    font-size: 2em;
    color: #fff;
  }
  #mindmap {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80vh;
  }
  .node {
    opacity: 0;
    transition: opacity 1s ease-in;
  }
  footer {
    position: fixed;
    right: 15px;
    bottom: 10px;
    font-size: 0.9em;
    color: #aaa;
  }
  button {
    position: fixed;
    left: 15px;
    bottom: 10px;
    background: #444;
    color: #fff;
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
  }
  button:hover {
    background: #666;
  }
</style>
</head>
<body>
<h1>Mapa Conceptual — Doctrina del Pecado</h1>
<div id="mindmap"></div>
<footer>Elaborado por CAVAL</footer>
<button onclick="restartAnimation()">Reiniciar Animación</button>

<audio id="music" autoplay loop volume="0.1">
  <source src="https://c...content-available-to-author-only...y.com/audio/2022/03/15/audio_bdb26e6892.mp3" type="audio/mpeg">
</audio>

<script src="https://c...content-available-to-author-only...r.net/npm/d3@7"></script>
<script>
const data = {
  name: "Doctrina del Pecado",
  children: [
    {
      name: "Naturaleza del Pecado",
      children: [
        { name: "Ofensa contra Dios" },
        { name: "Rompe la comunión con Él" },
        { name: "Proviene de la libertad mal usada" }
      ]
    },
    {
      name: "Consecuencias del Pecado",
      children: [
        { name: "Separación espiritual" },
        { name: "Desorden moral y social" },
        { name: "Necesidad de redención" }
      ]
    },
    {
      name: "Tipos de Pecado",
      children: [
        {
          name: "Original",
          children: [
            { name: "Transmitido desde Adán" },
            { name: "Herida en la naturaleza humana" }
          ]
        },
        {
          name: "Personal",
          children: [
            { name: "Actos libres y conscientes" },
            { name: "Puede ser mortal o venial" }
          ]
        }
      ]
    },
    {
      name: "Superación del Pecado",
      children: [
        { name: "Arrepentimiento sincero" },
        { name: "Confesión y perdón divino" },
        { name: "Vida de gracia y conversión continua" }
      ]
    }
  ]
};

const width = window.innerWidth;
const height = window.innerHeight - 100;

const svg = d3.select("#mindmap")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

const g = svg.append("g").attr("transform", "translate(" + width/2 + "," + height/2 + ")");

const tree = d3.tree().size([2 * Math.PI, 300]);
const root = d3.hierarchy(data);
tree(root);

const color = d3.scaleOrdinal(d3.schemeCategory10);

const link = g.append("g")
  .selectAll("path")
  .data(root.links())
  .join("path")
  .attr("fill", "none")
  .attr("stroke", "#888")
  .attr("stroke-width", 1.5)
  .attr("d", d3.linkRadial()
    .angle(d => d.x)
    .radius(d => d.y)
  );

const node = g.append("g")
  .selectAll("circle")
  .data(root.descendants())
  .join("circle")
  .attr("class", "node")
  .attr("transform", d => `
    rotate(${d.x * 180 / Math.PI - 90})
    translate(${d.y},0)
  `)
  .attr("r", 5)
  .attr("fill", d => color(d.depth));

const text = g.append("g")
  .selectAll("text")
  .data(root.descendants())
  .join("text")
  .attr("class", "node")
  .attr("transform", d => `
    rotate(${d.x * 180 / Math.PI - 90})
    translate(${d.y},0)
    rotate(${d.x >= Math.PI ? 180 : 0})
  `)
  .attr("dy", "0.31em")
  .attr("x", d => d.x < Math.PI === !d.children ? 8 : -8)
  .attr("text-anchor", d => d.x < Math.PI === !d.children ? "start" : "end")
  .attr("fill", "#fff")
  .text(d => d.data.name);

let delay = 0;
d3.selectAll(".node")
  .transition()
  .delay((d,i) => i * 300)
  .duration(1000)
  .style("opacity", 1);

function restartAnimation() {
  d3.selectAll(".node").style("opacity", 0);
  d3.selectAll(".node")
    .transition()
    .delay((d,i) => i * 300)
    .duration(1000)
    .style("opacity", 1);
}
</script>
</body>
</html>
stdout
copy 
Standard output is empty
https://ideone.com/CVtBwB
language:
Java (HotSpot 12)
created:
1 day ago
visibility:
public

Share or Embed source code

Discover > Sphere Engine API

The brand new service which powers Ideone!

Discover > IDE Widget

Widget for compiling and running the source code in a web browser!