When viewing an entity i want to see where they are located on map esp if they have multiple locations

When viewing a grouping of entities i want to see clustering on a map to get a sense of density

Tasks

• Geocode locations Probably use https://api.opencagedata.com/geocode/v1/json?q=PLACENAME&key=YOUR-API-KEY
• Display locations on a map
  • Identify library React simple maps seems decent https://www.react-simple-maps.io/examples/custom-markers/
  • Implement it

Analysis

Simple maps ...

https://www.react-simple-maps.io/examples/basic-markers/

Geocoding

https://opencagedata.com/api#quickstart

When adding content to the site e.g. in #13 I want to have a way to add and edit pages (in markdown) and have them show up on the site so that they are visible to visitors

Acceptance

• I can add pages in markdown or MDX and they automatically show up in the site url space e.g. if i add /content/about.md that shows up on the site at /about/

Tasks

• Add catch all url map for these
• Add brief documentation about how this works (?)

Background

Currently have a bunch of "meta" content that is useful for people really working on the project (or those curious about the details of why and how). This is spread around in various places e.g. job stories, blog posts etc.

What is needed and who needs it?

• People actively contributing to the project often want some detail on why we are doing the project e.g. who is going to use it for what etc. ie. what are the job stories. They may also want documentation of design
• People who are curious about background: want a why and maybe a timeline

Acceptance

• Materials below analysed for what is useful to include in integrated 'background' to and 'vision' for ecosystem mapping ✅2023-11-30 looked through it all
• Useful bits collated into one place, with links to further reading if necessary ✅2023-11-30 on https://ecosystem.lifeitself.org/design
  • Job story for what and why to publish - https://docs.google.com/document/d/1vWcBp9l40-KRDxRIhHSuFK0vP4B_zMzzZ1bcJL_eRJ0/edit# ✅2023-11-30 processed and extracted all relevant parts and deprecated section in gdoc
  • Why / background e.g. A10 🚧2023-11-30 need to add still
  • Timeline ✅2023-11-30 wrote a draft timeline
  • Roadmap ✅2023-11-30 https://github.com/orgs/life-itself/projects/6
  • Architecture ✅2023-11-30 added a section on this
• Shared/published somewhere, e.g. on relevant initiative page? ✅2023-11-30 https://ecosystem.lifeitself.org/design

Tasks

• Analyse below materials and flag what is useful to include

What do i do atm to onboard someone

Gave them this set of links

• https://lifeitself.us/2021/12/09/mapping-for-emergence/
• Job Stories and Design Document - Ecosystem Mapping (State of Sensemaking) - Gdoc
• Project Summary: Ecosystem Mapping 2020 P2032 [A10] and key links therein
• Read a bit of https://ecosystem.lifeitself.us/ and esp https://ecosystem.lifeitself.us/about and maybe a few profiles
• Then look at the task list and ecosystem planning board: https://github.com/life-itself/ecosystem/projects/1

Notes

• https://lifeitself.us/2021/12/09/mapping-for-emergence/ - this is a narrative version that combines a summary of both the state of the project and why we are doing it
  • NB: there is an internal gdoc there the why is more bullet pointed and simple and clearly separated. May be better for more "docs" type stuff
• Job stories doc: https://docs.google.com/document/d/1vWcBp9l40-KRDxRIhHSuFK0vP4B_zMzzZ1bcJL_eRJ0/edit#
• Architecture: Not much, a bit in the README

When displaying our website we want all images to reliably load so that the site looks professional and good

• Currently when we use links to images (e.g. for org logos) these are to the link on the org site or elsewhere. These can break (e.g. links to FB images often "expire"). This then breaks on our site. Caching versions ensured we always have a copy.
• Secondarily, have an instance in a DAM like cloudinary allows us to do resizing and stuff like that efficiently

When presenting an org's profile page we can include a screenshot of their website (super useful IME) so that people have a sense of what they are like

Acceptance

• All logos / primary images for orgs are in cloudinary in the ecosystem folder https://cloudinary.com/console/c-5b6743fc069522598c97d1e3f699e6/media_library/folders/be1b12676189777871bd22224e31c67653
• We are able to use the DAM either to cache homepage screenshots or to transparently prep them (cloudinary seems to support the latter - question is what happens if their site goes away ...) WONTFIX as more complex than this. See #22 for dedicated issue

Tasks

• We have selected a provider DONE. Cloudinary as it was only one providing DAM afaict
• We have moved all images over

Analysis

Image hosting providers / Digital Asset Management

• See analysis here: https://www.notion.so/11b5deedc98e4cada724ac7f9c505984?v=37e371d0ac43420894fa607ee47f3f0d
  • Note: only cloudinary seemed to do DAM as as well. Others were more image transformation. Plus cloudinary had url2png integration for screenshosts - https://cloudinary.com/documentation/url2png_website_screenshots_addon

Alter Ego
Alter Ego is a powerful network of leaders who are prototyping a deeper form of change, people who know that we need to change at a psychological and cultural level to have a chance of making it through this crisis moment in history.

The organisation runs gatherings, which aim to create a spacious few days of renewal and inspiration, where attendees can expect to make some new friends and potentially form exciting work projects.

Larger Us

Larger Us supports a breakthrough from a them-and-us to a Larger Us world: one in which the ‘us’ we identify with includes 7.8 billion people, all other species, and future generations of both.

It works to "imagine and co-create new forms of citizenship and leadership – above all at the places where our states of mind and the state of the world intersect."

Dark Matter Labs

Dark Matter Labs is a multidisciplinary design team working with partners, clients, and collaborators across the world to develop new working methods for system change.

The organisation "utilises an experiment methodology typical of a fieldwork laboratory – undertaking real-world research and prototyping to develop new models of 21st century institutional infrastructure.

Our is based around collaborative, strategic experiments to learn about the ‘dark matter’ of systems; from policy and regulation, finance and data, governance and organisational culture, to identity and democratic participation."

Dark Mountain Project

The Dark Mountain project is a cultural movement which grew out of a manifesto published in 2009. It operates as a network of creative activity, centred on the Dark Mountain Journal.

"Together, we are walking away from the stories that our societies like to tell themselves, the stories that prevent us seeing clearly the extent of the ecological, social and cultural unravelling that is now underway. We are making art that doesn’t take the centrality of humans for granted. We are tracing the deep cultural roots of the mess the world is in. And we are looking for other stories, ones that can help us make sense of a time of disruption and uncertainty."

The Ekskäret Foundation

"The Ekskäret Foundation aims to facilitate the co-creation of a more conscious and sustainable society where people create more well-being for themselves, each other and the world. The Foundation was founded in 2009 and has since then developed locations, arenas and contexts for inquisitive exploratory meetings, dialogue and lifelong transformative learning. Starting with youth camps the Foundation offer workshops, programs, conferences and work labs in personal development and social transformation. All with the purpose to increase our capacity to create the new story of a more sustainable and conscious society."

Emerge

"Emerge is a network responding to the question of what is happening within, between and beyond human beings in a civilisation that appears to be dying. We connect pioneers, seekers, innovators and their initiatives. We highlight what we share and seek to make visible the patterns that connect us. We help each other to respond to the most urgent challenges of our time. Together, we will sow the seeds of a new civilisation.

Emerge is a response to the meta-crisis, which shows its face in the emergencies of climate, politics, environment and meaning. We believe not only that our challenges are interconnected, but that we must connect in new ways to grapple with the most urgent problems of our times. Linking people, projects, networks and ideas, we investigate what is emerging. We are also a community of practice, exploring new patterns of living, working, being and sense-making."

Enspiral

"We’re a collective of individuals who not only believe in, but practice a new way of organising.

[Enspiral is a] network of social enterprise ventures and social entrepreneurs working together with shared vision and values"

The network, run on principles of decentralised governance, both supports members to share and distribute work, and seeds its own ventures.

The Findhorn Foundation

"The Findhorn Foundation is a dynamic experiment where everyday life is guided by the inner voice of spirit, where we work in co-creation with the intelligence of nature and take inspired action towards our vision of a better world. We share our learning and way of life in experiential workshops, conferences and events that take place within a thriving community and ecovillage.

The Findhorn Foundation is an NGO associated with the United Nations Department of Public Information, holder of UN Habitat Best Practice designation and is co-founder of the Global Ecovillage Network and Holistic Centres Network. The Foundation is at the heart of a community of more than 500 people who every day support and live the vision of creating a better world by starting with themselves."

Metamoderna

"Metamoderna is a political and philosophical think-tank, the purpose of which is to contribute to a fundamental shift in society."

The organisation works within, and to advance, the Metamodern philosophy popularised by Daniel Gortz and Emil Esper Friis, under the shared pseudonym Hanzi Freinacht.

Mind and Life Institute

"At the Mind & Life Institute, we bring science and contemplative wisdom together to better understand the mind and create positive change in the world. At this critical moment in history, it’s clear that efforts to address mounting global challenges must take into account our inner lives, and how individual well-being contributes to collective flourishing.

At the heart of today’s global challenges is a profound crisis of disconnection. From loneliness and isolation to racism and tribalism, our disconnection from one another is causing tremendous suffering for people and the planet. Building on our 30-year legacy, we seek to better understand the role of the human mind in creating these problems—and its potential to solve them. Through grantmaking, convenings, and strategic partnerships, we seek to foster healthy human connections."

Mind and Life Europe

"Our mission is to alleviate suffering and promote human and societal flourishing by integrating science with contemplative practice and wisdom traditions.

Science is the dominant framework for investigating the nature of reality. It is the modern source for knowledge that could help improve the lives of humans and the planet. However, an increasing number of scientists find that science based on empiricism, technology, and objective observation and analysis, does not provide enough insights to contribute to human flourishing.

At Mind & Life Europe, we foster an interdisciplinary dialogue between scientists, contemplative scholars, researchers and encourage them to collaborate to advance contemplative science. We share our findings with professionals in the fields of education, healthcare and organisations and develop solutions to implement change in these sectors. "

Get a basic working site that we can look at and play with.

Working example = front page plus org profile page

Acceptance

• Skeleton site live online DONE. https://ecosystem.lifeitself.us
• Front page with list of orgs DONE. https://ecosystem.lifeitself.us
• Profile page for org with minimal info **DONE. See e.g. https://ecosystem.lifeitself.us/@alter-ego

Tasks

• Skeleton site
• Pull data from Google Spreadsheet Ecosystem DB
  • Retrieve the data - follow this excellent walkthrough https://andreaskeller.name/blog/nextjs-google-sheets-cms or https://fireship.io/lessons/google-sheets-database-nextjs/
  • Cache locally so we can reuse for profile pages, front pages etc
• Profile page
• Front page
• Deploy - using vercel or even just local build DEPLOYED using vercel. https://ecosystem-one.vercel.app. 11 Sep: this is broken now as not on their paid plan. Tried github pages. Also broke as not on paid plan and needed for private domains. Trying netlify

Analysis

/    # front page
/@...      # org or person page ...
/about.   # from markdown locally

When browsing the directory I want to filter and facet so that I get an overview and find organizations I want

When arriving on the site I want to quickly search for the organization I want so I can jump to that page

Acceptance

• Simple search box on main page with profiles
• Faceting (display, counts, filter by)

Tasks

• Select approach to doing this Trying in app with fuse.js e.g. can follow https://cheatcode.co/tutorials/how-to-implement-client-side-search-with-fuse-js
• Simple search box with reactive results
• Facets
  • Show facets
  • Show facet counts
  • Make facets look nice (too many and a bit larger atm) - or is this a content thing (have fewer topics)
• Filtering by facets

Analysis

Options

• Algolia - https://www.algolia.com
  • Structured: free for what we want probably. Some more effort to set up
  • DocSearch: https://docsearch.algolia.com not really the exact match but free, hacky and fast and may work because we have a separate page for each organization. however, can't power filtered search on the front page ...
• Typesense: Open Source and good but if we want hosted (and we do) then there is a substantial cost => ❌
• DIY: not a big problem given size of DB. Issue is finding React widgets or similar OOTB that we can use for doing filtering etc. Otherwise we have to implement ourselves which is a PITA.

DIY

Here's a list of libraries https://bestofjs.org/projects?tags=search

• fuse.js https://github.com/krisk/Fuse will go for this for now as seems the best and most used
• flexsearch: good but all about performance (we don't care given how much info we have) plus a bit complex (less good docs)
• list.js - won't use as we have got structured data so might as well reuse

• convert newsletters into blog posts at life itself
  • Convert last newsletter(s) into posts on the blog
• Write tweet / instagram / facebook for https://lifeitself.us/2021/11/21/a-fall-update-from-the-berlin-hub/)
• Publish bibliography re quakers
• Publish bibliography re jains

• ➕2024-02-09 write a post simply on different "names" for this ecosystem (could be part of the literature review)

Old - 2021

• Mailchimp sign up to newsletter on front page or in footer
• Integrate logo svg nicely into "A project of" (and fix spacing in footer) @khalilcodes DONE: 27 Jan 2022
• Contact page powered by e.g. crisp.chat
• Optimization
  • (?) we are using next/image to optimize images ...
    • Add image dimensions for each image - you could
• Set HTML titles again
• #62
• ➕2022-04-06 process into ecosystem stuff this reference to sri lankan activity https://twitter.com/Richard_Flyer/status/1511262676457910276

When i go to a site or project i want to know what's been happening (and gives me a sense if active) so that I know what to explore

Aside: also could make "banner" at top of page customizable.

Tasks

• Finalize list of orgs that are "in" and "out". I would err to keeping orgs in but things like "thehum" are IMO too minor to be there and unbalance it a bit @theo-cox First pass done
• Review any submissions from google form @theo-cox
• Reapply topic and activity to orgs using id (rather than full name) @juliedayot
  • Replace Inner Development with development (previously no corresponding id for Inner Development) sorted @juliedayot
• Making spelling corrections @juliedayot
  • Sort the mix of UK versus US Enflish in the 'about' page sorted @juliedayot
  • Fix spelling mistakes in the 'profiles' page (‘becomes’ => remove a ‘s’) @rufuspollock
• Find email, facebook, twitter and Instagram urls for Y and YY organisations @juliedayot sorted
• Finalize key image for orgs and correct the broken ones (and then message rufus so he can archive into cloudinary) @juliedayot sorted
  • (?) Answer #21
  • Decide what to do when logo differs from logo cached @juliedayot
  • Deal with broken and missing links @juliedayot
• #18 - plus add new dimensions if appropriate
• Check activity well applied (again maybe adjust or reduce set down - or create e.g. 3 super categories)

Maybe?

• Consider adding curated images where logo contains too much text
• Apply tags e.g. integral, metamodern etc
• Update about page to reflect final content e.g. in the announce Did it on front page in the end

Let's set up some jest tests esp for the data processing

Acceptance

• yarn test runs the jest unit tests

Tasks

• Research options See e.g. https://nextjs.org/docs/testing. Note that we may only use jest for etl testing for now so don't need for the site
• Install jest
• Have at least one basic test

Why: we want a snapshot and a nice PDF people can share around.

Could we auto-generate something decent via markdown, maybe even using a slide framework like

Needs:

• Largely auto-generate from our sources
• Can add some general content (e.g. intro we did last year)
• ...

Select our best visualization and put prominently on the front page. Make it also downloadable / shareable (with our logo on).

Also make a link through to other visualization options (and/or embed other visualizations further down)

Something like this - see #4 for background

Tasks

• Get a working example using the data DONE. https://ecosystem.lifeitself.us/vis2
• Tweak
  • Introduce 2nd level connections (2nd topic)
  • plus some "hand-added" connections - cf our 2020 map https://lifeitself.us/wp-content/uploads/2021/09/Social_Change_Ecosystem-2048x1253.png
• Coloring nodes - color via location in approach spaces
  • show scale on graph
• Beautifying e.g. font

Options

• Be able to drag and drop nodes and have them fixed
• (?) Freeze the graph and use that permanently (?)
• Export png / svg and use that by default as main image
• Show names (at least of intermediate nodes)
• Add images of orgs to nodes - cf http://bl.ocks.org/eesur/be2abfb3155a38be4de4
  • Or at least show on hover etc

We want to automate getting basic info from websites using their metadata (e.g. open graph, social etc).

Bonus

• Get the screenshot - would solve #22
• Get the content

Acceptance

• Working script to extract key info See scripts/etl.js:getMicroLinkInfo

Tasks

• Identify library for doing this
  • Find options Fortunately had starting doing this a few years ago for another project
  • Review and select Found a great one (that's new in fact): https://github.com/microlinkhq/metascraper and it has an associated service https://microlink.io/docs/api/parameters/meta that includes screenshots https://microlink.io/docs/api/parameters/screenshot
• Write script
• Run it

Plus link generation between orgs and people ...

Acceptance

• We have a consolidated database of orgs DONE. See data/ folder
• including screenshots - see #76

Tasks

• Get agreed metadata structure DONE. See Org Metadata sheet
• Automate retrieving data from google spreadsheet (with command line) so we can build from source repeatedly (rather than copy and paste)
  • orgs => cache in data/cache/orgs-spreadsheet.csv
  • activity
  • topic
• convert convert this to standard structure and store in main db directory
• scrape metadata and screenshots #23 and #76
• merge scraped info WONTFIX. Given varying quality of extracted info always need a manual curation step so i don't think this is possible
• Tests for the above WONTFIX. See previous item

We are creating a report on the "State of Sensemaking" that inventories and maps the emerging ecosystem of sensemaking and culturemaking that Life Itself and others are participating in and contributing to.

See more at: https://lifeitself.us/ecosystem-mapping/

Acceptance

• Database with X organizations and Y people
• Website with this information on it
  • Map #24
  • Search and browse
  • Profile page for each org or person
• Announce / PR and Publicity

Tasks

Brief

• Job stories for 2021 v1
• Any examples of existing sites for inspiration

Content

• Database of orgs
• Database of people

Website

• Website mockup
• Profile page per org / person
• Website front page

6 Oct MVP

Site itself

• Profile page working with basic info we already have (e.g. logo)
• (?) we are using next/image to optimize images ...

Minor

• Set titles again

Content work

• Brief charlotte about including a better picture of even a screenshot (?)
• Do rest of items
• Add twitter and social media

Extras

• Screenshots of websites
• Automate extracting information with a command line tool (~2h)

When browsing the directory I want to see all profiles associated to a given topic so I can see who is active in that area

When seeing a topic associated with something I want more info on that topic and exactly what it means so that I understand more about it and what it is

Bonus:

When viewing an org I want to see other orgs with the same topic so that I can find other orgs in the same area

When viewing a topic I want to see what other topics are connected to it so that i see the wider web of context

Acceptance

• Page for each topic with key info (e.g. description)
• Topic page shows associated orgs (by primary and secondary)
• Org pages topic items connect (e.g. link) to topic pages

Bonus

• List of connected topics with strength (or visualization) based on co-occurence of that topic via orgs

Tasks

Acceptance

• Topic list is finalized
• All items live in current directory have topic well applied

Tasks

• Refine list
• Systematically apply (review application) @theo-cox
• Selected emojis
• Selected image from unsplash for each topic
• (Rufus comment) - i wonder if we could reduce list a bit to e.g. 7 or so. A bit lengthy atm.
• Also maybe one word titles (?)

Have a contact widget (and maybe page) powered by e.g. crisp.chat

Acceptance

• Chat widget on site

Tasks

• Review options DONE. Chose chatwoot as open source with 11k stars and has a SaaS plan for free
• Implement (find snippet and embed) DONE

When viewing a profile of an organization I want to see an image to get a quick sense of what they are like and about

When viewing an overview of an organization i want to see a thumbnail to get an intuitive sense of them (TODO: do we want this rather than their logo?)

Acceptance

• We have decided what is primary image for an organization (is it custom, home page, logo) If we have custom use that. Otherwise use home page. Otherwise use logo. Would also be nice to have a "square" one e.g. favicon or twitter for use in visualization
• We have a plan for getting these ... we have plan for home page and logo. Custom one is up to people

Tasks

• List options
• Pro/cons (e.g. look and cost)
• Recommendation

Analysis

As an example for Ekskaret, here's our original image:

vs the logo:

Is this worth it?

When I visit the site I currently load a lot of images (esp on the front page) and this is very slow (and uses lots of bandwidth) and I want to use image optimization so that ...

Acceptance

• What is required for image optimization to work
• Is it worth it
• Do it if it is ... (details to be added)

Tasks

We're getting a number of offers to support the project, and we don't yet have a concrete process for moving these forward or managing volunteers.

Acceptance

• A pattern for responding to offers of support exists
• A backlog of taks suitable for volunteers exists
• We have a plan for engaging and managing volunteers

Tasks

• Strategy meeting between @rufuspollock and @theo-cox held
• Tasks backlog created
• Creation volunteer engagement/management created
• Hack day planned and scheduled (??)

We want to know the core list of attributes we collect for each org.

Tasks

• Review list and finalize
• Update spreadsheet

Results

• ✅ Logo / Profile pic
• ? Featured Image
• ✅ Title
• ✅ URL
• ✅ Blurb
• ✅ Activity (Function)
• ? Tags
• ✅ Founded
• ✅ Key People (and their role)
• ✅ Locale
• ✅ Topics (Themes)
• Links (interviews etc) e.g. Twitter, Youtube

When visiting the site I want to have a visual overview so that I get a sense of this ecosystem and who is in it

Select our best visualization and put prominently on the front page. Make it also downloadable / shareable (with our logo on).

Also make a link through to other visualization options (and/or embed other visualizations further down)

Acceptance

• Ternary visualization on the front page somewhere prominent @khalilcodes
  • choose where it goes (e.g. just underneath hero, or in the overview section) @theo-cox to discuss with @khalilcodes
• intro / caption text written "Fig X: caption ..." @theo-cox See here: https://docs.google.com/document/d/1VIYhUF1Ti8PGqXIuqs-l4G28_1ewxfKuNcdmUwNWPUk/edit?usp=sharing
  • title
  • bit of an explanation

Tasks

• Move core code into a component so it can be used in front page and a separate page
• "Embed" into front page
• write intro text ...

When looking at organizations i want to see them quickly grouped e.g. by primary topic so that I get a sense of clusters

Note: this could work even better if topics were themselves hierarchically organized as we would get 2 levels ...

Example:

• https://observablehq.com/@analyzer2004/plot-gallery
• https://observablehq.com/@d3/zoomable-circle-packing - zoomable and less labels

Acceptance

• A circular packing map like the above example using the topic classification and each smallest circle is an org - probably follow https://observablehq.com/@d3/zoomable-circle-packing but with outer "everything" item as a circle rather than box as in https://observablehq.com/@analyzer2004/plot-gallery

  • have one big circle like the plot
  • only use the primary topic (to start with)
  • zooming

  Using only logos for now based on screenshot reviews in comments

  • labels on the orgs
  • show clear labels if possibles on both the primary circles and the subcircles (take screenshot and we can discuss if messy)

• Circular vis on page /vis2 This page was deleted? It is no longer found.

• Add to frontpage with caption/blurb from https://docs.google.com/document/d/1VIYhUF1Ti8PGqXIuqs-l4G28_1ewxfKuNcdmUwNWPUk/edit# Frontpage links to .../vis where there is a TOC listing the ternary and circle vis, but links to the headings for each vis are not working

Bonus

• Use logos instead of labels on the circles for organizations

Skipping the following for now

• try two levels using the secondary topic
• (BONUS) do by activity too

Next Actions

• Add blurb from https://docs.google.com/document/d/1VIYhUF1Ti8PGqXIuqs-l4G28_1ewxfKuNcdmUwNWPUk/edit# to https://ecosystem.lifeitself.us/vis
• Embed circular vis on https://ecosystem.lifeitself.us/vis
• Link from frontpage to https://ecosystem.lifeitself.us/vis to heading for circular packing vis

Skipping the following for now

Can reuse code from work in #47 and even do in the same page for now.

• pull images direct from URL if there is no cached version
• add labels to the big circles on circular vis - text following the circle, in a font and colour which is easy to read
• try a different colour palette for slightly more contrast between main circle and topic circles (considering not priority)

Just tried to rebuild database and got errors ...

Key questions/things to flag for me:

• We need to set id for every organization or the database build works
• We need to set the column for rd_1_focus as that determines whether orgs are included ...
• Some orgs in there seem to have very little info or info in odd columns

Bigger picture:

• Do we want a "to process" sheet separate from the main sheet perhaps going forward (or use main sheet but use rd_1_focus flag or similar)

Tasks

@catherinet1

• Review rd_1_focus column rd_1_focus column is currently filled for all orgs
• Fill in missing info/check quality of info for all orgs which are green or yellow on rd_1_focus
• fix broken images: New Economics Foundation; Path Retreats; Building Belonging

@khalilcodes
- [ ] automate setting of org id

• automate transfer of info from google form responses sheet to database Not a priority right now

Visualization and categorisation

• Finalize [All of us] 
• Approach 
• Activity  - Fix the one org with arts atm
• Theme/Topic 
• Apply them to first 20 or so organizations [Julie -> Theo to check]
• Visualize [Rufus]

Content

• Front page update [Theo] (brief check in first with Rufus]
  • TODO Theo to finalise wordsmithing
• Directory - TODO 
  • ❗What about all the items with "blank" in their "include in v1" column? Do we include? If we include do they have content etc. @theo
  • E.g. commonweal has no content
  • Julie add Prosocial World and Moral Imaginations
• Can we add curator instructions DONE: very basic info up here https://ecosystem.lifeitself.us/curators
  • Review Julie instructions @theo

When analysing sites or the whole ecosystem I want the full raw textual content so that i can analyse it (automated topic generation) or visualize it (e.g. wordcloud)

Tasks

• Download textual content from sites
  • https://github.com/luin/readability
  • Can do raw text extraction using apiflash - https://api.apiflash.com/v1/urltoimage?access_key=0633900f9b8d453191b8deef9dd3e910&extract_text=true&no_cookie_banners=true&url=https%3A%2F%2Flifeitself.us&response_type=json
  • Could this ourselves given how simple it is (and the types of website we are scraping - i.e. not a lot of ads and other junk)

When presenting lots of data we want to display it in a visual way so as to have an efficient way to grasp and explore it

We want to get an overall sense of the shape of the ecosystem and how it connects to other areas of activity

23 Dec 2021: this is one of those issues that was more research and so could never end (it had no acceptance). At this point i think we've got a good shortlist of initial approaches. In summary:

• Ternary based on approach style #42
• Circular packing or hierarchical tree based on topic or activity #47
  • Richer ecosystem feel if we use double links to topics (and remove central node)
• PCA on the full matrix

NB: we don't have true "network" data at this point in that we don't have links between nodes. So maps should incline more to PCA style i think (i.e. plotting in 2 dimensions a high dimensional space

Acceptance

• Several visual examples of how we can approach this DONE. See below
• Suggestions on which ones to start with DONE. See discussion above.

Tasks

• Research visualization inspiration for the map of the space See Inspirations section below
  • Review https://towardsdatascience.com/the-25-best-data-visualizations-of-2018-93643f0aad04 To arty IMO. Visual candy. Would fail the tufte test
  • Review https://informationisbeautiful.net/2019/winners-of-the-world-data-visualization-prize/
• Research analysis options given our type of data
  (Possible) next steps

Ideas:

• Hack out a quick and dirty PCA WONTFIX for now
  • Find node PCA lib (or do in python) e.g. https://github.com/mljs/pca
• Network mapping against topics (not sure how well this will work but guess we have to try) #47

Analysis

• We could do topic extraction from the source content e.g. https://towardsdatascience.com/topic-modeling-with-bert-779f7db187e6. Cruder would just be looking for unusual keywords e.g. sensemaking
• Directed network graph linking entities if they share the same topic using force directed
• OR linking entities to topics
• PCA with activity or topics as dimensions
• Visualizing topics using the connections of co-occurence for organizations ...
  • Make topics the size of the number of items in that items
  • https://observablehq.com/@analyzer2004/plot-gallery

Simple

• Circular packing with org logos (if circular)
  • favicon if they have one ...
• Word cloud from org names ...

Inspirations

Ternary Plot

• Library: https://github.com/davenquinn/d3-ternary
• App: https://www.ternaryplot.com
• Example: https://observablehq.com/@dixonj13/zoomable-ternary-plot

Network map

Especially useful for e.g. intellectual influences if in a tradition cf #46

https://bl.ocks.org/d3noob/8375092

Force directed

https://bl.ocks.org/heybignick/3faf257bbbbc7743bb72310d03b86ee8

https://observablehq.com/@sandravizmad/force-directed-layout - this is pretty nice

Circular packing

• https://observablehq.com/@analyzer2004/plot-gallery

Word Cloud

TODO

Matrix Co-occurence

https://bost.ocks.org/mike/miserables/

Examples

Map of the Internet 2021

Pseudo-map like e.g. https://www.halcyonmaps.com/#/map-of-the-internet-2021/ and more like this on www.halcyonmaps.com/

Rappers word usage

https://pudding.cool/projects/vocabulary/index.html

The Political Compass

When providing info on an organization/initiative I want to have a screenshot of their website so that I have a good sense of them (both feel and what they do) (cf #21)

Acceptance

• What service do we use? Microlink.io with backup of https://apiflash.com
• Where do we cache images (if anywhere)
• How do we serve them ... (if different)

Tasks

• What service do we use Use microlink.io
  • List of options for screenshot services: urlbox, url2png, apiflash
  • Evaluate them
  • Choose one
• Do we cache? ANS: yes, i think since we then have a permanent copy plus we need this for resizing etc (though could be a way to sort of proxy but inelegant
• How do we serve? ANS: straight out of our image storage system

Analysis

• urlbox.io $29/month seems pretty good ... however not integrated with cloudinary and more expensive
• url2png: $29/month. original but somewhat dated. Integrated with cloudinary (but not sure how useful that is if we want to cache)
• apiflash: 0/100mo or $7/1000. good so far ... Quality is good. Good API. Pricing is a lot better than other two
• thumbnail.ws (free for small amounts
• https://microlink.io - 12euro / 14k requests. (0 or 100 / day). By far the best and clearly good dev behind it

Notes

• Testing with lifeitself.us
  • url2png: very poor with big white space
  • urlbox.io better but still had some space, plus no way to really play around (e.g. full page) without signing up
  • apiflash: the best and easy to play around with - see e.g. https://api.apiflash.com/v1/urltoimage?access_key=0633900f9b8d453191b8deef9dd3e910&url=https://lifeitself.us&full_page=true&height=768&width=1366&quality=100

Starting a curators / contributors guide.

When I am contributing to the database I want to know how to do that and especially what fields there are and what they mean so that i can be efficient and not have to ask lots of questions

When I have some organisations that I'd like to contribute to the database, I want to understand what the criteria for relevance and acceptance in the database are (e.g. do I need to be personally in contact with the organisation/how much vetting do I need to do or will someone else vet my contribution) so that I know whether it is worth my time to contribute my suggestions.

Acceptance

• /curators/ exists on the website DONE. https://ecosystem.lifeitself.us/curators
• instructions re images DONE? but may be out of date now ...
• info on metadata fields e.g. embedding appropriately of the schema spreadsheet Have a link but no embedding atm

Tasks

• Boot the page
• Draft guide: https://docs.google.com/document/d/1UhtUtFJPOD5UYz6aUpALHl0Y8yGPeEaviAgFbn5OUjw/edit#
• Finalize info on metadata fields Org metadata tab of spreadsheet explains metadata fields
• #61
• Create obsidian template for a new profile

Want a page on the site/wiki about related efforts and their status.

Job Stories

When building this directory and project i want to know about existing work that we can learn from, collaborate with, build on etc so that we maximize our efficiency and impact

When coming across this project I want to know what other similar projects there are so I can check them out to

When coming across this project (and knowing about similar ones) I want to know if they are aware so that I know they are not duplicating inadvertantly

Acceptance

• Related efforts page up with outline of what it is about ✅2023-11-30 live at with material we have below https://ecosystem.lifeitself.org/related-efforts
• Added related efforts we know about (see below) ✅2023-11-30 have added all below

Tasks

Research

• #160
• Compile a list of the related projects we want to include on the page

Design

Who/what is this page for

• Turn material into a blog post(s)? (e.g. 4 most interesting) ... => content "marketing" of a kind
• Publish our existing notes (so can be found)
  • Build credibility for our mapping and field-building efforts by demonstrating awareness of similar and related efforts
  • Learn from existing similar and related efforts so that
    we're not unnecessarily trying to reinvent the wheel, but build on existing work

Future / Later

Distinguish two categories:

• Similar ecosystem maps, e.g. Gaianet, Catalist,a Mindset for the Anthropocene
• maps/DBs of related ecosystems, e.g. Global Atlas of Environmental Justice?
• resource libraries on related topics

Notes

metacrisis.org

https://metacrisis.org/

Mentioned in this thread: https://twitter.com/rufuspollock/status/1501160815277318146

Started in 2021/2022?

Liminal web post (one-off) by Joe Lightfoot

https://www.joelightfoot.org/post/the-liminal-web-mapping-an-emergent-subculture-of-sensemakers-meta-theorists-systems-poets

Nov 18 2021

A Mindset for the Anthropocene (2016-2021?)

https://www.ama-project.org

Welcome to the AMA Project, a platform for catalyzing synergies between inner transformation and sustainability!

Through our interactive database you can explore the global network of People, initiatives, organizations, publications and other resources that link the cultivation of subjectivity with efforts for the socio-ecological transformation.

We hope you find inspiration and valuable connections!
Initiated by the IASS Potsdam

The AMA Project is a transdisciplinary research process initiated and hosted by the IASS Potsdam a government funded German sustainability research institute and think tank.

NB: we have had some contact with the organizers of this project and it may be coming to an end now.

Data

• https://www.ama-project.org/explore/
• 258 items

Could not find a direct download. Some network sniffing yielded this which looks useful:

• https://www.ama-project.org/wp-content/themes/ama/cache/nodes_light.json
• https://www.ama-project.org/wp-content/themes/ama/cache/taxonomy.json

Cache of this data here: https://drive.google.com/drive/folders/1Arb63uGCD0bDHPRrPdTpvCBMtKwfVEVq

To process

• Gaianet
• https://www.localfutures.org/action-resources/maps-of-alternatives/
• Global Ecovillage Network Solution Library
• Global Indigenous Wisdom Library
• Resources - Vikalp Sangam
• Good of the Whole
• One Community Global
• EJAtlas - Global Atlas of Environmental Justice
• https://metamaps.cc/, cf List of Orgs from YG for contact
• http://transformap.co/
• https://communitymaps.org.uk/welcome
• The Field Guide to a Regenerative Economy - New Shape Prize Library (Global Challenges Foundation)
• Regenerecao Global
• Project Drawdown Solutions Library
• Critical Turning Points Database
• https://www.catalist.network/
• https://www.transformationscommunity.org/systems-education-catalog (From BG)
• http://www.communityloversguide.org/ - examples of innovative local community projects

From PW, 2023-08-18

• https://www.fito.network/tools (if we need to find additional (orgs that offer) coherence building tools)
• https://lookerstudio.google.com/u/0/reporting/d834b3dc-21cd-464a-a23a-495544ab17b0/page/hwh9B
• illuminatesystems.org/visualisingthefield
• greaterthanthesum.com/social-system-maps/
  (if we need additional sources of orgs that we may have missed/if we want to look at other sources to prevent a too siloed approach)

From the SINE newtork

Research / mockups on sites (not just design but UX / map)

When designing the site (and generally doing UX, or creating viz) I want to have inspirational examples so that I can use these to guide what we do

Acceptance

• Notes / Moodboard showing result of research DONE> See https://www.figma.com/file/rIm4V6eauW1SPGlVGA0F4H/LifeItself-Ecosystem-Design-Research?node-id=0%3A1

Tasks

• Identify examples of "directory" sites
• Screenshots etc + notes

Analysis

Examples

• https://knightfoundation.org/features/civictech/
  • https://knightfoundation.org/wp-content/uploads/2019/06/knight-civic-tech.pdf
• https://www.cohabitat.io/en/projects/
• https://www.awwwards.com/awwwards/collections/free-fonts/

E.g. https://docs.google.com/drawings/d/1PXz7tqwSvSzSJEumKJqJLqnf4qSQst0LH3g1hL2dKLw/edit

See also Joe Lightfoot effort https://www.joelightfoot.org/post/the-liminal-web-mapping-an-emergent-subculture-of-sensemakers-meta-theorists-systems-poets:

When running the site i want to know how many people are visiting what so that i know what is useful

Acceptance

• Analytics installed DONE
• Working (i.e. info showing up in our analytics dashboard)

Tasks

• Register a new property DONE: See new property
• Work out how to do this in next.js DONE: Follow https://github.com/vercel/next.js/blob/canary/examples/with-google-analytics/
• Do it

We have a working page atm but we need to finalize. Somewhat dependent on #17 and #18

Acceptance

• Profile page working with info we already have (e.g. logo) Most done. Remaining is people. ALL DONE

BONUS

• Show home page screenshot as well as logo (if we have it)

Tasks

• Markdown format description
• Show location (extract primary location) Done crudely
• Show activities (and link to page for these)
• Show topics
• Show people using user-icon from heroicons

Analysis

Ideas for stuff we could add e.g.

• a word cloud based on text on the orgs' front page see e.g. https://github.com/jasondavies/d3-cloud

Create a ternary plot based on the three (sum to one) "approach to change" dimensions

• Library: https://github.com/davenquinn/d3-ternary
• App: https://www.ternaryplot.com
• Example: https://observablehq.com/@dixonj13/zoomable-ternary-plot

Acceptance

• Ternary diagram based on approach type
• Can see info on org on hover

Tasks

• Identify library DONE. Use d3 and d3-ternary https://github.com/davenquinn/d3-ternary
• Try it out with some simple data
• Design it (a bit) In progress https://docs.google.com/drawings/d/14MEAE9PC1Vp9rb6QlDejat62PRXS75iprkGOl2ziD7I/edit
• Explanatory text @rufuspollock or @theo-cox
• Hover shows label DONE: with simple title (though not obvious)
• Better hoverable/tool-tip labels DONE
  • Make text a bit smaller
  • Remove border (?)
  • Use a nicer font (either inconsolata/source code mono or our standard font for site which is nunito sans)
• Try out showing all labels (and paste a screenshot in comments) DONE. See comment below. Basic conclusion is a bit messy but useful. Maybe if we make labels a lot smaller and maybe rotate to 45 degrees
  • Reduce font size to 6 or 7 and retry
  • Rotate labels 45 degrees Not worth it
  • if good we can add a toggle for this (later)
• Color organization "dots" based on their topic (or activity) so we can see that as well
  • Assign color scale to primary topic Using d3 color scale
  • Apply that to organization dot
  • Show scale with explanation - see https://observablehq.com/@d3/color-legend DONE: currently outside of SVG
    • Can we show this stacked and several font sizes down e.g. like
      
    • Move legend below chart
• Add our logo - see public/life-itself-logo.svg (position top right probably) DONE. See screenshot in comment below
  • Move logo in a bit to be above diagram e.g. like
  • Move the life itself logo up a bit - align with top and right if possible (so RHS of logo is flush with right of visible diagram)
• Make circle size 3 and see what we think (take another screenshot)
• Re-add the scale on the sides with percentages (and maybe grid) (?) not sure as what are the labels, maybe you need an arrow?
  • Probably remove or significantly change anchor circles
  • re-add anchor labels (and closer)
  • Make anchor labels smaller e.g. size 10
  • Move anchor labels closer to anchor point
  • move inner change back to top (same orientations as before)
  • move red axes arrows out of diagram and make a bit shorter (and same color as axes)
  • bring back a small black dot at the corners (?)
  • maybe make the color of axes a bit "black" e.g. #333
• have labels to the right of the dots (and closer if possible) (rather than below)
  • don't clip outside of the border (but leave the border for now)

Bonus

• Making the diagram bigger / full screen DONE
• (?) Remove big red dots and divide with lines as per sketch below IN PROGRESS Removed big red dot - separating lines maybe not important for now
  
• Zoom support - see https://observablehq.com/@julesblm/introducing-d3-ternary#zooming
• export svg / png
• PNG and SVG export / embed
• Make colors nicer see e.g. rufuspollock/ux-patterns#5

Someday maybe

• Labelling improvements e.g. label collision detection and avoidance see e.g. https://github.com/tinker10/D3-Labeler and https://stackoverflow.com/questions/17425268/d3js-automatic-labels-placement-to-avoid-overlaps-force-repulsion
• Search to highlight an organization i.e. i can search with a name and then select an organization and it highlights in the vis (maybe for more than one org)
• Show both topics the org is associated with (maybe a bullseye coloring of the dot?)

Documentation

• Library: ...
• A direct example: https://observablehq.com/@dixonj13/zoomable-ternary-plot

There are various technical architecture considerations to resolve.

Tasks

• do we integrate with wordpress NO
• how do we store and manage content/data e.g. spreadsheet on own, markdown on own, a mix ... ATM just the spreadsheet
  • how do we manage relationships from org to org and org to person We don't atm
• How do we acquire and store images? We use cloudinary. See #16

Analysis

Content/Data Architecture

3 options

• In spreadsheet
• In markdown files
• Mixed

For now go for option 1.

Research on image

• image hosting services https://www.notion.so/11b5deedc98e4cada724ac7f9c505984?v=37e371d0ac43420894fa607ee47f3f0d
• site screenshot services.
  • https://urlbox.io

Aside: Wordpress + Next.JS

• Official next.js approach (basic and solid) https://github.com/vercel/next.js/blob/canary/examples/cms-wordpress/README.md
• 227 ⭐ more sophisticated https://github.com/imranhsayed/nextjs-headless-wordpress
• 323 ⭐ pretty complex full featured https://github.com/WebDevStudios/nextjs-wordpress-starter

When I'm working on/managing the ecosystem mapping project I don't want to have to waste time having someone manually transfer information from the submission form into the DB and manually pushing the website, so that I can use my time on more important matters.

We have a responses sheet linked to the Google Form for people to add or edit orgs: https://docs.google.com/spreadsheets/d/1t0sCAbQfXiiyqRo3TbaWX4gXdSpPe8QQ9D78K6spP_M/edit?resourcekey#gid=1959523519

It would be great to automate the transfer of content from this to the main ecosystem DB to avoid wasted human effort.

A final nice to have step would be to automate the pushing from the DB to the website to auto generate new entries.

Acceptance

• Confirmed what is feasible re process automation
• Automated processes which we can automate (or can at relatively low effort/cost)

Tasks

...

Simple dashboard section at top of front page e.g.

• X organizations
• Z topics (with no of orgs per topics)
• Other nice info

https://excalidraw.com/#room=e78d1dc029bca900061e,1vU6W2HJwJU6l0iz5FqAtA

Acceptance

• Site is themed similar to mockup
• Profile page is themed similar to mockup

We want to get a rough design for the site in e.g. Figma

Mockup in figma in progress: https://www.figma.com/file/u3KjFsTPbQfosVjuG5awhF/State-of-Sensemaking-Mockup?node-id=0%3A1

Acceptance

• Mockup theme (front page hero)
• Mockup front page
• Mockup profile page

Tasks

• Mockup theme (front page hero)
• Mockup front page
• Mockup profile page

Tasks

• Geocode locations Probably use https://api.opencagedata.com/geocode/v1/json?q=PLACENAME&key=YOUR-API-KEY
• Display locations on a map
  • Identify library React simple maps seems decent https://www.react-simple-maps.io/examples/custom-markers/
  • Implement it

We need some key content e.g. a short blurb on home page. A fuller about page with background. Maybe a page on "naming" the space?

Acceptance

Most blurb content is now here https://docs.google.com/document/d/1zyxadZtRpHYMZ35Rxrq_jgNxMxkYg7K3guhqf7XeR48/edit#

• Blurb for front page
  • Tagline
  • Paragraph (why, what, how ...)
• How to add your organization (how to edit your info)
• About page Very solid now: https://ecosystem.lifeitself.us/about/
  • Why
  • What
  • How
  • Disclaimer
• 2021 report ...

Tasks

• ...

When using the ecosystem.lifeitself.us I want the UX to be as functional and intuitive as possible so it is easy for me to use and derive value from it as a tool.

Further background is Nathen has been using the site, and offered the following feedback:

When you open up an individual project and then press the back button it takes you back to the top of the home page. It might be better to either open each project in a new window, or make each project a pop-up, or anchor to the point on the page when you press back.

Acceptance

• Implemented method of allowing people to return to the same spot on the profile list having reviewed an individual profile