Old school D3 from simpler times

All examples By author By category About

domoritz

Full window Github gist

Vega-Lite Locale Example

Vega-Lite Bl.ocks example.

You can go to the blockbuilder and to fork this block and create your own visualizations. Check out the Vega-Lite website for more information, tutorials, and documentation. Happy hacking!

forked from domoritz's block: Vega-Lite Bl.ocks example

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
	<script src="https://cdn.jsdelivr.net/npm/vega-lite@4"></script>
	<script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
</head>

<body>  
  <div id="vis"></div>
  
  <script>
    const spec = "line.vl.json";
  	vegaEmbed("#vis", spec, {
      timeFormatLocale: {
        // copied from https://github.com/d3/d3-time-format/blob/master/locale/it-IT.json
        "dateTime": "%A %e %B %Y, %X",
        "date": "%d/%m/%Y",
        "time": "%H:%M:%S",
        "periods": ["AM", "PM"],
        "days": ["Domenica", "Lunedì", "Martedì", "Mercoledì", "Giovedì", "Venerdì", "Sabato"],
        "shortDays": ["Dom", "Lun", "Mar", "Mer", "Gio", "Ven", "Sab"],
        "months": ["Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno", "Luglio", "Agosto", "Settembre", "Ottobre", "Novembre", "Dicembre"],
        "shortMonths": ["Gen", "Feb", "Mar", "Apr", "Mag", "Giu", "Lug", "Ago", "Set", "Ott", "Nov", "Dic"]
      }
    })
    	// result.view provides access to the Vega View API
      .then(result => console.log(result))
      .catch(console.warn);
  </script>
</body>

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-lite@4"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
</head>
​
<body>  
  <div id="vis"></div>
  
  <script>
    const spec = "line.vl.json";
    vegaEmbed("#vis", spec, {
      timeFormatLocale: {
        // copied from https://github.com/d3/d3-time-format/blob/master/locale/it-IT.json
        "dateTime": "%A %e %B %Y, %X",
        "date": "%d/%m/%Y",
        "time": "%H:%M:%S",
        "periods": ["AM", "PM"],
        "days": ["Domenica", "Lunedì", "Martedì", "Mercoledì", "Giovedì", "Venerdì", "Sabato"],
        "shortDays": ["Dom", "Lun", "Mar", "Mer", "Gio", "Ven", "Sab"],
        "months": ["Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno", "Luglio", "Agosto", "Settembre", "Ottobre", "Novembre", "Dicembre"],
        "shortMonths": ["Gen", "Feb", "Mar", "Apr", "Mag", "Giu", "Lug", "Ago", "Set", "Ott", "Nov", "Dic"]
      }
    })
        // result.view provides access to the Vega View API
      .then(result => console.log(result))
      .catch(console.warn);
  </script>
</body>
    

https://cdn.jsdelivr.net/npm/vega@5

https://cdn.jsdelivr.net/npm/vega-lite@4

https://cdn.jsdelivr.net/npm/vega-embed@6