Diagram styles

A luminaire is a complete light fitting. A catalogue can hold 500 of them.

Each one needs a polar diagram. Many need a cone diagram or an isolux diagram.

Diagrams from different laboratories and programs look different. Side by side, they make a catalogue look untidy.

Decide the style one time. Write the decisions down. Then apply them to every diagram.

A style never changes the data. Every diagram on this page draws the same measured values.

Technical

Black on white, with no colour. A solid line and a dashed line tell the planes apart. It survives a photocopy.

Minimal

One accent colour and a light fill. The shape reads at thumbnail size, for example in a web shop.

Dark

Use it for dark screens and dark data sheets. It uses colours made for a dark background, not inverted colours.

Print

A serif typeface and heavy lines for a printed catalogue. It stays legible in greyscale.

Polar diagram

Cone diagram

Isolux diagram

A diagram holds many small numbers. Choose a typeface with clear digits, and use the typeface of your data sheet if it has them.

A monospaced typeface gives every digit the same width. It looks technical, and columns of numbers line up.

Keep the smallest text legible at the final size. Text that reads well on a large print can be too small in a web image.

Lines must stand out from the background. WCAG is the accessibility guideline of the W3C. It asks for a contrast ratio of 3:1 for the lines of a graphic, and 4.5:1 for text.

Two planes need two clearly different lines. Do not rely on colour alone. Some readers cannot tell red from green.

A dash pattern is a second signal. It also survives a greyscale print.

The curve is the message. Make it heavier than the grid.

Choose the weight for the final size. A thin line disappears in a small image. A heavy line hides detail in a large one.

Use round values for the rings: 100, 200, 500. A reader can then estimate a value between two rings.

Few rings give a calm picture. Many rings let the reader take more exact values.

Two diagrams with different scales are hard to compare. Within one product family, consider one fixed scale.

• A polar diagram states the unit, cd or cd/klm, and names the planes.
• A cone diagram states the beam angle and the unit of each column.
• An isolux diagram states the mounting height, the unit, and the direction of plane C0.
• Every diagram can carry the product name or the catalogue number, so that it is not mixed up.

• Build each name from a pattern. Use the name of the photometric file, or a field from inside it, such as the catalogue number. You can combine fields. Then add the diagram type.
• Keep upper and lower case as they are. Many product databases and web shops match files by the exact name.
• Change only what breaks a file name. Windows does not allow the characters / \ : * ? " < > | or control characters.
• Windows does not allow a space or a full stop at the end of a name. It also reserves names such as CON and LPT1.
• Check for duplicates without regard to case. By default, Windows and macOS treat Ex-1.svg and ex-1.svg as one file. Add a number to the second one.
• Put the theme in a folder name, not in the file name. The file names then stay equal across themes.
• Keep a table that maps each photometric file to each diagram file.

SVG

A vector format. It stores lines and text, so it is sharp at any size and the file is small. Use it for web pages and for print layouts that accept it.

PNG

A raster format without quality loss. It keeps thin lines clean and allows a transparent background. Use it where SVG is not accepted, such as older office programs.

JPG

A raster format made for photographs. Its compression leaves marks around thin lines and text. It has no transparent background. Use it only when a system accepts nothing else.

A raster image has a fixed number of pixels. The resolution, in dots per inch (dpi), says how densely a printer places them.

Pixels = size in inches × dpi. One inch is 25.4 mm.

The screen and office values are common practice, not a standard. The print values come from publisher guides.

Publishers ask for 300 dpi for photographs. For line drawings they ask for 1000 dpi or for a vector file. A diagram is a line drawing.

• W3C, Understanding WCAG 2.2 Success Criterion 1.4.11, Non-text Contrast. The 3:1 rule for graphical objects, with the lines of a graph as an example.
• W3C, Understanding WCAG 2.2 Success Criterion 1.4.3, Contrast (Minimum). The 4.5:1 rule for text.
• W3C, Scalable Vector Graphics (SVG) 2. The SVG format.
• W3C, Portable Network Graphics (PNG) Specification, Third Edition. PNG as a lossless raster format.
• JPEG committee, Overview of JPEG 1. JPEG as lossy compression for photographic images.
• MDN, Image file type and format guide. When to choose SVG, PNG, or JPEG.
• Microsoft Learn, Naming Files, Paths, and Namespaces. The reserved characters and names on Windows, and the advice not to assume case sensitivity.
• Apple, File system formats available in Disk Utility on Mac. The default Mac format is not case-sensitive.
• Cambridge University Press, Journals artwork guide. 300 dpi for halftone images, 1000 to 1200 dpi for line art, vector formats preferred.
• Elsevier, Artwork sizing. 300 dpi for halftone images and 1000 dpi for line art.