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"