D3 - Revision history

Admin: Replacing charlesreid1.com:3000 with git.charlesreid1.com

2019-10-09T03:21:23Z

Replacing charlesreid1.com:3000 with git.charlesreid1.com

← Older revision		Revision as of 03:21, 9 October 2019
Line 541:		Line 541:
	==D3 organization==		==D3 organization==

	Link to D3 organization on git.charlesreid1.com: https://charlesreid1.com~~:3000~~/d3		Link to D3 organization on git.charlesreid1.com: https://git.charlesreid1.com/d3

	==D3 Calendar Visualization==		==D3 Calendar Visualization==
Line 549:		Line 549:
	Notes on wiki here: [[D3/Calendar]]		Notes on wiki here: [[D3/Calendar]]

	D3 calendar code: https://charlesreid1.com~~:3000~~/d3/charlesreid1-calendar		D3 calendar code: https://git.charlesreid1.com/d3/charlesreid1-calendar

	Git commits calendar: https://charlesreid1.com~~:3000~~/d3/charlesreid1-calendar/src/master/git		Git commits calendar: https://git.charlesreid1.com/d3/charlesreid1-calendar/src/master/git

	MediaWiki edits calendar: https://charlesreid1.com~~:3000~~/d3/charlesreid1-calendar/src/master/wiki		MediaWiki edits calendar: https://git.charlesreid1.com/d3/charlesreid1-calendar/src/master/wiki

	==D3 Map Visualizations Project==		==D3 Map Visualizations Project==
Line 561:		Line 561:
	Notes on wiki here: [[Javascript/Maps]]		Notes on wiki here: [[Javascript/Maps]]

	D3 maps project repo: https://charlesreid1.com~~:3000~~/d3/maps		D3 maps project repo: https://git.charlesreid1.com/d3/maps

	=Flags=		=Flags=

Admin: /* How to Hand-Code Data (or, Passing JS Variables to D3) */

2018-02-19T01:56:58Z

How to Hand-Code Data (or, Passing JS Variables to D3)

← Older revision		Revision as of 01:56, 19 February 2018
Line 537:		Line 537:
	</pre>		</pre>

			=git.charlesreid1.com=

			==D3 organization==

			Link to D3 organization on git.charlesreid1.com: https://charlesreid1.com:3000/d3

			==D3 Calendar Visualization==

			Several D3 calendar visualizations.

			Notes on wiki here: [[D3/Calendar]]

			D3 calendar code: https://charlesreid1.com:3000/d3/charlesreid1-calendar

			Git commits calendar: https://charlesreid1.com:3000/d3/charlesreid1-calendar/src/master/git

			MediaWiki edits calendar: https://charlesreid1.com:3000/d3/charlesreid1-calendar/src/master/wiki

			==D3 Map Visualizations Project==

			Combining [[Leaflet]] with D3, and using wrappers like C3, to make map visualizations.

			Notes on wiki here: [[Javascript/Maps]]

			D3 maps project repo: https://charlesreid1.com:3000/d3/maps

	=Flags=		=Flags=

Admin at 01:29, 19 February 2018

2018-02-19T01:29:21Z

← Older revision		Revision as of 01:29, 19 February 2018
Line 58:		Line 58:
	// here's where we do stuff with the data		// here's where we do stuff with the data
	};		};
	</~~source~~>		</pre>

	===Grabbing Data Header===		===Grabbing Data Header===
Line 75:		Line 75:
	var headerRow = Object.keys(data[0]);		var headerRow = Object.keys(data[0]);
	console.log(headerRow);		console.log(headerRow);
	</~~source~~>		</pre>

	First, <code>data[0]</code> grabs only the first row. The <code>Object.keys()</code> method will extract the keys for that row, and we assign that to the <code>headerRow</code> variable. Finally, we print this variable value to the console, where we see precisely what we are expecting:		First, <code>data[0]</code> grabs only the first row. The <code>Object.keys()</code> method will extract the keys for that row, and we assign that to the <code>headerRow</code> variable. Finally, we print this variable value to the console, where we see precisely what we are expecting:
Line 94:		Line 94:
	} );		} );

	</~~source~~>		</pre>

	Here, the map function will iterate through each element of your data. You can perform your transformation on d, and that transformation will be applied to an entire data set.		Here, the map function will iterate through each element of your data. You can perform your transformation on d, and that transformation will be applied to an entire data set.
Line 112:		Line 112:
	}		}
	});		});
	</~~source~~>		</pre>

	This can be used, not just for parsing data or using it to make new data, but for displaying data as well:		This can be used, not just for parsing data or using it to make new data, but for displaying data as well:
Line 124:		Line 124:
	}		}
	});		});
	</~~source~~>		</pre>

	Once you combine these techniques with jQuery's ability to manipulate page elements, rather than using something boring like console.log, you'll have a way of pulling data into an HTML document and creating a data-driven document (D x 3).		Once you combine these techniques with jQuery's ability to manipulate page elements, rather than using something boring like console.log, you'll have a way of pulling data into an HTML document and creating a data-driven document (D x 3).
Line 149:		Line 149:
	console.log( [ +d['Inning'] , +d['Avg'] ] );		console.log( [ +d['Inning'] , +d['Avg'] ] );
	});		});
	</~~source~~>		</pre>

	This shows there are two rows (one for each team) where Inning is a string (totals). We'll have to filter that one out, and then return the two values we were getting (Inning and Avg).		This shows there are two rows (one for each team) where Inning is a string (totals). We'll have to filter that one out, and then return the two values we were getting (Inning and Avg).
Line 165:		Line 165:

	xy_pairs.map(function(d) { console.log( 'Inning ' + d['0'] + ' - Avg ' + d['1']); });		xy_pairs.map(function(d) { console.log( 'Inning ' + d['0'] + ' - Avg ' + d['1']); });
	</~~source~~>		</pre>

	Alternatively, we can create a new array that works the same as the old array - that is, that we can access using the keys "Inning" and "Avg":		Alternatively, we can create a new array that works the same as the old array - that is, that we can access using the keys "Inning" and "Avg":
Line 183:		Line 183:

	xy_pairs.map(function(d) { console.log( 'Inning ' + d['Inning'] + ' - Avg ' + d['Avg']); });		xy_pairs.map(function(d) { console.log( 'Inning ' + d['Inning'] + ' - Avg ' + d['Avg']); });
	</~~source~~>		</pre>

	which results in:		which results in:
Line 241:		Line 241:
	});		});
	}		}
	</~~source~~>		</pre>

	=Things I learned about D3 while modifying Parallel example=		=Things I learned about D3 while modifying Parallel example=
Line 278:		Line 278:
	return +d['Index'];		return +d['Index'];
	});		});
	</~~source~~>		</pre>

	This will return an array that contains one element for each row, and that element is the number corresponding to the row index.		This will return an array that contains one element for each row, and that element is the number corresponding to the row index.
Line 339:		Line 339:

	});		});
	</~~source~~>		</pre>

	==D3 Function Notation==		==D3 Function Notation==
Line 365:		Line 365:
	});		});
	});		});
	</~~source~~>		</pre>

	results in:		results in:
Line 425:		Line 425:
	console.log(p);		console.log(p);
	}		}
	</~~source~~>		</pre>

	Results in:		Results in:
Line 443:		Line 443:
	def = abc.map( function(d) { return d[1] } );		def = abc.map( function(d) { return d[1] } );
	console.log(def);		console.log(def);
	</~~source~~>		</pre>

	Results in:		Results in:
Line 457:		Line 457:
	def = abc.map( function(d) { return Math.pow(+d,2) } );		def = abc.map( function(d) { return Math.pow(+d,2) } );
	console.log(def);		console.log(def);
	</~~source~~>		</pre>

	results in:		results in:
Line 491:		Line 491:
	....		....
	}		}
	</~~source~~>		</pre>

	What <code>d3.csv()</code> does is to provide a callback function for the data.		What <code>d3.csv()</code> does is to provide a callback function for the data.
Line 505:		Line 505:
	{'cat' : 'D', 'dat' : 0.16 },		{'cat' : 'D', 'dat' : 0.16 },
	{'cat' : 'E', 'dat' : 0.23 }];		{'cat' : 'E', 'dat' : 0.23 }];
	</~~source~~>		</pre>

	An array of dictionaries, with each dictionary sharing the same keys. This then allows the properties "cat" and "dat" to be accessed by D3 to construct charts and things.		An array of dictionaries, with each dictionary sharing the same keys. This then allows the properties "cat" and "dat" to be accessed by D3 to construct charts and things.
Line 520:		Line 520:

	...		...
	</~~source~~>		</pre>

	now, with our hand-coded data, we just cut to the chase, and pass our data in to the <code>.data()</code> call directly:		now, with our hand-coded data, we just cut to the chase, and pass our data in to the <code>.data()</code> call directly:
Line 535:		Line 535:
	.enter().append("g")		.enter().append("g")
	.attr("class","arc");		.attr("class","arc");
	</~~source~~>		</pre>

Admin at 01:28, 19 February 2018

2018-02-19T01:28:52Z

← Older revision		Revision as of 01:28, 19 February 2018
Line 46:		Line 46:
	We can load our data into a D3 document like so:		We can load our data into a D3 document like so:

	<~~source lang="javascript"~~>		<pre>
	<html>		<html>
	<head>		<head>
Line 70:		Line 70:
	We can do this by adding some code right after our <code>d3.csv</code> call:		We can do this by adding some code right after our <code>d3.csv</code> call:

	<~~source lang="javascript"~~>		<pre>
	d3.csv("data_as_giants.csv", function(data) {		d3.csv("data_as_giants.csv", function(data) {

Line 87:		Line 87:
	To perform some kind of element-by-element transformation of our data, we can use the <code>data.map</code> function, like so:		To perform some kind of element-by-element transformation of our data, we can use the <code>data.map</code> function, like so:

	<~~source lang="javascript"~~>		<pre>
	d3.csv("data_as_giants.csv", function(data) {		d3.csv("data_as_giants.csv", function(data) {

Line 104:		Line 104:
	From within the map function, you can access elements of your data using the keys:		From within the map function, you can access elements of your data using the keys:

	<~~source lang="javascript"~~>		<pre>
	d3.csv("data_as_giants.csv", function(data) {		d3.csv("data_as_giants.csv", function(data) {

Line 116:		Line 116:
	This can be used, not just for parsing data or using it to make new data, but for displaying data as well:		This can be used, not just for parsing data or using it to make new data, but for displaying data as well:

	<~~source lang="javascript"~~>		<pre>
	d3.csv("data_as_giants.csv", function(data) {		d3.csv("data_as_giants.csv", function(data) {

Line 142:		Line 142:
	First, print the data:		First, print the data:

	<~~source lang="javascript"~~>		<pre>
	d3.csv("data_as_giants.csv", function(data) {		d3.csv("data_as_giants.csv", function(data) {

Line 153:		Line 153:
	This shows there are two rows (one for each team) where Inning is a string (totals). We'll have to filter that one out, and then return the two values we were getting (Inning and Avg).		This shows there are two rows (one for each team) where Inning is a string (totals). We'll have to filter that one out, and then return the two values we were getting (Inning and Avg).

	<~~source lang="javascript"~~>		<pre>
	d3.csv("data_as_giants.csv", function(data) {		d3.csv("data_as_giants.csv", function(data) {

Line 169:		Line 169:
	Alternatively, we can create a new array that works the same as the old array - that is, that we can access using the keys "Inning" and "Avg":		Alternatively, we can create a new array that works the same as the old array - that is, that we can access using the keys "Inning" and "Avg":

	<~~source lang="javascript"~~>		<pre>
	// Return a key-value (x,y) pair for (Inning,Avg)		// Return a key-value (x,y) pair for (Inning,Avg)
	xy_pairs = data.map(function(d) {		xy_pairs = data.map(function(d) {
Line 220:		Line 220:
	To load multiple (arbitrary number) CSV files:		To load multiple (arbitrary number) CSV files:

	<~~source lang="javascript"~~>		<pre>
	var filesArray = ["myrandedata.csv","myrandndata.csv","myrandudata.csv"];		var filesArray = ["myrandedata.csv","myrandndata.csv","myrandudata.csv"];

Line 274:		Line 274:
	So, if you have a column of data that contains an index for each row, and you want to convert that index from a string to a number, you can use the plus sign in conjunction with map:		So, if you have a column of data that contains an index for each row, and you want to convert that index from a string to a number, you can use the plus sign in conjunction with map:

	<~~source lang="javascript"~~>		<pre>
	num_data = string_data.map(function(d) {		num_data = string_data.map(function(d) {
	return +d['Index'];		return +d['Index'];
Line 318:		Line 318:
	Alternative method is for CSV with no headers, load as plain text into a "plain" multidimensional array:		Alternative method is for CSV with no headers, load as plain text into a "plain" multidimensional array:

	<~~source lang="javascript"~~>		<pre>
	// To parse csv as an array of arrays:		// To parse csv as an array of arrays:
	d3.text("myrandedata.csv", "text/csv", function(text) {		d3.text("myrandedata.csv", "text/csv", function(text) {
Line 351:		Line 351:
	===Simple Nesting Functions Example===		===Simple Nesting Functions Example===

	<~~source lang="javascript"~~>		<pre>
	var abc=[1,2,3];		var abc=[1,2,3];
	var def=[11,12,13];		var def=[11,12,13];
Line 419:		Line 419:
	===Expansion Example: Single Dimension to Multiple Dimension Array===		===Expansion Example: Single Dimension to Multiple Dimension Array===

	<~~source lang="javascript"~~>		<pre>
	var abc=[1,2,3,4,5];		var abc=[1,2,3,4,5];
	def = abc.map( function(d) { return [ +d, +d + 4 ] } );		def = abc.map( function(d) { return [ +d, +d + 4 ] } );
Line 439:		Line 439:
	===Contraction Example: Multiple Dimension to Single Dimension Array===		===Contraction Example: Multiple Dimension to Single Dimension Array===

	<~~source lang="javascript"~~>		<pre>
	var abc=[[1,1],[2,4],[3,9],[4,16],[5,25],[6,36]];		var abc=[[1,1],[2,4],[3,9],[4,16],[5,25],[6,36]];
	def = abc.map( function(d) { return d[1] } );		def = abc.map( function(d) { return d[1] } );
Line 453:		Line 453:
	===Transformation Example: Values to Squared Values===		===Transformation Example: Values to Squared Values===

	<~~source lang="javascript"~~>		<pre>
	var abc=[1,2,3,4,5];		var abc=[1,2,3,4,5];
	def = abc.map( function(d) { return Math.pow(+d,2) } );		def = abc.map( function(d) { return Math.pow(+d,2) } );
Line 487:		Line 487:
	When you import JSON or CSV data from a file, it looks something like this:		When you import JSON or CSV data from a file, it looks something like this:

	<~~source lang="javascript"~~>		<pre>
	d3.csv("data.csv", function(error, data) {		d3.csv("data.csv", function(error, data) {
	....		....
Line 499:		Line 499:
	In that case, we have to print out the data that <code>d3.csv()</code> returns, and see how it packages up the data. The pattern is something like this:		In that case, we have to print out the data that <code>d3.csv()</code> returns, and see how it packages up the data. The pattern is something like this:

	<~~source lang="javascript"~~>		<pre>
	var mydat = [{'cat' : 'A', 'dat' : 0.40 },		var mydat = [{'cat' : 'A', 'dat' : 0.40 },
	{'cat' : 'B', 'dat' : 0.80 },		{'cat' : 'B', 'dat' : 0.80 },
Line 511:		Line 511:
	Whereas with a <code>d3.csv()</code> or <code>d3.json()</code> call, we would have the callback function and then do stuff in the callback function:		Whereas with a <code>d3.csv()</code> or <code>d3.json()</code> call, we would have the callback function and then do stuff in the callback function:

	<~~source lang="javascript"~~>		<pre>
	d3.csv("data.csv", function(error, data) {		d3.csv("data.csv", function(error, data) {

Line 524:		Line 524:
	now, with our hand-coded data, we just cut to the chase, and pass our data in to the <code>.data()</code> call directly:		now, with our hand-coded data, we just cut to the chase, and pass our data in to the <code>.data()</code> call directly:

	<~~source lang="javascript"~~>		<pre>
	var mydat = [{'cat' : 'A', 'dat' : 0.40 },		var mydat = [{'cat' : 'A', 'dat' : 0.40 },
	{'cat' : 'B', 'dat' : 0.80 },		{'cat' : 'B', 'dat' : 0.80 },

Admin at 01:27, 19 February 2018

2018-02-19T01:27:39Z

← Older revision		Revision as of 01:27, 19 February 2018
Line 1:		Line 1:
	~~{{Orphan\|date=April 2017}}~~
	=Loading Data=		=Loading Data=

Admin: /* How to Hand-Code Data (or, Passing JS Variables to D3) */

2018-02-04T10:01:28Z

How to Hand-Code Data (or, Passing JS Variables to D3)

← Older revision		Revision as of 10:01, 4 February 2018
Line 539:		Line 539:


			=Flags=

			[[Category:D3]]

	~~[[Category:D3]]~~		{{DashboardFlag}}

Bleep bloop: Bot: Orphan page, add template

2017-04-17T02:39:49Z

Bot: Orphan page, add template

← Older revision		Revision as of 02:39, 17 April 2017
Line 1:		Line 1:
			{{Orphan\|date=April 2017}}
	=Loading Data=		=Loading Data=

Admin: /* Things I Learned from D3 Leaflet Example */

2015-02-17T05:11:46Z

Things I Learned from D3 Leaflet Example

← Older revision		Revision as of 05:11, 17 February 2015
Line 480:		Line 480:

	=Things I Learned from D3 Leaflet Example=		=Things I Learned from D3 Leaflet Example=

			This is a compilation of learnings from my [[D3 Leaflet Map]] example, which I put together as part of http://charlesreid1.github.io/a-shrubbery "A Shrubbery," my Github mapping project.

	==How to Hand-Code Data (or, Passing JS Variables to D3)==		==How to Hand-Code Data (or, Passing JS Variables to D3)==

Admin: /* A Return to D3 */

2015-02-17T05:10:48Z

A Return to D3

← Older revision		Revision as of 05:10, 17 February 2015
Line 478:		Line 478:

	D3 and Leaflet: [[D3 Leaflet Map]]		D3 and Leaflet: [[D3 Leaflet Map]]

			=Things I Learned from D3 Leaflet Example=

			==How to Hand-Code Data (or, Passing JS Variables to D3)==

			When you import JSON or CSV data from a file, it looks something like this:

			<source lang="javascript">
			d3.csv("data.csv", function(error, data) {
			....
			}
			</source>

			What <code>d3.csv()</code> does is to provide a callback function for the data.

			But what if we are constructing our data "by hand"? What if we don't want to grab data from a file, and don't need a callback function?

			In that case, we have to print out the data that <code>d3.csv()</code> returns, and see how it packages up the data. The pattern is something like this:

			<source lang="javascript">
			var mydat = [{'cat' : 'A', 'dat' : 0.40 },
			{'cat' : 'B', 'dat' : 0.80 },
			{'cat' : 'C', 'dat' : 0.15 },
			{'cat' : 'D', 'dat' : 0.16 },
			{'cat' : 'E', 'dat' : 0.23 }];
			</source>

			An array of dictionaries, with each dictionary sharing the same keys. This then allows the properties "cat" and "dat" to be accessed by D3 to construct charts and things.

			Whereas with a <code>d3.csv()</code> or <code>d3.json()</code> call, we would have the callback function and then do stuff in the callback function:

			<source lang="javascript">
			d3.csv("data.csv", function(error, data) {

			var g = svg.selectAll(".arc")
			.data(pie(data))
			.enter().append("g")
			.attr("class","arc");

			...
			</source>

			now, with our hand-coded data, we just cut to the chase, and pass our data in to the <code>.data()</code> call directly:

			<source lang="javascript">
			var mydat = [{'cat' : 'A', 'dat' : 0.40 },
			{'cat' : 'B', 'dat' : 0.80 },
			{'cat' : 'C', 'dat' : 0.15 },
			{'cat' : 'D', 'dat' : 0.16 },
			{'cat' : 'E', 'dat' : 0.23 }];

			var g = svg.selectAll(".arc")
			.data(pie(mydat))
			.enter().append("g")
			.attr("class","arc");
			</source>




	[[Category:D3]]		[[Category:D3]]

Admin at 04:40, 17 February 2015

2015-02-17T04:40:44Z

← Older revision		Revision as of 04:40, 17 February 2015
Line 470:		Line 470:

	https://github.com/mbostock/d3/wiki/Arrays#wiki-d3_zip		https://github.com/mbostock/d3/wiki/Arrays#wiki-d3_zip

			=A Return to D3=

			I've been returning to D3 after a long hiatus.

			D3 and maps: [[D3 Map]]

			D3 and Leaflet: [[D3 Leaflet Map]]

			[[Category:D3]]