geovistory / design-system

MIT License
2 stars 1 forks source link

Map with points with radius sizes and colors #71

Closed joschne closed 12 months ago

joschne commented 1 year ago

Goal

A web component consisting of these parts:

Functional Requirements

Data Visualization

The Data Visualization component expects the following input data (example values)

label (string)   longitude (float) latitude (float) radius (decimal) number (integer)  type (string) link (string)
Vicenza IT 11.5475 45.54672 49.0 98 Città http://geovistory.org/resource/i209697?p=591
Verona 10.993742 45.438158 47.5 94 Città http://geovistory.org/resource/i755596?p=591
Cornalba 9.75 45.85 4.5 9 Luogo abitato http://geovistory.org/resource/i1049754?p=591

Map

The map shows points with different radius sizes and colors.

Radius: size is directly taken from the radius column.

Color: the type strings are mapped to a predefined color palette.

Click: On click a popup opens, showing

Input Validation

The Data Visualization component validates the inptut data before rendering the map. In case the input data is not according to the expectation, a warning is printed. This warning should help the users to define correct queries.

Each expected column (variable of spaql binding) is validated. It is invalid if

SPARQL editor

depends on: #94

Using yasgui, users can define a SPARQL query that returns data as expected by the map (see above).

Example query:

PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
PREFIX ontome: <https://ontome.net/ontology/>
PREFIX xsd: <http://www.w3.org/2001/XMLSchema#>

SELECT ?label ?long ?lat (count(?person) * 0.5 as ?radius) (count(?person) as ?number) ?type ?link
    WHERE {

    # Geographical Place -had presence-> Presence -was at-> Place (lat/long)
    ?s ontome:p147i/ontome:p148 ?place.

    # Geographical Place -label-> label
    ?s rdfs:label ?label.

    # Geographical Place -is origin of-> Person
    ?s ontome:p1439i ?person.

    # Geographical Place -has type-> Geographical Place Type -label-> label
    optional{?s ontome:p1110/rdfs:label ?type}

    # Extract lat and long from WKT
    bind(replace(str(?place), '<http://www.opengis.net/def/crs/EPSG/0/4326>', "", "i") as ?rep)
    bind(xsd:float(replace(str(?rep), "^[^0-9\\.-]*([-]?[0-9\\.]+) .*$", "$1" )) as ?long )
    bind(xsd:float(replace( str(?rep), "^.* ([-]?[0-9\\.]+)[^0-9\\.]*$", "$1" )) as ?lat )

    # Append the project query param to the URI
    bind(concat(str(?s), "?p=591") as ?link ) 
}
GROUP BY ?label ?long ?lat ?type ?link 

This query counts Persons per Geographical Place using the relationship has its origin in. This count is used to bind the radius and number. In addition it joins the Geographical Place Type. This is used to bind the type. In addition it joins the Place. This is used to extracts and bind latitude and longitude. In addition it converts the URI of the Geographical place into a link to the entity page of project 591.

The query was developed against this endpoint: https://sparql.geovistory.org/api_v1_project_591

The query editor can be collapsed and expanded.

Example queries

The component provides a UI to select from a list of meaningful example queries. These should help the users to get started.

Technical Spec

Inputs

queries

Optional array:

[
  {
     "sparqlEndpoint": "https://sparql.geovistory.org/api_v1_project_591",
     "query": "..." 
  }
]

The first entry of array is prefilled into yasgui and executed and rendered on the map.

If not provided, a default value is used.

colors

Optional array of hex color codes, (e.g. ['#aabbcc','#ffffff']). If not provided, a default value with ~6 colors is provided. If input data provides more types than the length of the colors array, then colors will be reused (so that one color can be used more than once).

editorCollapsed

default=false If true, editor is visible, if false, it is collapsed.