Is it possible to generate pie chart with SEDE built-in graph tool?

Question

Sometime I would like to explore data in pie chart, for instance, top 10 users posts proportion.

for that case line graph (https://data.stackexchange.com/ell/query/1206772/desc#graph) does not make sense.

Answer 1

SEDE only supports one graph type, and that is a line graph.

If you want anything fancier you need to resort to off-site tooling. One option is to export the resultset to a CSV (click the download CSV link at the top right of result grid) and then use your favorite Excel program to import the CSV and produce a chart there.

Alternatively you can output the resultset as JSON and then feed it into one of the graphical javascript libraries that exist, for example D3.js.

Here is an example of a query that produces JSON.

Its output goes copy-paste after the var data = in the below snippet and then you have to use the API from D3 to get anything on the screen.

The below example is based off this tutorial by Yan Holtz

// pasted from SEDE
// do not forget to adjust the dataValue 
// and labelValue functions with the actual
// attribute names you have here;
var data = [{"post_count":4200,"OwnerUserId":10264},{"post_count":3325,"OwnerUserId":32},{"post_count":2730,"OwnerUserId":42184},{"post_count":2674,"OwnerUserId":26439},{"post_count":2326,"OwnerUserId":24231},{"post_count":2228,"OwnerUserId":3187},{"post_count":2155,"OwnerUserId":113},{"post_count":1592,"OwnerUserId":5144},{"post_count":1360,"OwnerUserId":30978},{"post_count":1351,"OwnerUserId":803}] 


function dataValue(record) {
  // post_count is the value
  return record.value.post_count;
}

function labelValue(record) {
  // this makes the label
  // form OwnerUserId and Post_count
  return record.data.value.OwnerUserId 
       + ' (' 
       + record.data.value.post_count 
       + ')'; 
}

var pie = d3.pie().value(dataValue);

var dataBuilder = pie(d3.entries(data))

var svg = d3
  .select("#viz")
  .append("svg")
    .attr("width", 500)
    .attr("height", 500)
  .append("g")
    .attr("transform", "translate(250,250)");

var arcBuilder = d3.arc().innerRadius(0).outerRadius(200);
var arcTextBuilder = d3.arc().innerRadius(190).outerRadius(200);

svg.selectAll('foo')
   .data(dataBuilder)
   .enter()
   .append('path')
     .attr('d', arcBuilder)
     .attr("stroke", "black")
     .style("stroke-width", "2px")
     .style("opacity", 0.5);
 
 svg.selectAll('foo')
   .data(dataBuilder)
   .enter()
   .append('text')
     .text(labelValue)
   .attr("transform", function(d) { return "translate(" + arcTextBuilder.centroid(d) + ")";  })
   .style("text-anchor", "middle")
   .style("font-size", 14)

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

<div id="viz"></div>