Skip to content

🛠 Graphics Development ​

TIP

This section is for Dev, not UX, ie. this section is about how to make the graphics and not BETAGRAPHY itself.

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

🛠

DevNotes ​

  • Hatching

DevState ​

py
`TagsToHeaders: False`

PageTags

  • "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.PhraseNumberLabelError"
  • "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.PhraseNumberLabel"
  • "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.MotoLabel"
  • "Dev.Element.ElementDiagram.Labels.TextLabel.ViaLineLabel"
  • "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.ElementPhrase"
  • "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"
  • "Via.LandInfluenceVia.Overview"