Skip to main content

2 posts tagged with "d3.js"

View All Tags

Charticulator GeoJSON sublayout

· One min read
Ilfat Galiev
Software Engineer

GeoJSON is a format for encoding a variety of geographic data structures.

{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [125.6, 10.1]
},
"properties": {
"name": "Dinagat Islands"
}
}

The Charticulator has sub-layout features that allow to authors arrange Glyphs on Plot Segments.

Usually Charticulator uses x or y axes to determine positions of each Glyph.

Sub-layouts is one approach to integrate third party layouts like d3-geo, d3-hierarchy/tree, d3-hierarchy/pack e.t.c.

Geo sublayout

The d3-geo package uses to render GeoJSON into SVG path as part of Plot Segment and positioning Glyphs by given latitude, longitude column bindings.

Geo sublayout

Geo sub-layout has properties to load GeoJSON file, to specify expression for geo coordinate columns, projections, center of map, rotations, scale and translates rendering SVG on Plot Segment.

Charticulator Treemap sublayout

· One min read
Ilfat Galiev
Software Engineer

The Charticulator is going to get new Treemap sub-layout for cartesian Plot Segment in the next version 1.5.0.0 of the visual.

Treemap sub-layout in Charticulator

The sub-layout has Inner padding, Outer padding, attributes to configure visual appearance.

Treemap sub-layout attributes

Value Expression sets values for nodes.

Data Expressions set grouping of data by given columns.

The feature powered by D3.js library

The Charticulator binds glyphs to tree leaves.