D3 Examples - Vega-Lite sort error Bl.ocks example

Vega-Lite sort error Bl.ocks example

Vega-Lite can't sort by subobject field

"y": { "field": "name", "type": "ordinal", "sort": { "order": "descending", "op": "sum", "field": "a.i" }, }

"field": "a\\.i" will work

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!

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdn.jsdelivr.net/npm/vega@3"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-lite@2"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-embed@3"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
    body {
      font-family: sans-serif;
    }
    
    .vega-actions a {
      padding: 0.2em;
    }
  </style>
</head>
​
<body>  
  <div class="row">
    <div class="col-sm-6">
      <h3> workaround</h3><div id="vis_no_error"></div>
      <script>
        const spec_no_error = "sort_no_error.vl.json";
        vegaEmbed('#vis_no_error', spec_no_error).catch(console.warn);
        </script>
      </div>
    <div class="col-sm-6">
      <h3> error</h3><div id="vis_error"></div>
      <script>
        const spec_error = "sort_error.vl.json";
        vegaEmbed('#vis_error', spec_error).catch(console.warn);
      </script>
     </div>
    </div>
  
​
  
​
</body>
    