2b:null 2c:["$","title",null,{"children":"UnPieChart | johnwelford | Observable"}] 31:T538,segPxls = { // segment const cv = window.cv; var segMask = cv.Mat.zeros(src.rows, src.cols, cv.CV_8U); // mask for increasing segment from start point var segCrop = new cv.Mat(src.rows, src.cols, cv.CV_8U); // setup segment cropped image var segCropCombine = new cv.Mat(src.rows, src.cols, cv.CV_8U); // setup segment cropped image var segPxls = []; // store details for each segment for (let seg = segStep; seg <= 360; seg = seg + segStep) { circle.forEach( d => { cv.ellipse(segMask, {x: d.x, y: d.y}, {width: d.radius, height: d.radius}, 0, 0, seg, [255, 255, 255, 255], -1, 8, 0); // draw segment mask } ) cv.bitwise_and(totalMask, segMask, segCropCombine); // combine mask with segment mask cv.subtract(totalMask, segMask, totalMask); // apply mask to segment mask segCrop = cv.Mat.zeros(src.rows, src.cols, cv.CV_8U); // clear segment cropped image src.copyTo(segCrop, segCropCombine); // apply segment mask to source // get segment pixels var segPix = []; for (let i = 0; i < src.data.length/4; i++) { if (segCropCombine.data[i]>0) segPix.push([ src.data[i*4], src.data[i*4 + 1], src.data[i*4 + 2], ]); } segPxls.push(segPix); // store segment pixels } cv.imshow('segment', segCrop); return segPxls; }32:T5a7,pie = { const cv = window.cv; // find values by looking for discontinuities const colDifThresh = 7; let values = []; let thisVal = {startAng: 0, endAng: segStep, colour: d3.rgb(segValue[0][0],segValue[0][1],segValue[0][2]), segColours: [d3.rgb(segValue[0][0],segValue[0][1],segValue[0][2])]}; for (let i = 1; i < segValue.length; i++) { if (LABdistance(segValue[i-1],segValue[i]) > colDifThresh) { // segment is a new value values.push(thisVal); // record last value thisVal = {startAng: segStep*i, endAng: segStep*(i+1), colour: d3.rgb(segValue[i][0],segValue[i][1],segValue[i][2]), segColours: [d3.rgb(segValue[i][0],segValue[i][1],segValue[i][2])]}; // start new value } else { // segment continues old value thisVal.endAng = thisVal.endAng + segStep; // increment value end point thisVal.segColours.push(d3.rgb(segValue[i][0],segValue[i][1],segValue[i][2])); // add in the colour of this segment } } // wrap around from end to start? if (LABdistance(segValue[0],segValue[segValue.length-1]) > colDifThresh) { // start is different from end values.push(thisVal); // record last value } else { // start continues from end, so merge values[0].startAng = thisVal.startAng; values[0].segColours = thisVal.segColours.concat(values[0].segColours); } // calculate percentages values.map( d => {d.fraction = d.segColours.length*segStep/360; return d;}); return values; }33:[] 2f:{"id":"538f6914ddac767a","slug":"unpiechart","title":"UnPieChart","thumbnail":"807ade39f55b1c91c308dbe06cc6f459efc628c37d38385ec4ceaabbf26e58d5","access_level":"public","create_time":"$D2020-06-20T09:59:22.019Z","update_time":"$D2020-12-24T01:23:24.208Z","view_time":null,"first_public_time":"$D2020-06-21T09:23:51.472Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"6c1f25ef90c27e9b","login":"johnwelford","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3bfe9ac5315b1340bf914c84d1ed0ae174327f3802f4ba068fcaa4c223cfb471","tier":"starter_2024"},"version":497,"publish_version":497,"role":null,"authored":false,"authors":[{"type":"individual","id":"629158c5ced3958f","login":"johnwelford","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3bfe9ac5315b1340bf914c84d1ed0ae174327f3802f4ba068fcaa4c223cfb471","tier":null}],"members":[{"type":"individual","id":"629158c5ced3958f","login":"johnwelford","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3bfe9ac5315b1340bf914c84d1ed0ae174327f3802f4ba068fcaa4c223cfb471","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"UnPieChart","cells":[{"id":0,"value":"md`# UnPieChart\nUndoing crappy pie charts.\n\nDetecting the pie chart and finding its segment values from an image.\n\nOpenCV currently won't load whilst there are other imports active. Comment out the other imports, refresh the page, wait for OpenCV to load (it takes a while), then uncomment the other imports.\n\nOccasionally processing fails and the page requires refresh (memory issues?)\n\nSelect a chart below:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"viewof selectedPie = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"md`Input:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"image = new Promise((resolve, reject) => {\n const image = new Image;\n image.crossOrigin = \"anonymous\";\n image.src = selectedPie;\n image.onload = () => resolve(image);\n image.onerror = reject;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":331,"value":"md`Extracted:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"piechart ={\n const svg = d3.select(DOM.svg(image.width, image.height))\n \n const g = svg.append('g')\n \t.attr('transform', `translate(${image.width/2}, ${image.height/2})`)\n\n let arc = g.selectAll('.arc')\n \t.data(pieFn(pie))\n \t.enter()\n .append('g')\n \t.classed('arc', true)\n \n arc.append('path')\n \t.attr('d', path)\n \t.attr('fill', (d,i) => colourPie(i))\n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":407,"value":"md`## Processing`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"html`\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

Greyscale:	Blur:

Edges:	Detected circle:

Cropped:	Final segment:

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":420,"value":"src = { \n const cv = window.cv; // BUG!!! This will need to be reevaluated after loadOpenCv returns successfully\n var src = cv.imread(image); // load source\n console.log('image width: ' + src.cols + '\\n' +\n 'image height: ' + src.rows + '\\n' +\n 'image size: ' + src.size().width + '*' + src.size().height + '\\n' +\n 'image depth: ' + src.depth() + '\\n' +\n 'image channels ' + src.channels() + '\\n' +\n 'image type: ' + src.type() + '\\n')\n return src;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":423,"value":"grey = { // convert input to greyscale - seems to be better definition against the background than in HSV\n const cv = window.cv;\n var grey = src.clone(); // setup greyscale image\n cv.cvtColor(src, grey, cv.COLOR_BGR2GRAY, 0);\n cv.imshow('greyscale', grey);\n return grey;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":431,"value":"blur = { // blur image\n const cv = window.cv;\n const ksize = {width : 7, height : 7}; // blurring kernel size\n const sigma = [0, 0]; // gaussian kernal standard deviation [x, y]\n const borderType = cv.BORDER_DEFAULT; // blur pixel extrapolation method\n var blur = src.clone(); // setup blurred image\n cv.GaussianBlur(grey, blur, ksize, sigma[0], sigma[1], borderType);\n cv.imshow('blur', blur);\n return blur;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":439,"value":"{ // perform edge detection (for display only, incorporated within HoughCircles algorithm already)\n const cv = window.cv;\n var canny = src.clone(); // setup canny edge detected image - for display only\n cv.Canny(blur, canny, param1/2, param1, 3, false);\n cv.imshow('edges', canny);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":441,"value":"param1 = 10 // a number forwarded to the Canny edge detector (applied to a grayscale image) that represents the threshold1 passed to Canny(...). Canny uses that number to guide edge detection","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":446,"value":"circlesMat = { // find circles\n const cv = window.cv;\n const dp = 1; // resolution of accumulator array set to find perfect circles\n const minDist = Math.max(src.rows, src.cols); // distance from one circle to another is the largest dimension of the image - forcing only a single detection\n const param2 = 1; // low accumulator threshold for the cv2.HOUGH_GRADIENT method meaning more detection\n const pieImageLimits = [0.05, 0.98]; // pie should be between 5% and 98% of the minimum image dimension\n const minRadius = pieImageLimits[0]*Math.min(src.rows, src.cols)/2;\n const maxRadius = pieImageLimits[1]*Math.min(src.rows, src.cols)/2;\n const circles = new cv.Mat(); // setup circles vector \n cv.HoughCircles(blur, circles, cv.HOUGH_GRADIENT, dp, minDist, param1, param2, minRadius, maxRadius);\n return circles;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":454,"value":"circle = { // draw circles\n let circleOut = []; // store circle details\n var detect = src.clone(); // setup detection image - for display only\n for (let i = 0; i < circlesMat.cols; ++i) {\n let x = circlesMat.data32F[i * 3];\n let y = circlesMat.data32F[i * 3 + 1];\n let radius = circlesMat.data32F[i * 3 + 2];\n circleOut.push({x: x, y: y, radius: radius});\n }\n return circleOut;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"totalMask = { // draw circles and build mask\n const cv = window.cv;\n var totalMask = cv.Mat.zeros(src.rows, src.cols, cv.CV_8U); // setup mask\n const pieCentre = 0.2; // remove 20% of radius in the centre\n var detect = src.clone(); // setup detection image - for display only\n circle.forEach( d => {\n cv.circle(detect, {x: d.x, y: d.y}, d.radius, [255, 0, 0, 255], 1, 8, 0); // outline\n cv.circle(detect, {x: d.x, y: d.y}, 1, [0, 255, 0, 255], -1, 8, 0); // centre dot\n cv.circle(totalMask, {x: d.x, y: d.y}, d.radius, [255, 255, 255, 255], -1, 8, 0); // make mask\n cv.circle(totalMask, {x: d.x, y: d.y}, d.radius*pieCentre, [0, 0, 0, 0], -1, 8, 0); // remove centre of mask\n })\n cv.imshow('output', detect); \n return totalMask;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":468,"value":"{ // crop image - for display only\n const cv = window.cv; \n var crop = new cv.Mat(src.rows, src.cols, cv.CV_8U); // setup cropped image\n src.copyTo(crop, totalMask);\n cv.imshow('crop', crop);\n return crop;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":477,"value":"segStep = 3 // degrees","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":473,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"segValue = { \n const cv = window.cv; \n var segValue = [];\n segPxls.forEach( segment => {\n let means = kmeans(segment, 5, null, 8, 10);\n segValue.push(means.centroids.reduce((prev, current) => (prev.points.length > current.points.length) ? prev : current)); // keep centroid with the most pixels\n })\n return segValue;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"md`## Variables`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"pieImages = [\n 'https://upload.wikimedia.org/wikipedia/commons/thumb/d/db/English_dialects1997.svg/440px-English_dialects1997.svg.png',\n 'https://upload.wikimedia.org/wikipedia/en/thumb/3/39/Example_of_a_doughnut_chart.png/440px-Example_of_a_doughnut_chart.png',\n 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/2e/Pie_chart_EP_election_2004.svg/440px-Pie_chart_EP_election_2004.svg.png',\n 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/9c/Badpie.png/440px-Badpie.png',\n 'https://3.bp.blogspot.com/_xG82RFqLZfg/SUmGuoXNQAI/AAAAAAAAChQ/QQp7goKiWeM/s400/Natural_disaster_causes_of_death.jpg',\n 'https://f1000researchdata.s3.amazonaws.com/manuscripts/16456/cc720b93-319d-47a7-9322-c61b39911733_figure2.gif',\n 'https://neilpatel.com/wp-content/uploads/2018/02/piechart.jpg'\n];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"LABdistance = (a, b) => { // convert to d3 colours to use CIELAB CIEDE2000 distance measure\n return distance(d3.rgb(a[0],a[1],a[2]), d3.rgb(b[0],b[1],b[2]));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"pieFn = d3.pie()\n\t.value(d => d.fraction)\n .sort(null)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"colourPie = (d, i) => pie[d].colour.formatRgb()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":372,"value":"radius = 0.4*Math.min(image.width, image.height)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":350,"value":"path = d3.arc()\n .outerRadius(radius - 10)\n .innerRadius(0)\n .startAngle(function(d) { return d.startAngle + (Math.PI/2)+ (pie[0].startAng * Math.PI/180); })\n .endAngle(function(d) { return d.endAngle + (Math.PI/2)+ (pie[0].startAng * Math.PI/180); })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"styling = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"md`## Import`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"import {loadOpenCv} from '@johnwelford/hough-circle-transforms'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"loadOpenCv","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"// import {kmeans, d3} with {LABdistance as distance} from '@romaklimenko/finding-palettes-of-dominant-colors-with-the-k-means-cluste'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"// import {distance} from '@severo/color-distance'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"