Skip to content

🛠 Graphics Overview

All Diagrams are Graphics, but not all graphics are Diagrams. Graphics can be images, while diagrams must show how something functions.

D3.js

SVG

Svg EinsteinSpaghetti BetaDiagram

Animated SVG

Youtube Creators

Copy the animated and static data structures

Visual Language. What is their art category?

Network

Tree

  • Tree Growing

List

Highlight

Vox

Elections

JohnnyHarris

Maps

SearchParty

Maps

Shuttle Icons

Icons moving along a line like a metrocar or action potential

Veritasium

TedEd

Story transitions

MinuteVideos

Analog

Turn this map into an animation. Blender?

NYTgraphics

  • Me : Mike Bostock :: Johnny Harris : SearchPartyGuy

Curve

ThinCurve

BoldCurve

DottedCurve

DashedCurve


🛠 &&&
  • Hatching

  • "Dev.Element.ElementCard"

  • "Dev.Element.ElementDiagram.AnglePie"

  • "Dev.Element.ElementDiagram.Arrow"

  • "Dev.Element.ElementDiagram.ColorCode"

  • "Dev.Element.ElementDiagram.ConnectorLine"

  • "Dev.Element.ElementDiagram.ConnectorLine.ConnectorLineLabel"

  • "Dev.Element.ElementDiagram.ConnectorLine.GlialCell.CircleGlialCell"

  • "Dev.Element.ElementDiagram.ConnectorLine.GlialCell.SquareGlialCell"

  • "Dev.Element.ElementDiagram.ConnectorLine.GlialCell.TriangleGlialCell"

  • "Dev.Element.ElementDiagram.ConnectorLine.LinePattern"

  • "Dev.Element.ElementDiagram.ConnectorLine.LineThickness"

  • "Dev.Element.ElementDiagram.ElementArrow"

  • "Dev.Element.ElementDiagram.ElementDiagramError.Floating"

  • "Dev.Element.ElementDiagram.ElementDiagramError.FraseNumberLabelError"

  • "Dev.Element.ElementDiagram.ElementLine.ElementLineHighlight"

  • "Dev.Element.ElementDiagram.ElementTreeDiagram.ElementHierarchy.Overview"

  • "Dev.Element.ElementDiagram.ElementTreeDiagram.ElementHierarchy.SiblingElement"

  • "Dev.Element.ElementDiagram.ElementTreeDiagram.ElementHierarchy.SubElement"

  • "Dev.Element.ElementDiagram.ElementTreeDiagram.ElementHierarchy.SuperElement"

  • "Dev.Element.ElementDiagram.Hatching"

  • "Dev.Element.ElementDiagram.Labels"

  • "Dev.Element.ElementDiagram.Labels.ArrowLabel"

  • "Dev.Element.ElementDiagram.Labels.Lasso"

  • "Dev.Element.ElementDiagram.Labels.NumberLabel"

  • "Dev.Element.ElementDiagram.Labels.NumberLabel.FraseNumberLabel"

  • "Dev.Element.ElementDiagram.Labels.PictogramLabel"

  • "Dev.Element.ElementDiagram.Labels.TextLabel"

  • "Dev.Element.ElementDiagram.Labels.TextLabel.AbbreviatedTextLabel"

  • "Dev.Element.ElementDiagram.Labels.TextLabel.LandLabel"

  • "Dev.Element.ElementDiagram.Labels.TextLabel.MOTONLabel"

  • "Dev.Element.ElementDiagram.Labels.TextLabel.VIA_LineLabel"

  • "Dev.Element.ElementDiagram.LevelOfDetail"

  • "Dev.Element.ElementDiagram.Line.ConstructionLine"

  • "Dev.Element.ElementDiagram.Line.Overview"

  • "Dev.Element.ElementDiagram.Line.ProducedLine"

  • "Dev.Element.ElementDiagram.LineThickness"

  • "Dev.Element.ElementDiagram.Overview"

  • "Dev.Element.ElementDiagram.Scale"

  • "Dev.Element.ElementDiagram.Symbols"

  • "Dev.Element.ElementFrequency"

  • "Dev.Element.ElementGroup"

  • "Dev.Element.ElementPage"

  • "Dev.Element.ElementPictogram"

  • "Dev.Element.ElementAttributes"

  • "Dev.Element.ElementFrase"

  • "Dev.Element.ElementTimeline"

  • "Dev.Element.ElementTimeline.EinsteinSpaghetti"

  • "Dev.Element.ElementVariation"

  • "Dev.Element.Overview"

  • "Dev.Infographic"

  • "Dev.Infographic.Chart"

  • "Dev.Infographic.Checklist"

  • "Dev.Infographic.Collage"

  • "Dev.Infographic.ExplodedView"

  • "Dev.Infographic.FlowChart"

  • "Dev.Infographic.FlowChart.DecisionChart"

  • "Dev.Infographic.GridView.ElementGridView"

  • "Dev.Infographic.HistoryOfInformationGraphics.316"

  • "Dev.Infographic.HistoryOfInformationGraphics.336"

  • "Dev.Infographic.HistoryOfInformationGraphics.385"

  • "Dev.Infographic.HistoryOfInformationGraphics.402"

  • "Dev.Infographic.HistoryOfInformationGraphics.Overview"

  • "Dev.Infographic.List"

  • "Dev.Infographic.NightingaleChart"

  • "Dev.Infographic.PeriodicTable"

  • "Dev.Infographic.PieChart"

  • "Dev.Infographic.RankingChart"

  • "Dev.Infographic.Storyboard"

  • "Dev.Infographic.Sunburst"

  • "Dev.Infographic.Table"

  • "Dev.Infographic.Table.JoinTable"

  • "Dev.Infographic.TreeView"

  • "Dev.Infographic.TreeView.BranchHighlight"

  • "Dev.Infographic.TreeView.DirectedTreeView"

  • "Dev.Infographic.TreeView.NestedChart.NestedTreeView"

  • "Dev.Infographic.TreeView.NodeHighlight"

  • "Dev.Infographic.TreeView.NotDirectedTreeView"

  • "Dev.Infographic.TreeView.TreeChunk"

  • "Dev.Infographic.TreeView.TreeViewOverlap"

  • "Dev.Infographic.VoronoiDiagram"

  • "Dev.Infographic.Web"

  • "Dev.Poster"

  • "Dev.Scroll"