Branding Metadata: Logos, title, backgrounds, & effects

Branding: Logos, title, backgrounds, and effects

The dataset metadata section allows optionally setting visual attributes useful for styling and branding such as the page's favicon, custom logo, and background watermark. It augments controls settable by the URL API:

• bg: Page background, following a vertical layering of optional background color, gradient, and image

  {
    "metadata": {
      "bg": {
        "color": "#FF000",
        "image": {
          "blendMode": "normal",
          "url": "http://a.com/logo.png"
        },
        "gradient": {
          "kind": "linear",
          "position": 45,
          "stops": [ ["rgba(0,0,0,0)", "10%"], ["rgba(255,255,255,1)", "90%"] ]
        }
      }
    }
  }
  

• fg: Additional global graph settings

  {
    "metadata": {
      "fg": {
        "blendMode": "normal"
      }
    }
  }
  

• logo: Logo image url and formatting options

  {
    "metadata": {
      "logo": {
        "url": "http://a.com/logo.png",
        "autoInvert": true,
        "position": "bottom",
        "dimensions": {
          "maxWidth": 150,
          "maxHeight": 150
        },
        "style": {"opacity": 0.5}
      }
    }
  }
  

• page: Page favicon url and page title, with optional embedding of visualization name via macro "{{ name }}"

  {
    "metadata": {
      "page": {
        "favicon": "http://a.com/b.ico",
        "title": "My Site -- Visualization {{ name }}"
      }
    }
  } 
  

Metadata Schema

Logo style follows the CSS filter specification and CSS gradients. Blend mode values follow the CSS mix-blend-mode specification. For setting additional style properties, see the URL API and how to set encodings.

{
  "metadata": {
    ?"bg": {
      ?"color": str # 'red', '#FFF', 'rgb(1,2,3)',
      ?"image": {
        ?"blendMode": str,
        "url": str
      },
      ?"gradient": {
        "kind": "linear" | "radial",
        ?"position": int | str, # 90, "circle at center",
        "stops": [ [ str, str ]* ] # [ ["rgb(1,2,3)", "10%"], ... ]
      }
    },
    ?"fg": {
      ?"blendMode": str # "color-dodge", "multiply", ...
    },
    ?"logo": {
      "url": str,
      ?"autoInvert": bool,
      ?"position": 'top' | 'bottom',
      ?"dimensions": {
        ?"maxWidth": int,
        ?"maxHeight": int
      },
      ?"style": {
        ?"opacity": float,
        ?"grayscale": float,
        ?"brightness": float,
        ?"contrast": float,
        ?"hueRotate": int,
        ?"saturate": float,
      }
    },
    ?"page": {
      ?"favicon": str, # "http://a.com/b.ico"
      ?"title": str, # "Site -- {{ name }}"
    }
  }
}