Skip to content

Commit e8b3fd1

Browse files
GuyTheFlowerGuyTheFlower
committed
just another commit along the way
1 parent 4bf5203 commit e8b3fd1

2 files changed

Lines changed: 238 additions & 257 deletions

File tree

‎learning_web_proj/d3_learning/pieChart.js‎

Lines changed: 217 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,217 @@
1+
var pieChart = (
2+
function() {"use strict";
3+
4+
var pieChrt, angleScale, svg, pi, i, radianOffSet, numColumns, svgWidth,
5+
svgHeight, minimumChartSize, spaceBetween, chartWidth, chartHeight,
6+
dataRadiusScale, minChrtWidth, minChrtHeight, percent2WidthDim,
7+
percent2HeightDim, ;
8+
pieChrt = {}; // namespace
9+
pieChrt.chartDataSets = []; // populated with an array of data sets. Each element in this array represents a chart to be drawn
10+
pieChrt.chartConfigs = []; // populated with an array of config parameters
11+
numColumns = 2; // identifies how many charts to draw in the width provided for the svg
12+
minChrtWidth = 150;
13+
minChrtHeight = 125;
14+
spaceBetween = 5;
15+
16+
17+
18+
/**
19+
* When this method is called we know how many charts need to get created. This method
20+
* will calculate the width and height of each chart and store this information in the
21+
* chartWidth and chartHeight variables
22+
*/
23+
function defineChartSize() {
24+
var numCols, whitespace;
25+
console.log("width is: " + svgWidth);
26+
// Can't forsee a situation where we would have more than 10 charts per column.
27+
// norm is likely 2 - 4.
28+
numCols = Math.floor(svgWidth / minChrtWidth);
29+
// space between each column and chart
30+
whitespace = spaceBetween * (numCols + 1);
31+
chartWidth = (svgWidth - whitespace) / numCols;
32+
33+
if (numCols < pieChrt.chartDataSets.length) {
34+
svgHeight = minChrtHeight + (2 * spaceBetween);
35+
} else {
36+
svgHeight = (minChrtHeight * Math.ceil(pieChrt.chartDataSets.length / numColumns)) + (2 * spaceBetween);
37+
}
38+
chartHeight = minChrtHeight;
39+
}
40+
41+
/**
42+
* @param {Object[]} data
43+
* @param {String} data.label - The value that will be used to label the axis
44+
* @param {number} data.area - Contains the area that will be represented in the chart
45+
* @param {String} data.color - Hexidecimal number representing the color to be used to draw the value
46+
*/
47+
function configureScaleFunctions(data) {
48+
var max, maxDomain;
49+
// Step 1, calculate the domain of the data.
50+
console.log("here");
51+
var max = d3.max(data, function(d, i) {
52+
return d.area;
53+
});
54+
var maxDomain = calcMaxDomainValue(max);
55+
56+
// Step 2, create various calculators to translate between data values,
57+
// and angles, radian that are used to represent them on the screen.
58+
// 2a. angle scale - calculates angle based on a data value.
59+
angleScale = d3.scale.linear().domain([0, maxDomain]).range([0, 1 * Math.PI]);
60+
// 2b. scale starts at 270 through to 90. - radian offset is 90 degrees in radians
61+
radianOffSet = 90 * (Math.PI / 180);
62+
// Always want to express dimensions from here on forth as percentages of
63+
// the total size allocated for the chart. This function will translate
64+
// percentage values to chart dimensional units.
65+
percent2WidthDim = d3.scale.linear().domain([0, 100]).range([0, chartWidth]);
66+
percent2HeightDim = d3.scale.linear().domain([0, 100]).range([0, chartHeight]);
67+
68+
// 2c. radius scale, used to calculate minium and maxium raduses for arcs
69+
// input values are percentages.
70+
dataRadiusScale = d3.scale.linear().domain([0, data.length ]).range([percent2WidthDim(20), percent2WidthDim(70)]);
71+
72+
73+
console.log('100 width:' + percent2WidthDim(100));
74+
console.log('100 height' + percent2HeightDim(100));
75+
console.log('100 radius ' + dataRadiusScale(100))
76+
77+
}
78+
79+
/**
80+
* caluclates the number of digits in the number, then creates an integer by
81+
* dividing the number by 10 to the number of digits -1. calclates the ceiling
82+
* of that number.
83+
*/
84+
function calcMaxDomainValue(val) {
85+
var numDig, num, ceilNum;
86+
numDig = val.toString().length;
87+
num = val / Math.pow(10, numDig - 1);
88+
ceilNum = Math.ceil(val / Math.pow(10, numDig - 1)) ; // * Math.pow(10, numDig - 1)
89+
//console.log("numDig:" + numDig + ' ceilNum:' + ceilNum);
90+
if (ceilNum <= 5) {
91+
ceilNum = 5 * Math.pow(10, numDig - 1);
92+
} else {
93+
ceilNum = 10 * Math.pow(10, numDig - 1);
94+
}
95+
return ceilNum;
96+
}
97+
98+
/**
99+
* creates an arc that the data can be drawn on.
100+
*/
101+
function defineDataArc(data) {
102+
var arc, val, i, d;
103+
arc = d3.svg.arc().innerRadius(function(d, i) {
104+
val = 0;
105+
if (i !== 0) {
106+
val = dataRadiusScale(data[i - 1].area);
107+
}
108+
return dataRadiusScale(i) + 1;
109+
}).outerRadius(function(d, i) {
110+
return dataRadiusScale(i + 1) - 1;
111+
}).startAngle(function(d, i) {
112+
return 0 - radianOffSet;
113+
}).endAngle(function(d, i) {
114+
console.log("end data: " + val);
115+
console.log("rads:" + angleScale(d.area));
116+
return angleScale(d.area) - radianOffSet;
117+
});
118+
return arc;
119+
}
120+
121+
function defineGroupedElements() {
122+
dataArc = svg.append('g');
123+
textArc = svg.append('g');
124+
majorTicsArc = svg.append('g');
125+
minorTicsArc = svg.append('g');
126+
labelsGroup = svg.append('g');
127+
128+
ticTextGroup = svg.append('g');
129+
ticTextArc = svg.append('g');
130+
ticTextPath = svg.append('g');
131+
132+
ticUnitsTextPathGroup = svg.append('g');
133+
ticUnitsTextGroup = svg.append('g');
134+
}
135+
136+
/**
137+
* draws the chart based on the contents of the data.
138+
* @param {Object[]} data
139+
* @param {String} data.label - The value that will be used to label the axis
140+
* @param {number} data.area - Contains the area that will be represented in the chart
141+
* @param {String} data.color - Hexidecimal number representing the color to be used to draw the value
142+
*
143+
*/
144+
function drawChart(data) {
145+
defineGroupedElements();
146+
var dataArc = defineDataArc(data);
147+
148+
149+
}
150+
151+
function debug_drawCircles() {
152+
var dataset = [ 5, 10, 15, 20, 25 ];
153+
console.log("drawing now");
154+
var circles = svg.selectAll("circle")
155+
.data(dataset)
156+
.enter()
157+
.append("circle");
158+
159+
circles.attr("cx", function(d, i) {
160+
return (i * 50) + 25;
161+
})
162+
.attr("cy", 200/2)
163+
.attr("r", function(d) {
164+
return d;
165+
});
166+
}
167+
168+
/**
169+
* Adds data that is used to create a chart. Can be called many times in order to
170+
* Output a svg with multiple charts.
171+
*
172+
* @param {Object[]} inputData
173+
* @param {String} inputData.label - The label for a specific value in the chart
174+
* @param {number} inputData.area - The area that is to be represented in the chart.
175+
* @param {string} inputData.color - The hexidecimal color to be used to represent the value
176+
*
177+
* @param {Object} config
178+
* @param {String} label - The label that should be used to label the chart. (what is the chart representing)
179+
* @param {String} units - The units that the area values are to be provided in. (allowable values m, ha)
180+
*
181+
*/
182+
pieChrt.addData = function(inputData, config) {
183+
// TODO: should do some verification that the object complies with the required schema
184+
pieChrt.chartDataSets.push(inputData);
185+
};
186+
187+
/**
188+
* using the data that has been added to this object using the method addDataObj
189+
* Will generate a chart for each piece of information.
190+
*
191+
* @param {number} Width - The width in pixels of the output svg
192+
* @param {string} div - The div tag that identifies where in the html doc
193+
* the svg should be inserted.
194+
*/
195+
pieChrt.createChart = function(w, div) {
196+
// width will be static, height will be dynamic depending on how many charts need to
197+
// be drawn. Will draw 2 charts per width for now.
198+
// create the svg that needs to be drawn
199+
svgWidth = w;
200+
defineChartSize(svgWidth);
201+
svg = d3.select('#' + div)
202+
.append("svg")
203+
.attr("width", svgWidth)
204+
.attr("height", svgHeight);
205+
206+
207+
// Iterating over the data used to draw each chart.
208+
for (i=0; i<pieChrt.chartDataSets.length; i++) {
209+
configureScaleFunctions(pieChrt.chartDataSets[i]);
210+
drawChart(pieChrt.chartDataSets[i]);
211+
}
212+
213+
214+
};
215+
216+
return pieChrt;
217+
}());

0 commit comments

Comments
 (0)