npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

parenthood

v0.0.7

Published

a way to organize relationships in plots via a simple text format (ppl). generates graphviz dot output.

Downloads

17

Readme

parenthood

intro

My idea here is to supply a simple, legible format to annotate on characters and their relationships during the consumption of fictional stories, like books or tv shows. Nothing prevents you from depicting your family tree or company org chart.

Besides the format itself, which I exemplify below, I provide a parser that generates a graphviz representation of it, suitable to be rendered in popular formats such as png or pdf.

I see a good application of this, besides the reader writing it as he/she goes, as the author or publisher providing a version per chapter/episode in order to aid the consumer and not spoil with too much info. Visiting each version allows you not only to resume where you left off but also a window into the evolution of the story.

example ppl file:

Zeek + Camille
  Adam
  Sarah
  Julia
  Crosby

Adam + Kristina
  Haddie
  Max

Sarah +/ Seth
  Amber
  Drew

Julia + Joel
  Sydney

Crosby .. Jasmine
  Jabbar

Its output

This would output this result graphviz data: parenthood.gv.

And using graphviz you would get:

generated png diagram
svg diagram, pdf diagram ...

It integrates with Graphviz as seen in this demo.
It also integrates with Cytoscape as seen in this demo.
You can find more details about these integrations below.

The PPL format

The ppl format is a text file with a set of relationship.

A relationship can be described by 2 people and an optional set of siblings

<person 1> <relationship_kind> <person 2>
    <sibling 1>
    ...
    <sibling n>

relationship kinds can be:

  • .. seem to be getting along (cyan)
  • + together
  • +/ used to be together (red)

Content after a hash # is considered comments and ignored.

The indentation for siblings is irrelevant. Number of spaces or tabs is irrelevant.

limitations

The layout may get cluttered with too many people or people with many relationships.
If you mention the same person with different names you're spawning a different person. Should be easy to spot.

installing

npm install parenthood
or
yarn add parenthood

depending on what you want to do you may continue to:

technical remarks

Using Javascript modules to share the most possible between browser and node. If you need to run with without modules, conversion to commonjs or window export is trivial.

The code itself has no dependencies. Jest brings a lot of deps along just to support mjs (sorry!).

I'm not an expert in graphviz and the parser is super simple. I wanted to get the point across and contributions are welcome!

disclaimer

Some Parenthood TV Series characters were used here as an example.
I have no affiliation to the series and don't intend to spoil. 🙏

TODOs

Technical

  • confirm bin works via npm

Features

  • support several relationships with 1 character better
  • way to group characters is groups (think venn diagram) to depict location / belonging to a group etc. Not sure yet how to do it without introducing complexity and break the layout

reference