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, Layers and Glyphs.

Properties

Positioning

Prop Required Types Default Unit(s)
x1 false any undefined Local coordinate
x2 false any undefined Local coordinate
y1 false any undefined Local coordinate
y2 false any undefined Local coordinate

It is possible to use the Section without providing all or 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 PaddingObject` 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.

Zooming/panning

Prop Required Type(s) Default Unit(s)
zoomable false boolean false -
pannable false boolean false -
zoomPanSettings false ZoomPanSettings undefined -
blockZoomPan false boolean undefined -

See the zooming an panning documentation for more information.

Other

Prop Required Type(s) Default Unit(s)
clip false `‘padding’ ‘outer’` 'padding'

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.

Instance methods

  • selectRectangle
  • updateSelectRectangle
  • resetSelectRectangle
  • startSelectPolygon
  • addPointToSelectPolygon
  • moveSelectPolygon
  • getSelectPolygon
  • 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.