Data Formats

Updating Floorplan Data

d3-floorplan implements the reusable API so data simply needs to be bound to the element that the d3.floorplan object is rendered in by using the d3.selection.datum method. Then the visualization can be rendered/updated using the selection.call method and passing in the d3.floorplan object. Each layer type has its own data format described below. The data bound to the container should be an associative array of layer.id to data for each layer.

Imagelayer

The imagelayer displays one or more images scaled and positioned based on the dimensions of the floorplan determined by the x and y scales. The data format for the image layer is a list of associative arrays. Each associative array has the following format:

[{ url: String,    // The URL of the image to display
  x: Number,      // The X coordinate of the upper left corner of the image (in xScale coordinates)
  y: Number,      // The Y coordinate of the upper left corner of the image (in yScale coordinates)
  width: Number,  // The width of the image (in xScale coordinates)
  height: Number, // The height of the image (in yScale coordinates)
  opacity: Number // (optional) The opacity of the displayed image [0.0-1.0] (default: 1.0)
},]

Heatmap

The heatmap displays color coded cells on the map using a regularly spaced grid and also custom shapes. The data format for the heatmap layer is an associative array supporting the following keys:

{ binSize: Number,    // The height and width of each bin on the grid (in xScale/yScale)
  units: String,      // A string to append to each value when the tooltip is shown
  map: [              // A list of grid cells and shapes to render
    { x: Number,      // The x coordinate of the upper left corner of the grid cell (in xScale)
      y: Number,      // The y coordinate of the upper left corner of the grid cell (in yScale)
      value: Number   // The associated value of the cell which is rendered to a color by colorScale
    }, // 0-n of these
    { value: Number,  // The associated value of the custom shape which is rendered to a color by colorScale
      points: [       // An ordered list of points that define the verticies of custom shape
        { x: Number,  // The x coordinate of the vertex (in xScale)
          y: Number   // The y coordinate of the vertex (in yScale)
        }, // 3-n of these
      ]
    }, // 0-n of these
  ]
}

Vectorfield

The vectorfield layer renders scaled vectors on a regularly spaced grid over the floorplan. The data format for the vectorfield is very similar to the heatmap. It is an associative array containing a list of values for the vectors to render. The values can be in any common scale, the vectors are normalized to the maximum maginitude of all the vectors rendered.

{ binSize: Number,    // The height and width of each bin on the grid (in xScale/yScale)
  units: String,      // A string to append to each value when the tooltip is shown
  map: [              // A list of grid cell vector values
    { x: Number,      // The x coordinate of the upper left corner of the grid cell (in xScale)
      y: Number,      // The y coordinate of the upper left corner of the grid cell (in yScale)
      value:          // The associated vector value of the cell which is rendered from the center of the cell
        { x: Number,  // The x magnitude of the vector
          y: Number   // The y magnitude of the vector
        }
    }, // 0-n of these
  ]
}

Pathplot

The pathplot layer renders straight line interpolated paths among sequences of points. The format for the data is a list of associative arrays where each item supports the following keys:

[{ id: String,      // The id to apply to the rendered line
   classes: String, // The css classes to apply to the rendered line
   points: [        // An ordered list of points used to draw the line
     { x: Number,   // An x coordinate of a point (in xScale)
       y: Number    // A y coordinate of a point (in yScale)
     }, // 2-n of these
   ]
},] 

Overlays