{"id":17030648,"url":"https://github.com/vsoch/codeart-examples","last_synced_at":"2025-03-22T20:28:46.768Z","repository":{"id":141667656,"uuid":"231963784","full_name":"vsoch/codeart-examples","owner":"vsoch","description":"Separate examples repository for codeart Python module, since data and image files tend to be large.","archived":false,"fork":false,"pushed_at":"2020-01-09T16:34:22.000Z","size":106591,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-28T00:30:28.126Z","etag":null,"topics":["codeart"],"latest_commit_sha":null,"homepage":"https://vsoch.github.io/codeart-examples/parse_repo/sorted/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vsoch.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-01-05T19:13:18.000Z","updated_at":"2020-07-04T15:44:44.000Z","dependencies_parsed_at":null,"dependency_job_id":"7f4a0efd-4dba-4cd7-bbc3-be3adbe486de","html_url":"https://github.com/vsoch/codeart-examples","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vsoch%2Fcodeart-examples","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vsoch%2Fcodeart-examples/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vsoch%2Fcodeart-examples/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vsoch%2Fcodeart-examples/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vsoch","download_url":"https://codeload.github.com/vsoch/codeart-examples/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245018149,"owners_count":20547937,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["codeart"],"created_at":"2024-10-14T08:07:45.346Z","updated_at":"2025-03-22T20:28:46.745Z","avatar_url":"https://github.com/vsoch.png","language":"HTML","readme":"# ColorArt Examples\n\n[![GitHub actions status](https://github.com/vsoch/codeart-examples/workflows/generate-codeart/badge.svg?branch=master)](https://github.com/vsoch/codeart-examples/actions?query=branch%3Amaster+workflow%3Agenerate-codeart)\n\nThis is an examples repository to supplement [codeart](https://github.com/vsoch/codeart).\nThe repository was getting large so I decided to move image and data files over here.\n\n## Dockerfiles\n\nThe Dockerfiles [dinosaur dataset](https://github.com/vsoch/dockerfiles) has about 100K Dockerfiles, \nand this small example shows creating visualizations for them. The [interactive version](https://vsoch.github.io/codeart-examples/dockerfiles/web/) isnt' very useful here because we only have one file type, and the range of colors\nis limited from greens to blues. This project helped to develop the [sorted interactive version](https://vsoch.github.io/codeart-examples/dockerfiles/sorted/) of the colormap.\n\n## Parse Repo\n\nThe [parse_repo](parse_repo) folder shows how to parse a repository (spack)\nand then generate a color gradient lookup. The first attempt at the color grid\n[can be seen here](https://vsoch.github.io/codeart-examples/parse_repo/web/)\nand this was updated to better organize, [seen here](https://vsoch.github.io/codeart-examples/parse_repo/sorted/).\nFor the second, since the Word2Vec model derives similar embeddings represented in color,\nthis means that similar colors equate to similar terms. You can explore the visualization\nwith this knowledge.\n\nTo generate a custom codeart image (with text), the library can\nalso do that, with an [example here](https://vsoch.github.io/codeart-examples/parse_repo/text.html)\nand shown below.\n\n![parse_repo/text.png](parse_repo/text.png)\n\n\nAnd of course it would be more appropriate to write the name of the software as the\n[text instead](https://vsoch.github.io/codeart-examples/parse_repo/spack.html)!\n\n![parse_repo/spack-text.png](parse_repo/spack-text.png)\n\nand of course you have to zoom in to see that the pixels are actually code, colored\nbased on their context thanks to Word2Vec.\n\nFinally, to generate a d3 tree that shows code images in a folder on mouseover,\nsee [this example](https://vsoch.github.io/codeart-examples/parse_repo/tree.html).\n\n![parse_repo/tree.png](parse_repo/tree.png)\n\nIt's not a great visualization, could be a lot better.\n\n### Interactive\n\nThe [interactive version](https://vsoch.github.io/codeart-examples/parse_repo/web/) shows the interactive color grid, where groups (in this case extensions) are colored based on salience. Click an extension to see relevant terms in the embeddings model.\n\n### Abstract\nThe abstract versions, including those for:\n\n   - [all files](https://vsoch.github.io/codeart-examples/parse_repo/codeartall.html)\n   - [python](https://vsoch.github.io/codeart-examples/parse_repo/codeart.py.html)\n   - [patch](https://vsoch.github.io/codeart-examples/parse_repo/codeart.patch.html) \n   - [txt](https://vsoch.github.io/codeart-examples/parse_repo/codeart.txt.html) \n   - [md](https://vsoch.github.io/codeart-examples/parse_repo/codeart.md.html) \n   - [sh](https://vsoch.github.io/codeart-examples/parse_repo/codeart.sh.html) \n   - [rst](https://vsoch.github.io/codeart-examples/parse_repo/codeart.rst.html) \n   - [yaml](https://vsoch.github.io/codeart-examples/parse_repo/codeart.yaml.html) \n\nare graphics generated with pictures of the code themself. By far, the \n[all files](https://vsoch.github.io/codeart-examples/parse_repo/codeartall.html)\ngeneration is the most interesting and abstract!\n\n![parse_repo/all.png](parse_repo/all.png)\n\n\nThe interactive version is cooler as you can click on any of the files to see\nin slightly more detail.\n\n## Parse by Year\n\nIs an example project to use codeart to parse a large Python code base, determine\nyear of creation using the GitHub api, and then break into groups based on the year.\nThis small project helped me to develop the interactive colomap example, which\nyou can view [here](https://vsoch.github.io/codeart-examples/parse_by_year/web) or\nthe previous version (not sorted) [here](https://vsoch.github.io/codeart-examples/parse_by_year/web-unsorted/)\n\nThe example also generates static images, along with a gif (animation) to\nshow the change in data over time.\n\n![colormap-groups.gif](parse_by_year/colormap-groups.gif)\n\nOf course this was impossible to explore, hence why I made the interactive version.\n\n## Derive Colormap\n\nThe [derive_colormap](derive_colormap) folder an example to show working on deriving a colormap from a set of embeddings. \nThis means that we start with 3d, project to 2d, and then use Voronoi to\nfill border cells. Here is the original 3d map:\n\n![derive_colormap/colormap-3d.png](derive_colormap/colormap-3d.png)\n\nwhich we then project to 2d\n\n![derive_colormap/colormap-2d-example.png](derive_colormap/colormap-2d-example.png)\n\nAnd then the Voronoi exercise didn't work out as intended (and I pursued other methods\ninstead)\n\n![derive_colormap/sploosh.png](derive_colormap/sploosh.png)\n\nAnd ultimately wound up developing an interactive colormap (too large to add to the \nrepo here!) that is better sorted by rows and columns (and generates in a reasonable time).\nNote that since this is for all of my Python code, the interface is a bit clunky.\nProbably something with canvas would work better here for this number of points.\nThe notebook is useful to get someone started with a similar project.\n\n## Parse Folders\n\nThe [parse_folders](parse_folders) is a similar effort to \"Parse Repo\" above,\nbut instead we parse folders on our local file system and generate a colors\ngradient. This is the color gradient across all extensions for the model:\n\n![parse_folders/colors-gradient.png](parse_folders/colors-gradient.png)\n\nOr instead, you can generate an [interactive version](https://vsoch.github.io/codeart-examples/parse_repo/web/)\nthat allows for mousing over colors to see terms, and clicking on the list\nof extensions to see relevant terms. The opacity corresponds to the relative\ncount of the term for the extension. For spack, most terms will be derived\nfrom Python files.\n\n## GitHub Workflow\n\nA [github workflow](.github/workflows/create-gallery.yml) is provided to create a gallery!\nThe workflow opens a pull request, and deploys the files to the docs folder. You can see\nthe live version [here](https://vsoch.github.io/codeart-examples/docs/).\n\n![docs/codeart.png](docs/codeart.png)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvsoch%2Fcodeart-examples","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvsoch%2Fcodeart-examples","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvsoch%2Fcodeart-examples/lists"}