riatelab / bertin Goto Github PK
View Code? Open in Web Editor NEWA package to draw maps in javascript
Home Page: https://observablehq.com/collection/@neocartocnrs/bertin
License: MIT License
A package to draw maps in javascript
Home Page: https://observablehq.com/collection/@neocartocnrs/bertin
License: MIT License
Add a parameter "display" on each layers to facilitate show/hide actions. Default display = true, of course.
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).
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)
Type (2)
Type (3)
Type (4)
Please add the possibility to sampling the color of links/arrows in CMJN (or other), by default in RGB.
If possible, propose to :
Allow the possibility to add a halo below the labels
Dot cartogram method + typo : The legend doesn't match to the map
https://observablehq.com/@neocartocnrs/bertin-js-dots-cartograms#comment-af78e13bf369c484
"km" would be more i18n neutral
Add font-family property for each texts (i.e header, footer, legends, ...). See layer-labels.
Rename the modalities of a categorical variable to be displayed in the legend. I tried leg_text parameter, without success...
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.
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.
Warning : union -> aggregate
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"
Add a parameter to fix te size of the largest circle (in order to build comparable maps)
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:
For instance here, the tooltip could be displayed on the right
Create a merge function to put data within the geojson. Then, change draw function.
take into account the negative values in bubble.
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.
is not perfect...
I would suggest dominant-baseline: middle
and y = -headerHeight/2
ok: this one is just nitpicking 🙃
Create layer logo function to add an image on the map
@neocarto Please kindly enable discussion section on github repo. This would help foster discussions without adding noise to the issue tracker.
for type: "scalebar", add fill parameter which manage the color of the text and the line
Update the documentation (=> [email protected])
Fix the pb of type prop when input data is point.
See https://observablehq.com/@neocartocnrs/bertin-js-prop-symbols with [email protected]
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!
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
Add a type symbols (circles, squares, triangles + picto?)
Tooltips doesn’t work in Firefox 97.0.1 on macos.
See https://talk.observablehq.com/t/tooltips-in-bertin-js/6278/7
Texts are not well positioned with Firefox
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`,
},
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.
Improve the function getbreaks in src/greaks.js to add méthods
PROJ4 & EPSG projections do not work well when making a map containing an "outline" layer
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.
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.
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!
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).
I ran a few simple display tests with bertin.js:
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.
Propose if it is possible the possibility to visualize the histogram of distribution of the statistical series
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
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.
.bubble
for bubbles layer...)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.
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?
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.
Support raster tiles reprojection in https://github.com/neocarto/bertin/blob/main/src/layers/tiles.js
See:
Add a function to convert a tabular data with lat lon coordinates in geojson.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.