Alison Sizer asizer

This sample is based on Mike Bostock's Box Plots. The box.js file has been modified in a number of ways besides making the box plots horizontal: the transitions have been removed, the 1.5 iqr function is included as the default to compute the whisker length, data objects are attached to the whisker ends and outlier dots (instead of just the values), and there are transparent q1-q2 and q2-q3 boxes that contain those respective data points for possible future use.

Hovering over outlier dots in the boxplot highlights them on the table and vice-versa. This also demonstrates a move-to-front functionality -- when an outlier circle is highlighted, it is moved to the end of the svg's elements so that it appears on top of the other outliers.

Also, the axis rounds its range to intervals that go into a power of 10 (see the cleanUpChartRange function).

The variable being plotted is a generated logNoraml distribution, to demonstrate outliers more prominently (sometimes there are so many, the table gets cut

This example gets around the map's need for a height when you don't know the height of the map, but you do know the height of the header and footer. Set the map container's position: absolute and the top and bottom properties to account for the header and footer heights.

Firefox seems to treat box-sizing differently, so add 4 px to the map's top/bottom to account for the header/footer borders

Demonstrates the ability to repeat a map horizontally.

The map's container's container gets a clip dynamically added to it such that repeated tiles are not shown. To get rid of the clip, we just need:

.map .container .container {
  clip: inherit !important;
}

Note: Only the basemap layers will be repeated. The data layers will appear once.

This simple line chart is constructed from a TSV file storing the closing value of AAPL stock over the last few years. The chart employs conventional margins and a number of D3 features:

d3.tsv - load and parse data
d3.time.format - parse dates
d3.time.scale - x-position encoding
d3.scale.linear - y-position encoding
d3.extent - compute domains
d3.svg.axis - display axes
d3.svg.line - display line shape

Multi-line labels on a Feature Layer

This is a workaround to add line breaks to the Label Layer

NOTE: I can't figure out a way to return all the labels for a Feature Layer here, unfortunately. The Label Layer only returns the labels that will fit into their elements, or not conflict with other labels, as calculated based on the original, single-line label. Splitting these labels into multiple lines might reduce conflicts, or allow them to fit properly within their polygons, but because they were conflicted out in the first place, we never see them.

	.esriLayerSearcher .esriLayerSearcherClearFloat {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
	}

	.simpleLayerSearcher .esriLayerSearcherContainer *,

	/* all this is around line 334 of SQLQuery/Widget.js */

	// option 1 is to query the rest endpoint for unique values.
	// option 2 is to store featureSet clientside (1000 limit)
	var tokenRequest = esri.id.findCredential(this.activeInfo.fLayerUrl); // THIS IS NEW!
	if (!this.activeInfo.featureSet) {
	dojoXhr(this.activeInfo.fLayerUrl + '/query', {
	query: {
	where: '1=1',
	outFields: fieldInfo.name,

	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
	<title></title>
	<link rel="stylesheet" href="//js.arcgis.com/3.10/js/esri/css/esri.css">
	<style>
	html, body, #map {
	height: 100%; width: 100%; margin: 0; padding: 0;

	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>Feature Layer Multi-Line Labels</title>
	<link rel="stylesheet" href="//js.arcgis.com/3.10/js/esri/css/esri.css">
	<style>
	html, body, #map {
	height: 100%; width: 100%; margin: 0; padding: 0;

	concat: {
	options: {
	banner: 'require({\ncache: {\n',
	process: function(src, filepath) {
	var returnStr = '// Source: ' + filepath + '\n';
	if (filepath.indexOf('.js') > 0) {
	// add file name
	returnStr += '\'' + filepath.replace('js/', '').replace('.js', '') + '\': ';
	// add function and file text
	returnStr += 'function() {\n' + src + '}';