아이들과 함께하는 버블/위성 다이어그램

Question 1

이번에는 Chat-GPT의 도움을 사용하지 않고 OP 답변을 리메이크합니다. 결과 코드는 더 짧고 더 명확합니다.

\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}

질문에 따르면 이미지에 검정색 배경이 있어야 하는지 명확하지 않습니다. 그렇다면 \end{tikzpicture}다음 코드 줄을 추가할 수 있습니다.

% 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);

Answer

이번에는 Chat-GPT의 도움을 사용하지 않고 OP 답변을 리메이크합니다. 결과 코드는 더 짧고 더 명확합니다.

\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}

질문에 따르면 이미지에 검정색 배경이 있어야 하는지 명확하지 않습니다. 그렇다면 \end{tikzpicture}다음 코드 줄을 추가할 수 있습니다.

% 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);

Question 2

마침내 Chat-GPT의 도움으로 TikZ로 이 작업을 수행할 수 있었습니다. 참고할 결과와 코드는 다음과 같습니다.

\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}

Answer

마침내 Chat-GPT의 도움으로 TikZ로 이 작업을 수행할 수 있었습니다. 참고할 결과와 코드는 다음과 같습니다.

\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}

Question 3

code-noise이 ChatGPT 접근 방식으로 생성되고 남은 양을 표시하기 위해 다음은 몇 가지 리팩토링입니다.OP가 솔루션으로 게시한 코드.

보시다시피 남은 것은 some residual nastiness선택한 접근 방식에서 드러납니다. 즉, 더 나은 가독성을 위해 추가로 리팩토링하고 싶지만 노드 설명은 지금과 마찬가지로 좋기도 하고 나쁘기도 합니다. 즉, 훨씬 더 많은 노력을 들이지 않고는 해당 명령문을 이해하기 쉽고 깔끔한 형식의 한 줄짜리 문장으로 만드는 것이 어렵습니다.

left-to-right orientation또한 아래에서 위로 방향이 된 원본 스케치는 어떻게 되었는지 궁금합니다 . 게시된 GPT 코드보다 리팩토링 후에 변경하기가 더 쉬울 수 있습니다.

자세히 알아보지는 않았지만 postactionSAT와 CSAT 스타일에 왜 이것이 실제로 필요한지 궁금합니다.

As a rule of thumb:

코드의 모양과 느낌이 보기 흉하다면 코드가 잘못되었거나 변경하기 어려울 수 있습니다.
코드가 깔끔하게 배열되어 있으면 컴파일하면 더 정확할 것입니다.
따라서 이 모든 것은 오류를 방지하는 단계이며 상황이 발전함에 따라 변화를 장려합니다.

BTW, code-noise예를 들어 나쁜 가독성은 거꾸로 작업할 때 더 적습니다.

포스트 노드 등 먼저
스타일을 잇달아 소개하다
지금 게시하는 코드는 더 좋지만 이 관점에서는 여전히 충분하지 않습니다.

\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}

Answer