Skip to content
dciarletta edited this page Nov 13, 2012 · 11 revisions

# d3.floorplan()

Setup a floor plan map to hold layers and manage pan/zoom functionality.

# floorplan(selection)

Render or update a copy of the floor plan map in each element of the selection. These should be either svg or g elements.

# floorplan.xScale([scale])

Gets or sets the scale associated with the horizontal axis of the floor plan map. If no scale is specified it returns the current scale which defaults to a linear scale.

# floorplan.yScale([scale])

Gets or sets the scale associated with the vertical axis of the floor plan map. If no scale is specified it returns the current scale which defaults to a linear scale.

# floorplan.panZoom([boolean])

Gets or sets the state of the pan-zoom functionality on the floor plan map. If no value is specified it returns the current state of the functionality which defaults to true for enabled.

# floorplan.addLayer(layer, [index])

Inserts a new layer on the floor plan map. If no index is specified the layer is appended as the new top layer; otherwise, the layer is inserted at the position specified by index starting with layer 0 representing the bottom layer.

Layers

Layers must implement the following interface to work with the floor plan map.

# layer(selection)

Renders or updates the layer in the elements provided in the selection. Data for the layer will be bound to the element if available; otherwise, null will be bound.

# layer.id()

Returns a unique identifier for the layer. This id is used to look up associated data for the layer from the data bound to the floor plan map.

# layer.title([string])

Gets or sets the title for the layer. The layer title is used in the layer controls to allow the user to enable or disable the layer in the floor plan map. While the floor plan map does not require the ability to set the title using the optional string argument, it is recommended that all layers implement the method this way for commonality and convenience to the user.

# layer.xScale([scale])

Gets or sets the scale associated with the horizontal axis of the layer. If no scale is specified it returns the current scale. The floor plan map sets the layer's x-scale when it is added as a layer or when the x-scale on the floor plan map changes.

# layer.yScale([scale])

Gets or sets the scale associated with the vertical axis of the layer. If no scale is specified it returns the current scale. The floor plan map sets the layer's y-scale when it is added as a layer or when the y-scale on the floor plan map changes.

Heat Map

The heat map layer is used to display comparative quantitative data over regions of the floor plan map by binning the data and coloring the regions according to a specified color scale. This heat map layer uses a 6 color diverging color scale courtesy of colorbrewer2.org as the default, but this can be customized via CSS styling and the colorSet method described below. Data can be rendered on a regular grid layout as in a traditional heat map or in custom defined regions by specifying the bounding points for the region instead of coordinates for the cell. See Data Formats.

# d3.floorplan.heatmap()

Creates a heat map layer.

# heatmap.colorSet([string])

Gets or sets the CSS class of the outer g element on the heat map. This provides a quick way to change among multiple color scales for the heat map. If no value is specified, the current value is returned which defaults to RdYlBl.

# heatmap.colorMode([mode])

Gets or sets the mechanism for assigning the data to discrete color values. There are four valid values for the color mode:

  • quantile: Uses a d3.scale.quantile scale on the data to divide the values into 6 quantiles.
  • quantized: Uses a d3.scale.quantize scale on the data to linearly divide the data into 6 equal increments between the minimum and maximum values.
  • normal: Treats the data as a normal distribution and divides the data into the following 6 bins: [-6σ, -2σ], [-2σ, -σ], [-σ, μ], [μ, σ], [σ, 2σ], [2σ, 6σ]
  • custom: Divides the data into up to 6 bins separated by the threshold values provided via the customThresholds method.

If no mode is specified this method returns the current mode which defaults to quantile. Any invalid mode supplied is treated the same as custom.

# heatmap.customThresholds([numbers])

Gets or sets the current custom thresholds which are used to divide the data values into up to 6 color bins when the color mode is set to custom.

Image Layer

The image layer is used to render images as a layer in the floor plan visualization. Typically this would be the base layer of the map but you can place the layer at any level and control the opacity of the images via the data. See Data Formats.

# d3.floorplan.imagelayer()

Creates a new image layer.

Vector Field

The vector field layer displays 2-dimensional data on a regularly spaced grid over the floor plan map area by drawing directional vectors from the center of each tile normalized to the size of the tiles.

# d3.floorplan.vectorfield()

Creates a new vector field layer.

Path Plot

The path plot layer renders path data (contiguous line segments) over the floor plan map area. A function can be supplied to control the portions of each path that is drawn so you can enable functionality like path playback.

# d3.floorplan.pathplot()

Creates a new path plot layer.

# pathplot.pointFilter([function])

Gets or sets the function used to return the point list to display for the path. The function should have the following signature fn(path, [index]) and should return an array of {x: Number, y: Number} objects as the list that defines the order to draw the line segments for the path. The data passed into the function will be an item from the data array bound to the layer and the index of that item.

If no function is specified, the current function is returned which defaults to function(d) {return d.points;}.

Overlays

Clone this wiki locally