31:T504,32:[] 2f:{"title":"Donut or Pie","cells":[{"id":0,"value":"# Donut or Pie\nThe traditional Pie graph, and related and somewhat more updated Donut graph (pie with an inner empty space, but it reads as more of a curved linear distance).","pinned":false,"hidden":false,"mode":"md"},{"id":37,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":42,"value":"$31","pinned":false,"hidden":false,"mode":"html"},{"id":56,"value":"### Get Data - US powerplants 2019, from the samples notebook\nyou can attach your own with File Attachments instead.","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"import {powerplants_2019} from \"@emfielduva/dvlib_sampledata\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"**Group the data with a sum (rollup)** so we have each fuel category with sum total net generation.","pinned":false,"hidden":false,"mode":"md"},{"id":16,"value":"rollupData = d3.rollups(powerplants_2019, v => d3.sum(v, d => toNum(d[\"Plant annual net generation (MWh)\"])), d => d[\"Plant primary fuel generation category\"]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":110,"value":"viewof table = Inputs.table(rollupData)","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"### import and run the dvDonut function","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"import {dvDonut} from \"@emfielduva/dvlib_layout\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"graph1Elem = d3.select(svgContainer).select(\"#layer1\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":36,"value":"donut = dvDonut(graph1Elem,rollupData,200,0);","pinned":true,"hidden":false,"mode":"ojs"},{"id":70,"value":"-----","pinned":false,"hidden":false,"mode":"md"},{"id":80,"value":"graph2Elem = d3.select(svgContainer).select(\"#layer2\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":74,"value":"rollupSorted = d3.sort(rollupData, (a,b) => d3.descending(a[1],b[1]));","pinned":true,"hidden":false,"mode":"ojs"},{"id":76,"value":"donut2 = dvDonut(graph2Elem,rollupSorted,200,10);","pinned":true,"hidden":false,"mode":"ojs"},{"id":325,"value":"----","pinned":false,"hidden":false,"mode":"md"},{"id":329,"value":"note colors can be handled through:\n- style classes (as in the example above), based on the data's key field\n- passing in a colorSet in the options, as either\n- - an array of colors: [\"red\",\"blue\",\"green\",\"cyan\", ...]\n - an existing color set like d3.schemeCategory10, d3.schemeAccent, or others.\n - a custom key:value set such as {\"COAL\":\"blue\", \"OIL\":\"red\", \"HYDRO\":\"orange\"}","pinned":false,"hidden":false,"mode":"md"},{"id":22,"value":"------","pinned":false,"hidden":false,"mode":"md"},{"id":18,"value":"import {toNum} from \"@emfielduva/dvlib\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}