Section

The Section is one of the cornerstones of florence. It is used to:

define local coordinate systems
apply coordinate transformations
specify zooming and panning behavior
enable interactions

<script>
  import { Graphic, Section } from '@snlab/florence'
</script>

<Graphic width={200} height={200} backgroundColor={'blue'}>

  <Section 
    x1={0.25}
    x2={0.75}
    y1={0.25}
    y2={0.75}
    backgroundColor={'green'}
  >
  
  </Section>

</Graphic>

Sections can be nested, but a Section with a coordinate transformation (e.g. polar) can only contain Marks and Layers

Properties

Positioning

Prop	Required	Types	Default	Unit(s)
x1	`false`	`Number`, `String`, `Date`, `Function`	`undefined`	Local coordinate
x2	`false`	`Number`, `String`, `Date`, `Function`	`undefined`	Local coordinate
y1	`false`	`Number`, `String`, `Date`, `Function`	`undefined`	Local coordinate
y2	`false`	`Number`, `String`, `Date`, `Function`	`undefined`	Local coordinate

It is possible to use the Section without providing any of the positioning props. This will result in the Section inheriting the extents of the parent Section or Graphic, taking padding into account. For example,

<Graphic width={500} height={500}>
  
  <Section padding={50}>
    
    <Section>

      ...

    </Section>

  </Section>

</Graphic>

is equivalent to

<Graphic width={500} height={500}>
  
  <Section
    x1={0}
    x2={1}
    y1={0}
    y2={1}
  >
    
    <Section
      x1={0.1}
      x2={0.9}
      y1={0.1}
      y2={0.9}
    >

      ...

    </Section>

  </Section>

</Graphic>

In the examples above, no scales are being used, so everything is measured in relative coordinates (see local coordinates docs for more information). However, if the parent Graphic or Section has defined scaleX and scaleY props, the positioning props of the child section have to be defined in local coordinates. For example:

<Graphic
  width={500}
  height={500}
  scaleX={scaleLinear().domain([0, 10])}
  scaleY={scaleLinear().domain([0, 10])}
>

  <Section
    x1={1} x2={9}
    y1={1} y2={9}
  >

    ...

  </Section>

</Graphic>

would be equivalent to:

<Graphic
  width={500}
  height={500}
>

  <Section
    x1={0.1} x2={0.9}
    y1={0.1} y2={0.9}
  >

    ...

  </Section>

</Graphic>

Aesthetics

Prop	Required	Type(s)	Default	Units
backgroundColor	`false`	`String`	`undefined`	Named, hex, rgb or hsl color

Local coordinate system

Prop	Required	Type(s)	Default	Unit(s)
scaleX	`false`	`Function`	`undefined`	d3 scale
scaleY	`false`	`Function`	`undefined`	d3 scale
coordinates	`false`	`CoordinateTransformation`	`cartesian()`	-
flipX	`false`	`Boolean`	`false`	-
flipY	`false`	`Boolean`	`false`	-
padding	`false`	`Number`, `Object`	`undefined`	Pixel
zoomIdentity	`false`	`Object`	`undefined`	-

For more how to use these props, see the local coordinates documentation.

Interactions

Mouse events

Prop	Required	Type(s)	Default	Unit(s)
onClick	`false`	`Function`	`undefined`	-
onMousedown	`false`	`Function`	`undefined`	-
onMouseup	`false`	`Function`	`undefined`	-
onMouseover	`false`	`Function`	`undefined`	-
onMouseout	`false`	`Function`	`undefined`	-
onMousedrag	`false`	`Function`	`undefined`	-

Touch events

Prop	Required	Type(s)	Default	Unit(s)
onTouchdown	`false`	`Function`	`undefined`	-
onTouchup	`false`	`Function`	`undefined`	-
onTouchover	`false`	`Function`	`undefined`	-
onTouchout	`false`	`Function`	`undefined`	-
onTouchdrag	`false`	`Function`	`undefined`	-

Select events

Prop	Required	Type(s)	Default	Unit(s)
onSelect	`false`	`Function`	`undefined`	-
onDeselect	`false`	`Function`	`undefined`	-

See the interactivity documentation for more information.

Other

Prop	Required	Type(s)	Default	Unit(s)
clip	`false`	`String`	`'padding'`	Either `'padding' or 'outer'`

clip controls how the marks, layers and other visual elements inside of this Section should be clipped off. To clip off everything within the padding, 'padding' should be used. To only clip off everything outside of the Sections’s outer border (determined by the positioning props), 'outer' should be used.

Methods

selectRectangle
updateSelectRectangle
resetSelectRectangle
startSelectPolygon
addPointToSelectPolygon
moveSelectPolygon
resetSelectPolygon

Section methods can be used as follows:

<script>
  let section
  section.selectRectangle(...)
</script>

<Section bind:this={section}>

</Section>

For more information on Section methods and how to use them to create advanced interactions like selection or brushing, check out the interactivity documentation.