Diagrama de burbujas/satélite con niños.

Diagrama de burbujas/satélite con niños.

Tengo el siguiente código con smartdiagramel paquete Latex que produce el diagrama de burbujas adjunto.

pero me gustaría podertener satélites infantilesen él (ver imagen del prototipo a continuación).

  • ¿Es posible hacerlo con smartdiagram? Si no, ¿cómo podría replicar esto directamente con tikzo similar?

¡Gracias!

\documentclass[a4paper]{article}
\usepackage{smartdiagram}
\begin{document}

\smartdiagramset{
    bubble center node font = \footnotesize,
    bubble node font = \footnotesize,
    % specifies the minimum size of the bubble center node
    bubble center node size = 0.1cm,
    %  specifies the minimum size of the bubbles
    bubble node size = 0.9cm,
    % specifies which is the distance among the bubble center node and the other bubbles
    distance center/other bubbles = 0.5cm,
    % sets the distance from the text to the border of the bubble center node
    %distance text center bubble = 0.5cm,
}
\smartdiagram[bubble diagram]{
    \normalsize{Interest} \\ \normalsize{Areas},
    \textbf{DLTs/} \\ \textbf{Blockchain,} \\ \textbf{Web3},
    \textbf{Big/Fast Data} \\ \textbf{\& Streaming},    
    \textbf{Artificial} \\ \textbf{Intelligence},
    \textbf{Functional} \\ \textbf{Programming}
}

\end{document}

Lo que tengo versus lo que quiero

Lo que tengo versus lo que quiero

lo que intenté

Intenté reemplazar el satélite Functional Programmingpor un nuevo diagrama, con el objetivo de que el satélite se convierta en un nuevo planeta, para poder tener más satélites (los niños). Pero el resultado fue un desastre. Quiero decir:

\textbf{Functional} \\ \textbf{Programming}a \smartdiagram[bubble diagram]{ ... }

Respuesta1

Nueva versión de la respuesta OP, esta vez sin la ayuda de Chat-GPT. El código resultante es más corto y claro:

\documentclass[margin=3mm]{standalone}
\usepackage{tikz}
\usetikzlibrary{backgrounds,
                calc,
                positioning,}

\begin{document}
    \begin{tikzpicture}[
      base/.style = {circle, draw=white, line width=1.5pt, draw opacity=1,
                     minimum size=#1, align=center, font=\bfseries},
    planet/.style = {base=32mm, fill=orange},
 satellite/.style = {base=13mm, fill=#1, fill opacity=0.7},
  satchild/.style = {base=12mm, fill=green!40, fill opacity=0.7},
                        ]
% Planet
\node (P) [planet] {Interest \\ Areas};
% Satellits
\node   [satellite=blue!30, right=-7mm of P]  {DLTs/\\ Blockchain,\\ Web3};
\node   [satellite=gray!30, above=-7mm of P]  {Big/Fast Data\\ \& Streaming};
\node   [satellite=yellow!30,left=-7mm of P] {Artificial\\ Intelligence};
\node (fp) [satellite=green,below=-7mm of P]  {Functional\\ Programming};
% Satellits children
\node   [satchild, below  left=-4mm and 0mm of fp] {Unison};
\node   [satchild, below right=-4mm and 0mm of fp] {ZIO,\\ Kyo};
\node   [satchild, below=-4mm of fp] {Effect,\\ systems};
    \end{tikzpicture}
\end{document}

ingrese la descripción de la imagen aquí

A partir de la pregunta, no está claro si la imagen debe tener su propio fondo negro. En caso afirmativo, puede agregar antes \end{tikzpicture}las siguientes líneas de código:

% Background, if you like to have it in black
\scoped[on background layer]
    \draw[line width=6mm, fill] (current bounding box.south west) rectangle (current bounding box.north east);

ingrese la descripción de la imagen aquí

Respuesta2

Finalmente logré hacerlo con TikZ con la ayuda de Chat-GPT. Aquí está el resultado y el código de referencia:

ingrese la descripción de la imagen aquí

\documentclass[tikz,margin=2mm]{standalone}
\usetikzlibrary{shapes,positioning,calc}
\begin{document}
\begin{tikzpicture}

  % Define styles for the nodes
  \tikzstyle{planet}=[circle, fill=orange, minimum size=3.2cm, align=center]
  \tikzstyle{satellite}=[circle, draw, fill=green!40, minimum size=1.3cm, align=center, opacity=0.7, font=\footnotesize, postaction={draw=white, line width=1.5pt, opacity=1}]
  \tikzstyle{satchild}=[circle, draw, fill=green!25, minimum size=0.7cm, align=center, opacity=0.7, font=\footnotesize, postaction={draw=white, line width=1pt, opacity=1}]

  % Draw the central planet
  \node (interests) [planet] {Interest \\ Areas};

  \node (bigdata) [satellite, above=-0.7cm of interests, fill=gray!30] {\textbf{Big/Fast Data} \\ \textbf{\& Streaming}};
  \node (blockchain) [satellite, right=-0.7cm of interests, fill=blue!30] {\textbf{DLTs/} \\ \textbf{Blockchain,} \\ \textbf{Web3}};
  \node (fp) [satellite, below=-0.7cm of interests] {\textbf{Functional} \\ \textbf{Programming}};
  \node (ai) [satellite, left=-0.7cm of interests, fill=yellow!30] {\textbf{Artificial} \\ \textbf{Intelligence}};

  % Sat. children
  \node (unison) [satchild] at ($(fp) + (205:1.4cm)$) {Unison};
  \node (unison) [satchild] at ($(fp) + (-25:1.4cm)$) {ZIO, Kyo};
  \node (unison) [satchild, below=-4mm of fp] {Effect,\\ systems};

\end{tikzpicture}
\end{document}

Respuesta3

Solo para mostrar la cantidad de code-noisedinero generado y dejado por este enfoque ChatGPT, aquí hay algo de refactorización.del código que el OP publicó como solución.

Como puede ver, lo que queda se desprende some residual nastinessdel enfoque elegido. Es decir, me gustaría refactorizar más, por ejemplo, para mejorar la legibilidad, pero las declaraciones de nodo de alguna manera son buenas y malas al mismo tiempo como lo son ahora. Es decir, sin mucho más esfuerzo, es difícil convertir esas declaraciones en un conjunto de frases ingeniosas y bien formateadas y fáciles de entender.

También me pregunto qué pasó con left-to-right orientationel boceto original, que se convirtió en una orientación de abajo hacia arriba. Esto puede ser más fácil de cambiar ahora después de la refactorización que en el código GPT publicado.

No profundicé en ello, pero me pregunto por qué postactiones realmente necesario en los estilos SAT y CSAT.

As a rule of thumb:

  • Si el código tiene una apariencia fea, puede ser incorrecto o difícil de cambiar.
  • Si el código tiene una disposición ordenada, probablemente sea más correcto, debería compilarse.
  • por lo que todos estos son pasos para prevenir errores y fomentar cambios a medida que las cosas evolucionan.

Por cierto, code-noise, por ejemplo, la mala legibilidad, es menor cuando se trabaja al revés:

  • publicar nodos, etc. primero
  • introducir estilo tras estilo
  • El código que publico ahora es mejor, pero aún no es lo suficientemente bueno desde esta perspectiva.
\documentclass[tikz,margin=2mm]{standalone}
\usetikzlibrary{positioning}

% ~~~ REFACTORING ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
% --- removed unused node name ---
% --- removed bold font: not needed ----------
% --- replaced style-names for better read-ability & error prevention ----
% --- moved node names after the style statement (my convention) ---
% --- renamed node names: capitalized, shorter -----
% --- removed calc, replaced shift statements --------------
% --- removed shapes: obviously NOT needed ----------
% --- replaced 0.7cm by 7mm - grasp it at 1 glance w.o. thinking ---
% --- refactoring common styles CMN + removed not needed ones ---------
% --- same for opacity --------
% --- some, still insufficient, reformatting of code ---

\begin{document}
\begin{tikzpicture}

  % Define styles for the nodes
  \tikzstyle{CMN}   = [circle, align=center]
  \tikzstyle{OPC}   = [opacity=0.7]
  \tikzstyle{PAOPC} = [draw=white,opacity=1]
  \tikzstyle{PLANET}= [CMN, fill=orange, minimum size=3.2cm]
  \tikzstyle{SAT}   = [CMN, OPC, fill=green!40, minimum size=1.3cm,
                         font=\footnotesize, 
                         postaction={PAOPC, line width=1.5pt}]
  \tikzstyle{CSAT}  = [CMN, OPC, fill=green!25, minimum size=0.7cm,
                         font=\footnotesize, 
                         postaction={PAOPC, line width=1pt}]

  % Draw the central planet
  \node [PLANET]           (IA)      {Interest\\Areas};
  \node [SAT, above=-7mm of IA, 
        fill=gray!30]                {Big/Fast Data\\\& Streaming};
  \node [SAT, right=-7mm of IA, 
        fill=blue!30]                {DLTs/\\Blockchain,\\Web3};  
  \node [SAT, below=-7mm of IA] (FP) {Functional\\Programming};  
  \node [SAT, left=-7mm of IA, 
        fill=yellow!30]              {Artificial\\Intelligence};

  % Sat. children
  \node [CSAT]              at ([shift=(205:1.4cm)] FP) {Unison};
  \node [CSAT]              at ([shift=(-25:1.4cm)] FP) {ZIO, Kyo};
  \node [CSAT, 
         below=-4mm of FP]                      {Effect,\\systems};

\end{tikzpicture}
\end{document}

resultado refactorizado

información relacionada