riatelab / bertin Goto Github PK

Bertin is looking really great! 🥳

I wonder if, being based on d3, Bertin might eventually accommodate drag projection rotation, as in this d3 notebook, or pinch/mousewheel zooming.

I imagine one potential complication would be that Bertin lets you specify any d3 projection, which means you'd either need to map the drag on the projected axes back to changes in projection parameters on a projection-by-projection basis (that's a lot of work!).

Nevertheless, I wanted to put it out there as a potential enhancement! Thanks very much for the great work!

Ideas

• being able to style a map outside of bertin.js with a simple style sheet in css
• apply the same style to several maps generated with bertin.js
• reduce bertin.js to its logical part or in other word dissociate styling from things related to data

How

• improve structure of the generated svg :
  • each layer must be in a level 1 group and must have an id attribute
  • element inside a layer could have a class attribute (.bubble for bubbles layer...)

Update the documentation (=> [email protected])

Create layer logo function to add an image on the map

Support raster tiles reprojection in https://github.com/neocarto/bertin/blob/main/src/layers/tiles.js

See:

• https://bl.ocks.org/mbostock/4329423
• https://www.jasondavies.com/maps/tile/
• http://bl.ocks.org/almccon/ed65408dda92941397cc63658a4da20a
• https://www.jasondavies.com/maps/raster/
• https://observablehq.com/@kelleyvanevert/jason-davies-automatic-projection-tiles
• https://observablehq.com/@kelleyvanevert/reprojection-of-elevation-data-texture

Add a parameter to fix te size of the largest circle (in order to build comparable maps)

"km" would be more i18n neutral

Texts are not well positioned with Firefox

Create a merge function to put data within the geojson. Then, change draw function.

if leg_top = TRUE (default value), then the legend is displayed on top of the map. To avoid overlapping with layers used for the map layout.

Currently, tooltip is shown just under the pointer. That positionning could be optimized:

1. with a slight distance from the pointer, so that the tooltip does not hide too much the feature it relates to
2. when the pointer is close to one of the frame borders, to avoid clipping

For instance here, the tooltip could be displayed on the right

I've really enjoyed playing with this library - fills a much needed gap in javascript cartography!

I ran into an issue making a map of the US. I have geojson of US states from the US Census (https://www.census.gov/geographies/mapping-files/time-series/geo/carto-boundary-file.html; converted from shapefile to geojson using mapshaper). When I try to make a state map using bertin.js, I get this: https://observablehq.com/d/c5d2bf78b1e0534e
The most interesting thing about the rendering is that one state at a time will be stroked white, and you can trigger a change in the displayed state by mousing out of the cell.

I'm not sure what is causing this - maybe the Alaska and Hawaii inset in the AlbersUSA projection break things somehow?

is not perfect...

I would suggest dominant-baseline: middle and y = -headerHeight/2

ok: this one is just nitpicking 🙃

A tooltip can contain 3 lines, which are styled differently, with hard coded specifications:

const fontweight = ["bold", "normal", "normal"];
const fontSize = [18, 14, 10];
const fontstyle = ["normal", "normal", "italic"];

An alternative with some class attributes and a separate CCS spec would allow for more flexibility, and custom styling.

Tooltips doesn’t work in Firefox 97.0.1 on macos.
See https://talk.observablehq.com/t/tooltips-in-bertin-js/6278/7

Example notebook: https://observablehq.com/d/5d8fbd0cdf8084bc

On this map, the "pointLabels" geojson won't render as a "label" layer with the following error:
fr = TypeError: coordinates must be finite numbers

Removing the lambert93 projection will get rid of the error, but the labels are all displayed at coordinates (0,0).

The same geojson will render correctly after buffering with Turf (in order to get polygonal geoms).

Tooltips dont follow smoothly mouse move on maps with more than 1,000 items.
=> https://observablehq.com/@ericmauviere/hello_bertin1

I suspect raise()/lower() on mousemove/mouseleave to be responsible.

PROJ4 & EPSG projections do not work well when making a map containing an "outline" layer

Please try to add the possibility of mixed stock/rate representation on proportional symbols so that we can make a discretized coloring of the symbols. Don't forget the possibility of divergent colors (but I think it's already in the discretization function).

@neocarto Please kindly enable discussion section on github repo. This would help foster discussions without adding noise to the issue tracker.

Rename the modalities of a categorical variable to be displayed in the legend. I tried leg_text parameter, without success...

Improve the function getbreaks in src/greaks.js to add méthods

I've been able to create mushroom plots using Polygon geometry, but I'm having trouble creating one using Point geometry—I just get the mushrooms stacked up in the top-left corner (the same as if I try to use ill-formed Polygon geometry).

For example, here's some point geometry in testdata.geojson:

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": { "some_value": 5, "another_value": 8 },
      "geometry": { "type": "Point", "coordinates": [130.89, -12.42] }
    },
    {
      "type": "Feature",
      "properties": { "some_value": 13, "another_value": 11 },
      "geometry": { "type": "Point", "coordinates": [117.1, -16.72] }
    },
    {
      "type": "Feature",
      "properties": { "some_value": 14, "another_value": 19 },
      "geometry": { "type": "Point", "coordinates": [112.34, -25.32] }
    }
  ]
}

And here're some polygons around the same points in testdata-polygon.geojson:

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": { "some_value": 5, "another_value": 8 },
      "geometry": {
        "type": "Polygon",
        "coordinates": [[
          [130.99, -12.42],
          [130.89, -12.52],
          [130.79, -12.42],
          [130.89, -12.32]
        ]]
      }
    },
    {
      "type": "Feature",
      "properties": { "some_value": 13, "another_value": 11 },
      "geometry": {
        "type": "Polygon",
        "coordinates": [[
           [117.2, -16.72],
           [117.1, -16.82],
           [117.0, -16.72],
           [117.1, -16.62]
        ]]
      }
    },
    {
      "type": "Feature",
      "properties": { "some_value": 14, "another_value": 19 },
      "geometry": {
        "type": "Polygon",
        "coordinates": [[
           [112.44, -25.32],
           [112.34, -25.42],
           [112.24, -25.32],
           [112.34, -25.22]
        ]]
      }
    }
  ]
}

And here's a test Quarto doc where I try to draw:

✅ symbols with the point geometry
❌ mushrooms with the point geometry
✅ mushrooms with the polygon geometry:

---
title: "Test"
---

Load the data:

```{ojs}
//| label: setup
bertin = require("[email protected]");
d3 = require("d3-geo@3", "d3-geo-projection@4");
```

Here's the data:

```{ojs}
test_data = FileAttachment("testdata.geojson").json();
test_data
```

Symbols work:

```{ojs}
//| label: bertin-point-symbols
bertin.draw({
  params: {
    background: "#dbd1ca",
    margin: 40
  },
  layers: [
    {
      geojson: test_data,
      symbol: "circle",
      fill: "#990000",
      symbol_size: 150
    }
  ]
});
```

But mushrooms don't:

```{ojs}
//| label: bertin-point-mushrooms
bertin.draw({
  params: {
    background: "#dbd1ca",
    margin: 40
  },
  layers: [
    {
      type: "mushroom", 
      geojson: test_data,
      top_values: "some_value",
      bottom_values: "another_value",
      k: 50,
      top_fill: "#b0040f",
      bottom_fill: "#0acbf2",
    }
  ]
});
```

But if we try with polygon geometry, it works:

```{ojs}
test_poly_data = FileAttachment("testdata-polygon.geojson").json();
test_poly_data
```

```{ojs}
//| label: bertin-poly-mushrooms
bertin.draw({
  params: {
    background: "#dbd1ca",
    margin: 40
  },
  layers: [
    {
      type: "mushroom", 
      geojson: test_poly_data,
      top_values: "some_value",
      bottom_values: "another_value",
      k: 50,
      top_fill: "#b0040f",
      bottom_fill: "#0acbf2",
    }
  ]
});
```

Is it possible to use Points with the Mushroom plot type? They seem like a natural fit, since the symbol itself is a point, and I'd prefer to just pre-process my polygons down to their centroids if possible!

in : https://observablehq.com/@neocartocnrs/bertin-js-links

Please, for these first examples, allow also filtering links from their volum (flow value).

Then, it would be interesting to propose to filter according to (by order of importance/difficulty) :

Type (1)

• a value to enter
• the mean value of (fij)
• median value of (fij)

Type (2)

• a decile of of (fij) to be entered or calculated (?).
  -This proposition is related to the summary proposal issue.

Type (3)

• a range of values to enter
• a range a value to pick on a sort of slider histogram

Type (4)

• a range of values to enter as from [a - b[
• a range a value to pick on a "slider histogram"

Here is an example:

when creating a custom class breaks beginning with 0, the color of spatial units included in the lowest class are not displayed on the map (but displayed in the legend).

take into account the negative values in bubble.

Add a function to convert a tabular data with lat lon coordinates in geojson.

Propose if it is possible the possibility to visualize the histogram of distribution of the statistical series

• useful for stats breaks/discretization : choosing of class parameter
• useful for links : choosing the filtering parameter of links/arrows values

This is in connection with the display/calculation of a summary of the series (or the sub-series) to be represented.

Perhaps propose an interactive histogram?
or on which we could also set the bounds?

It can be discussed according to the possibilities

for type: "scalebar", add fill parameter which manage the color of the text and the line

Pan and zoom to specific area of the layer, following the idea behind this implementation.

Proposal : no impact on the layout (leg_x, leg_y, text title_pos, type: "text" parameters) in the canevas, no impact on bubble sizes ; only on Scalebar values.

Warning : union -> aggregate

Please add the possibility to sampling the color of links/arrows in CMJN (or other), by default in RGB.

If possible, propose to :

• choose the color
• sampling/selecting the alpha parameter of the color (opacity)
• sampling of the color in relation to the sampling of the flow values (direct or inverse function). i.e. allow to display +/- dark links/arrows according to whether they are strong or weak (as desired) - and the possibility of combining the hue with the opacity parameter

Add font-family property for each texts (i.e header, footer, legends, ...). See layer-labels.

• improve the number of font. For now Pacifico, Roboto, Rubik, Ubuntu (see defs in draw.js)

Allow the possibility to add a halo below the labels

in https://github.com/neocarto/bertin/blob/main/src/layers/tiles.js
the 'style' parameter only supports string type, and not user extendable.

for a custom style/url, please consider support Object parameter like

{
     name: "openstreetmap",
     provider: "OpenStreetMap contributors",
     url: (x, y, z) => `https://tile.openstreetmap.org/${z}/${x}/${y}.png`,
   },

Add a parameter "display" on each layers to facilitate show/hide actions. Default display = true, of course.

In a typical scenario using 'typo' layer,

bertin.draw({
layers: [
  {
    type: "layer",
    geojson: data,
    fill: {
      type: "typo",
      values: "region",
      pal: "Tableau10",
      tooltip: ["$region", "$name"],
      leg_title: `The Continents`,
      leg_x: 55,
      leg_y: 180
    }
  ]
})

It's possible to manually set the palette, but the order and the color mapping is not configurable.
Using d3 or vega-lite, it's done with the color scale domain and range setting.

In bertin's 'typo' example, the continent is colorized fine. However, the order of the continents is not totally in control.(Africa, Oceania, Asia,...) It's possible the order is arranged silently by the features. For a press-ready scenario, the names should be Africa, America, Asia, Europe, Oceania... etc, or any desired order.

For some other cases, like risks (Low, Mid, High), it's another typical typology, but if the order is not in control, the color is randomized, the outcomes is not usable.

Please consider this issue. Thanks.

Fix the pb of type prop when input data is point.
See https://observablehq.com/@neocartocnrs/bertin-js-prop-symbols with [email protected]

Add a type symbols (circles, squares, triangles + picto?)

I would suggest to change all css property names (strokewidth, fillopacity) etc to camelCase, because it is what javascript uses to manipulate css values. Happy to provide the pull-request if you like.

Would it be simpler to use d3.symbol for all points geometries: simple layer or prop layer?

The logic is different but similar for all symbol type (circle, square, triangle, cross).
All shape are render with path and move to position with transform + translate.

Create a function with only a geojson for parameter. The function display the geojson like a simple layer. Quickdraw.info could return informations about the file: nb of features, extent (to verify if coords are not projected), list of properties, etc.

Dot cartogram method + typo : The legend doesn't match to the map
https://observablehq.com/@neocartocnrs/bertin-js-dots-cartograms#comment-af78e13bf369c484

leg_fontSize and leg_fontSize2 options without effect with "simple" layers.

See for instance https://observablehq.com/@neocartocnrs/hello-bertin-js?collection=@neocartocnrs/bertin
"A Map of the African Continent"

Currently, require("bertin") does'nt work in Quarto. The following error is returned: OJS Error. RequireError$1: invalid module. To import bertin, I have to write: bertin = import('https://cdn.skypack.dev/[email protected]'). However, require works in Observable. It's weird... See also https://talk.observablehq.com/t/quarto-module-require/6573 & https://stackoverflow.com/questions/72300480/error-quarto-require-invalid-module-bertin-js

Actually, it's very weird. There is an error in rstudio. But when I deploy the page in github (see), the error disappears.

I ran a few simple display tests with bertin.js:

• 1 department by municipality
• 1 region by municipality
• France by municipality

I am surprised with the measures, maybe it is my PC, up to 2 mn, although pure D3 coding does not exceed 7 s.

Projection has for sure a significant impact.

https://observablehq.com/@ericmauviere/hello_bertin1

With Number.prototype.toLocaleString(), tooltip could render more readable number.
By default, it could be the browser locale, with an option to choose a specific one. A more refined option could be the optional object of toLocaleString() who have useful properties.

Add a Changelog file to track the project changes between minor and major release.

The example format is included in this gist:
https://gist.github.com/juampynr/4c18214a8eb554084e21d6e288a18a2c