lmullen/README.md

## README.md

      
    Raw
  

              README.md
            
          
    A starter script for using D3.js to interact with the API for the
American Converts Database.

  
## converts.js
// Endpoints to the API
var items = "http://americanconverts.org/api/items?page=1";

// Fetch the JSON; when the data is loaded, call the function ready
d3.json(items, ready);

// This makes data a global variable so we can access it from the console
var data;

// This uses d3 to select the <body> tag in our HTML document. Now we can call
// the JavaScript variable `body` to add HTML tags to our page.
var body = d3.select("body");

// This is the function that gets called when the data is loaded.
function ready(response) {
  // First save the data to a global variable so we can access it from the
  // console.
  data = response;

  // Next log the data to the console so we can inspect it.
  console.log(data);

  // This function loops through each item in our `data` array of objects. It
  // makes the `item` variable available to us, which is the equivalent of a
  // single page in the Converts database. To wit:
  //
  // http://americanconverts.org/items/show/805
  //
  // Anything interesting that we're going to do, we'll do inside this
  // function.
  data.map( function(item) {

    // We can get various kinds of information from our item
    var title = getTitle(item);
    var type = getItemType(item);
    var birth = getElement(item, "Birth Date")

    // This line appends a <p> tag to the body.
    // Whatever is inside the text() function will be inside the <p> tag on
    // the page.
    body.append("p").text(type + ": " + title + " " + birth);

  })

}

/* **********************************************************
 * These are some helper functions to extract information from the item.
 * Notice that they all have the same form. You pass in an item, and you get a
 * value in return. Notice that getID() and getItemType() have more or less
 * the same form. You could copy one of them, modify the code, and get the
 * extract a different value in the same way.
 *
 * Also notice that in an object most of the interesting information is stored
 * in the element_texts array of objects. And notice that I've provided a
 * function getElement() to extract an arbitrary value from that array. (Don't
 * worry about the implementation.) Can you use getElement() to extract other
 * information?
 *
 */

// Extract the ID from an Omeka Item
function getID(item) {
  return item.id;
}

// Extract the item type of an Omeka item
function getItemType(item) {
  return item.item_type.name;
}

// Extract the title of an Omeka Item
function getTitle(item) {
  return item.element_texts[0].text;
}

// Extract an arbitrary element text. If the element text is "Date of
// conversion" call the function like this:
// getElement(item, "Date of conversion")
function getElement(item, textName) {
  var textsArray =  item.element_texts.filter(filterElementText(textName));
  if (textsArray.length > 0) {
    return textsArray[0].text;
  } else {
    return "";
  }
}

// Helper function for filtering element texts. Don't call this directly.
function filterElementText(name) {
  return function(element_text) {
    return element_text.element.name === name;
  }
}

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="http://d3js.org/d3.v3.min.js"></script>
</head>
<body>
<script src="converts.js"></script>
</body>
</html>
	// Endpoints to the API
	var items = "http://americanconverts.org/api/items?page=1";

	// Fetch the JSON; when the data is loaded, call the function ready
	d3.json(items, ready);

	// This makes data a global variable so we can access it from the console
	var data;

	// This uses d3 to select the <body> tag in our HTML document. Now we can call
	// the JavaScript variable `body` to add HTML tags to our page.
	var body = d3.select("body");

	// This is the function that gets called when the data is loaded.
	function ready(response) {
	// First save the data to a global variable so we can access it from the
	// console.
	data = response;

	// Next log the data to the console so we can inspect it.
	console.log(data);

	// This function loops through each item in our `data` array of objects. It
	// makes the `item` variable available to us, which is the equivalent of a
	// single page in the Converts database. To wit:
	//
	// http://americanconverts.org/items/show/805
	//
	// Anything interesting that we're going to do, we'll do inside this
	// function.
	data.map( function(item) {

	// We can get various kinds of information from our item
	var title = getTitle(item);
	var type = getItemType(item);
	var birth = getElement(item, "Birth Date")

	// This line appends a <p> tag to the body.
	// Whatever is inside the text() function will be inside the <p> tag on
	// the page.
	body.append("p").text(type + ": " + title + " " + birth);

	})

	}

	/* **********************************************************
	* These are some helper functions to extract information from the item.
	* Notice that they all have the same form. You pass in an item, and you get a
	* value in return. Notice that getID() and getItemType() have more or less
	* the same form. You could copy one of them, modify the code, and get the
	* extract a different value in the same way.
	*
	* Also notice that in an object most of the interesting information is stored
	* in the element_texts array of objects. And notice that I've provided a
	* function getElement() to extract an arbitrary value from that array. (Don't
	* worry about the implementation.) Can you use getElement() to extract other
	* information?
	*
	*/

	// Extract the ID from an Omeka Item
	function getID(item) {
	return item.id;
	}

	// Extract the item type of an Omeka item
	function getItemType(item) {
	return item.item_type.name;
	}

	// Extract the title of an Omeka Item
	function getTitle(item) {
	return item.element_texts[0].text;
	}

	// Extract an arbitrary element text. If the element text is "Date of
	// conversion" call the function like this:
	// getElement(item, "Date of conversion")
	function getElement(item, textName) {
	var textsArray = item.element_texts.filter(filterElementText(textName));
	if (textsArray.length > 0) {
	return textsArray[0].text;
	} else {
	return "";
	}
	}

	// Helper function for filtering element texts. Don't call this directly.
	function filterElementText(name) {
	return function(element_text) {
	return element_text.element.name === name;
	}
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<script src="http://d3js.org/d3.v3.min.js"></script>
	</head>
	<body>
	<script src="converts.js"></script>
	</body>
	</html>