Dynamic Vector Graphics

Inline SVG

This example shows how an inline SVG tag can be used to embed dynamic graphics.


<svg id="mydvg">...</svg>
<script>
  const mydvg = new dvg.DVG(document.getElementById('mysvg'))
  mydvg.update({
    values: [['Foo', 42]],
    columns: ['Char', 'Num {{0..100|f:dollar}}'],
  })
</script>

Change the names and values of the variables used by the graphic:

{{#0|r:0}} {{#0|r:1}} {{@0}} : {{#1|c}} {{@0}} : {{#1|c}} {{@0}} : {{#1|c}} {{@0|n}}/{{#0|n}} : {{@0}}/{{#0}}

External SVG

This example shows how an external svg can be used to embed dynamic graphics.


<div id="mydvg"></svg>
<script>
  const mydvg = new dvg.DVG(
    document.getElementById('mydvg'),
    { svg: 'path/to/file.svg' }
  )
  mydvg.update({
    values: [['Foo', 42]],
    columns: ['Char', 'Num {{0..100|f:dollar}}'],
  })
</script>

Change the names and values of the variables used by the graphic below:

Using CSV

This example shows how a csv string can represent the data. Change CSV used by the graphic:

Using Modeled Data

This example shows how a structured model represent the data.


<div id="mydvg"></svg>
<script>
  const mydvg = new dvg.DVG(
    document.getElementById('mydvg'),
    { svg: 'path/to/file.svg' }
  )
  mydvg.update({
    values: [['Foo', 42]],
    columns: ['Char', 'Num {{0..100}}'],
  })
</script>

Change the names and values of the variables used by the graphic below:

Change the formats for numberic columns below:

Default SVG

If a DVG class is initialized with no element it will replace the body of the page. And if it is provided no URL to an svg it will look for "./index.svg". 


<script>
  const mydvg = new dvg.DVG()
  mydvg.update({
    values: [['Foo', 42]],
    columns: ['Char', 'Num {{0..100|f:dollar}}'],
  })
</script>

This can be convenient for cases where the entire page is an infographic. The link below is to a page using the defaults:

Default SVG Example

Test SVG

This example utilizes many of the features of the DVG library. Change the names and values of the variables used by the graphic below: