kmapper.org uses the works endpoint of the OpenAlex API to search for gold open access articles. It also visualizes the relevant Sustainable Development Goals and research domains assigned to the search results by OpenAlex.
This is an ongoing experiment and I welcome your feedback.
Cyrill Martin [email protected]
- The search bar (TheSearch.vue) sends a GET request to the OpenAlex works endpoint
- The mapper (mapOpenAlexWorks.js) transforms the response as needed and adds objects to the graph store (graph.js)
- The home map (HomeMap.vue) uses the created graph objects and visualizes search results - works, assigned SDGs, and assigned research fields
- Any click on one of the elements (works, SDGs, research fiels) triggers another mapper (createDetailsMapGraph.js) to create the input for the details map component (DetailsMap.vue) shown in a modal
- The modal title contains a link to the actual work on OpenAlex, to the SDG linked data information of the United Nations, or the research field information on OpenAlex.
Sketches about the circular representation of the SDGs and research fields. A little bit of Pythagoras' theorem.
On small screens, the radius is so big that the elements seem to be positioned in vertical alignment.
VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).
npm installnpm run devnpm run buildnpm run deploy