logo diagram

docs/components/LogoDiagram.vue

@@ -0,0 +1,45 @@
+<template>
+  <svg viewBox="0 -10 116 111" width="400" style="margin: 1em 0; max-width: 100%; overflow: visible; height: auto;">
+    <path fill="currentColor" fill-opacity="0.3" d="M0,0 h7.75 a45.5,45.5 0 1 1 0,91 h-7.75 v-20 h7.75 a25.5,25.5 0 1 0 0,-51 h-7.75 z m36.2510,0 h32 a27.75,27.75 0 0 1 21.331,45.5 a27.75,27.75 0 0 1 -21.331,45.5 h-32 a53.6895,53.6895 0 0 0 18.7464,-20 h13.2526 a7.75,7.75 0 1 0 0,-15.5 h-7.75 a53.6895,53.6895 0 0 0 0,-20 h7.75 a7.75,7.75 0 1 0 0,-15.5 h-13.2526 a53.6895,53.6895 0 0 0 -18.7464,-20 z" />
+    <g fill="none" stroke="currentColor" stroke-width="0.2" stroke-opacity="0.3">
+      <line x1="-100" x2="110" y1="0" y2="0" />
+      <line x1="-100" x2="110" y1="20" y2="20" />
+      <line x1="-100" x2="110" y1="35.5" y2="35.5" />
+      <line x1="-100" x2="110" y1="45.5" y2="45.5" />
+      <line x1="-100" x2="110" y1="55.5" y2="55.5" />
+      <line x1="-100" x2="110" y1="71" y2="71" />
+      <line x1="-100" x2="110" y1="91" y2="91" />
+      <line x1="0" x2="0" y1="-10" y2="101" />
+      <line x1="7.75" x2="7.75" y1="-10" y2="101" />
+      <line x1="60.5" x2="60.5" y1="-10" y2="101" /> <!-- XXX  -->
+      <line x1="68.25" x2="68.25" y1="-10" y2="101" />
+      <line x1="96" x2="96" y1="-10" y2="101" />
+    </g>
+    <g fill="var(--vp-c-brand)">
+      <circle cx="7.75" cy="45.5" r="0.75" />
+      <circle cx="68.25" cy="27.75" r="0.75" />
+      <circle cx="68.25" cy="63.25" r="0.75" />
+    </g>
+    <g fill="currentColor">
+      <!-- Intersecting horizontal lines with the r=53.6895 circle. -->
+      <circle cx="36.2510" cy="0" r="0.75" />
+      <circle cx="54.9974" cy="20" r="0.75" />
+      <circle cx="60.5" cy="35.5" r="0.75" />
+      <circle cx="60.5" cy="55.5" r="0.75" />
+      <circle cx="54.9974" cy="71" r="0.75" />
+      <circle cx="36.2510" cy="91" r="0.75" />
+      <!-- Intersecting the two r=27.75 circles. -->
+      <circle cx="89.5807" cy="45.5" r="0.75" />
+    </g>
+    <g fill="none" stroke="currentColor" stroke-width="0.2">
+      <circle cx="7.75" cy="45.5" r="25.5" />
+      <circle cx="7.75" cy="45.5" r="45.5" />
+      <!-- Radius is computed to intersect at the intended x=60.5. -->
+      <circle cx="7.75" cy="45.5" r="53.6895" />
+      <circle cx="68.25" cy="27.75" r="7.75" />
+      <circle cx="68.25" cy="27.75" r="27.75" />
+      <circle cx="68.25" cy="63.25" r="7.75" />
+      <circle cx="68.25" cy="63.25" r="27.75" />
+    </g>
+  </svg>
+</template>

docs/what-is-d3.md

@@ -4,6 +4,7 @@ import * as Plot from "@observablehq/plot";
 import * as d3 from "d3";
 import {useData} from "vitepress";
 import {computed} from "vue";
+import LogoDiagram from "./components/LogoDiagram.vue";
 import PlotRender from "./components/PlotRender.js";
 
 const {site: {value: {themeConfig: {sidebar}}}} = useData();
@@ -25,6 +26,8 @@ const paths = computed(() => {
 
 # What is D3?
 
+<LogoDiagram />
+
 **D3** (or **D3.js**) is a free, open-source JavaScript library for visualizing data. Its low-level approach built on web standards offers unparalleled flexibility in authoring dynamic, data-driven graphics. For more than a decade D3 has powered groundbreaking and award-winning visualizations, become a foundational building block of higher-level chart libraries, and fostered a vibrant community of data practitioners around the world.
 
 D3 “slingshotted the field into growth, diversification and creativity that has been unprecedented” and “changed how millions of data visualizations are created across newsrooms, websites, and personal portfolios,” remarked the Information is Beautiful [2022 Test of Time Award](https://nightingaledvs.com/information-is-beautiful-awards-test-of-time/). The IEEE VIS [2021 Test of Time Award](https://ieeevis.org/year/2021/info/awards/test-of-time-awards) noted, “By creating a framework that was compelling and easy for web developers to use to author interactive visualizations, the authors have undeniably helped to bring data visualization to the mainstream. [D3] is a cornerstone contribution to this conference specifically and more generally to the success of our field as a whole.”