Skip to content

Commit 8197841

Browse files
GuyTheFlowerGuyTheFlower
committed
version 1 of the d3 pie chart reporting lib is now complete, next step integration with the mapping library
1 parent ae1ec63 commit 8197841

1 file changed

Lines changed: 62 additions & 46 deletions

File tree

‎learning_web_proj/d3_learning/pieChart.js‎

Lines changed: 62 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -18,14 +18,15 @@ var pieChart = (
1818
minimumChartSize, spaceBetween, chartWidth, chartHeight,
1919
dataRadiusScale, minChrtDims, percent2WidthDim,
2020
percent2HeightDim, numCols, numRows, chartsPositionalInfo,
21-
domainLabelValues ;
21+
domainLabelValues, chartCircumfrence;
2222
pieChrt = {}; // namespace
2323
svgParams = {};
2424
pieChrt.chartDataSets = []; // populated with an array of data sets. Each element in this array represents a chart to be drawn
2525
pieChrt.chartConfigs = []; // populated with an array of config parameters
2626
minChrtDims = 150;
27-
spaceBetween = 5;
28-
chartsPositionalInfo = [];
27+
spaceBetween = 7;
28+
chartsPositionalInfo = [];
29+
chartCircumfrence = 1; // where 1 is 180 and 2 = 360 degrees.
2930

3031
/**
3132
* When this method is called we know how many charts need to get created. This method will
@@ -56,10 +57,15 @@ var pieChart = (
5657
// Can't forsee a situation where we would have more than 10 charts per column.
5758
// norm is likely 2 - 4.
5859
svgParams.numRows = 1;
59-
svgParams.numCols = Math.floor((svgParams.width - spaceBetween) / ( minChrtDims + spaceBetween) ); // 2
60-
61-
svgParams.chartWidth = ((svgParams.width - spaceBetween - (spaceBetween * svgParams.numCols)) / svgParams.numCols);
60+
svgParams.numCols = Math.floor((svgParams.width - spaceBetween) / ( minChrtDims + spaceBetween ) ); // 2
61+
// TODO: for now going to just assume either a 180 or 360 degree chart. Should really put in
62+
// logic that allows for any angle chart, and calculates the spacign for this correctly.
63+
svgParams.chartWidth = ( ( svgParams.width - spaceBetween - ( spaceBetween * svgParams.numCols ) ) / svgParams.numCols );
6264
svgParams.chartHeight = svgParams.chartWidth;
65+
if (chartCircumfrence <= 1) {
66+
svgParams.chartHeight = svgParams.chartHeight / 2;
67+
}
68+
6369
// if there are 2 columns there will be space in between on the most left and right and the middle
6470
// upper left coordinates of the current chart.
6571
curX = spaceBetween;
@@ -93,7 +99,7 @@ var pieChart = (
9399
chartsPositionalInfo.push(chrtDims);
94100
curCol += 1
95101
}
96-
svgParams.height = (( svgParams.numRows * spaceBetween ) + (svgParams.chartWidth * svgParams.numRows) ) + spaceBetween;
102+
svgParams.height = (( svgParams.numRows * spaceBetween ) + (svgParams.chartHeight * svgParams.numRows) ) + spaceBetween;
97103
}
98104

99105
/**
@@ -157,15 +163,16 @@ var pieChart = (
157163
// Step 2, create various calculators to translate between data values,
158164
// and angles, radian that are used to represent them on the screen.
159165
// 2a. angle scale - calculates angle based on a data value.
160-
angleScale = d3.scale.linear().domain([0, maxDomain]).range([0, 1 * Math.PI]);
166+
angleScale = d3.scale.linear().domain([0, maxDomain]).range([0, chartCircumfrence * Math.PI]);
161167
// 2b. scale starts at 270 through to 90. - radian offset is 90 degrees in radians
162168
radianOffSet = 90 * (Math.PI / 180);
163169
// Always want to express dimensions from here on forth as percentages of
164170
// the total size allocated for the chart. This function will translate
165171
// percentage values to chart dimensional units.
166172
percent2WidthDim = d3.scale.linear().domain([0, 100]).range([0, svgParams.chartWidth / 2 ]);
167-
percent2HeightDim = d3.scale.linear().domain([0, 100]).range([0, svgParams.chartHeight / 2 ]);
168-
173+
// percent2HeightDim = d3.scale.linear().domain([0, 100]).range([0, svgParams.chartHeight / 2 ]);
174+
percent2HeightDim = d3.scale.linear().domain([0, 100]).range([0, svgParams.chartHeight / chartCircumfrence ]);
175+
169176
// 2c. radius scale, used to calculate minium and maxium raduses for arcs
170177
// input values are percentages.
171178
dataRadiusScale = d3.scale.linear().domain([0, data.length ]).range([percent2WidthDim(15), percent2HeightDim(70)]);
@@ -318,6 +325,25 @@ var pieChart = (
318325
return ticTextArc;
319326
}
320327

328+
/**
329+
* Recieves a chart Location object. Using this and
330+
* the total circumfrance of the current chart returns
331+
* the offset coordinates for where the chart should be
332+
* positioned on the page.
333+
*/
334+
function caluclateXYOffsets(chrtLoc) {
335+
var xOffset, yOffset, offsets;
336+
offsets = {};
337+
offsets.x = ((chrtLoc.xmax - chrtLoc.xmin) / 2 ) + chrtLoc.xmin;
338+
offsets.y = ((chrtLoc.ymax - chrtLoc.ymin) ) + chrtLoc.ymin;
339+
if (chartCircumfrence > 1) {
340+
offsets.y = ((chrtLoc.ymax - chrtLoc.ymin) / 2) + chrtLoc.ymin;
341+
}
342+
console.log('xOffset ' + xOffset);
343+
console.log('yOffset ' + yOffset);
344+
return offsets;
345+
}
346+
321347
/**
322348
* @param {Object[]} data
323349
* @param {String} data.label - The value that will be used to label the axis
@@ -336,12 +362,9 @@ var pieChart = (
336362
* @param {number} offsets.y - Ditto as above but for Y.
337363
*/
338364
function drawDataArc(data, arc, grpElem, chrtLoc) {
339-
var xOffset, yOffset;
340-
xOffset = ((chrtLoc.xmax - chrtLoc.xmin) / 2 ) + chrtLoc.xmin;
341-
yOffset = ((chrtLoc.ymax - chrtLoc.ymin) / 2) + chrtLoc.ymin;
342-
console.log('xOffset ' + xOffset);
343-
console.log('yOffset ' + yOffset);
344-
365+
var offsets, transformText;
366+
offsets = caluclateXYOffsets(chrtLoc);
367+
transformText = 'translate('+ offsets.x +', '+ offsets.y +')';
345368
grpElem.selectAll('path')
346369
.data(data)
347370
.enter()
@@ -353,16 +376,15 @@ var pieChart = (
353376
.style('fill', function(d) {
354377
return d.color;
355378
})
356-
.attr("transform", 'translate('+ xOffset +', '+ yOffset +')'); // 300, 200
379+
.attr("transform", transformText); // 300, 200
357380
//.attr("transform", 'translate('+ chartWidth +', '+ chartHeight +')'); // 300, 200
358381
}
359382

360383
function drawLabelDataArc(data, arc, groups, chrtLoc, anchorText) {
361384
// start by drawing the hidden arc
362-
var xOffset, yOffset, labelText;
363-
364-
xOffset = ((chrtLoc.xmax - chrtLoc.xmin) / 2) + chrtLoc.xmin;
365-
yOffset = ((chrtLoc.ymax - chrtLoc.ymin) / 2) + chrtLoc.ymin;
385+
var offsets, transformText, labelText;
386+
offsets = caluclateXYOffsets(chrtLoc);
387+
transformText = 'translate('+ offsets.x +', '+ offsets.y +')';
366388
// define the path along the arc, and create the anchors for the text
367389
groups.dataLabelArc.selectAll('path')
368390
.data(data)
@@ -373,7 +395,7 @@ var pieChart = (
373395
return anchorText + i;
374396
})
375397
.style("opacity", 0.0) // needs to be edited after debugging
376-
.attr('transform', 'translate('+ xOffset + ',' + yOffset + ')');
398+
.attr('transform', transformText);
377399

378400
labelText = groups.dataLabelText.selectAll('text')
379401
.data(data)
@@ -406,46 +428,41 @@ var pieChart = (
406428
*
407429
*/
408430
function drawBigTics(bigTicsArc, groups, chrtLoc) {
409-
var bigTics, xOffset, yOffset, translateString;
410-
xOffset = ((chrtLoc.xmax - chrtLoc.xmin) / 2) + chrtLoc.xmin;
411-
yOffset = ((chrtLoc.ymax - chrtLoc.ymin) / 2) + chrtLoc.ymin;
412-
translateString = "translate(" + xOffset + " , " + yOffset +")";
431+
var offsets, transformText, bigTics;
432+
offsets = caluclateXYOffsets(chrtLoc);
433+
transformText = 'translate('+ offsets.x +', '+ offsets.y +')';
413434
bigTics = groups.bigTics.selectAll('path')
414435
.data(domainLabelValues.bigIncr)
415436
.enter()
416437
.append('path')
417438
.attr('d', bigTicsArc)
418439
.attr("stroke", '#595859')
419440
.attr("stroke-width", '.1')
420-
.attr("transform", translateString);
441+
.attr("transform", transformText);
421442
}
422443

423444
/**
424445
*
425446
*/
426447
function drawMiniTics(miniTicsArc, groups, chrtLoc) {
427-
428-
var miniTics, xOffset, yOffset, bigTics, translateString;
429-
430-
xOffset = ((chrtLoc.xmax - chrtLoc.xmin) / 2) + chrtLoc.xmin;
431-
yOffset = ((chrtLoc.ymax - chrtLoc.ymin) / 2) + chrtLoc.ymin;
432-
translateString = "translate(" + xOffset + " , " + yOffset +")";
448+
var miniTics, offsets, bigTics, transformText;
449+
offsets = caluclateXYOffsets(chrtLoc);
450+
transformText = 'translate('+ offsets.x +', '+ offsets.y +')';
433451
bigTics = groups.miniTics.selectAll('path')
434452
.data(domainLabelValues.subIncr)
435453
.enter()
436454
.append('path')
437455
.attr('d', miniTicsArc)
438456
.attr("stroke", '#595859')
439457
.attr("stroke-width", '.1')
440-
.attr("transform", translateString);
458+
.attr("transform", transformText);
441459
}
442460

443461
function drawBigTicLabels(bigTicLabelsArc, groups, chrtLoc, anchorPrefix) {
444462
// define the path along which the text will go.
445-
var xOffset, yOffset, translateString;
446-
xOffset = ((chrtLoc.xmax - chrtLoc.xmin) / 2) + chrtLoc.xmin;
447-
yOffset = ((chrtLoc.ymax - chrtLoc.ymin) / 2) + chrtLoc.ymin;
448-
translateString = "translate(" + xOffset + " , " + yOffset +")";
463+
var offsets, transformText;
464+
offsets = caluclateXYOffsets(chrtLoc);
465+
transformText = 'translate('+ offsets.x +', '+ offsets.y +')';
449466

450467
groups.bigTicsLabelsPath.selectAll("path")
451468
.data(domainLabelValues.bigIncr)
@@ -456,7 +473,7 @@ var pieChart = (
456473
return anchorPrefix + '_scaleText' + i;
457474
})
458475
.style("opacity", 0.0)
459-
.attr("transform", translateString);
476+
.attr("transform", transformText);
460477

461478
var ticText = groups.bigTicsLabelsText.selectAll("text")
462479
.data(domainLabelValues.bigIncr)
@@ -480,11 +497,10 @@ var pieChart = (
480497
}
481498

482499
function drawGaugeLabelText(gaugeLabelArc, groups, chrtLoc, config, unitData) {
483-
var xOffset, yOffset, translateString;
484-
xOffset = ((chrtLoc.xmax - chrtLoc.xmin) / 2) + chrtLoc.xmin;
485-
yOffset = ((chrtLoc.ymax - chrtLoc.ymin) / 2) + chrtLoc.ymin;
486-
translateString = "translate(" + xOffset + " , " + yOffset +")";
487-
console.log("GaugeLabelTranslateString: " + translateString);
500+
var offsets, transformText, gaugeUnits;
501+
offsets = caluclateXYOffsets(chrtLoc);
502+
transformText = 'translate('+ offsets.x +', '+ offsets.y +')';
503+
console.log("GaugeLabelTranslateString: " + transformText);
488504
//unitData = [config.label];
489505

490506
groups.gaugeLabelPaths.selectAll("path")
@@ -496,9 +512,9 @@ var pieChart = (
496512
return config.anchorPrefix + 'unitText' + i;
497513
})
498514
.style("opacity", 0.0)
499-
.attr("transform", translateString);
515+
.attr("transform", transformText);
500516

501-
var gaugeUnits = groups.gaugeUnitsText.selectAll("text")
517+
gaugeUnits = groups.gaugeUnitsText.selectAll("text")
502518
.data(unitData)
503519
.enter()
504520
.append("text");

0 commit comments

Comments
 (0)