https://github.com/john-guerra/phototreemap
Science Score: 26.0%
This score indicates how likely this project is to be science-related based on various indicators:
-
○CITATION.cff file
-
✓codemeta.json file
Found codemeta.json file -
✓.zenodo.json file
Found .zenodo.json file -
○DOI references
-
○Academic publication links
-
○Academic email domains
-
○Institutional organization owner
-
○JOSS paper metadata
-
○Scientific vocabulary similarity
Low similarity (7.7%) to scientific vocabulary
Repository
Basic Info
- Host: GitHub
- Owner: john-guerra
- Language: JavaScript
- Default Branch: master
- Size: 43.9 MB
Statistics
- Stars: 0
- Watchers: 3
- Forks: 1
- Open Issues: 0
- Releases: 0
Metadata Files
README.md
PhotoTreemap
A library for displaying groups of photos based on its metadata on a TreeMap.
Examples
Basic Example
This Basic Example create a PhotoTreeMap with minimum configuration and with a small hierarchy. The source code is in examples/basic.
Instagram Trends
Instagram Trends create a PhotoTreeMap to compare the popularity of Instagram users. This example require a medium configuration. The source code is in examples/ptm-instagram-comparison.
MOMA Navigator
MOMA Navigator create a PhotoTreeMap to navigate around the artworks of The Museum of Modern Art (MOMA) based in its characteristics. This example require a high configuration and load 131k records representing the MOMA's artworks. The source code is in examples/ptm-moma.
Usage
Imports
To start using the PhotoTreeMap you will need in your HTML a target element to display the tree, a target element to display the breadcrumbs and to import the following files: PhotoTreeMap.js, ShannonEntropy.js, d3.v3.js, jquery-3.3.1.js and defaultStyles.css.
Imports Example
html
<head>
<link rel="stylesheet" href="https://rawgit.com/john-guerra/photoTreemap/master/source/css/defaultStyles.css">
</head>
...
<div class="mainContainer">
<div id="breadcrumbs"></div>
<div id="target"></div>
</div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://rawgit.com/john-guerra/photoTreemap/master/source/ShannonEntropy.js"></script>
<script src="https://rawgit.com/john-guerra/photoTreemap/master/source/PhotoTreeMap.js"></script>
Hierarchy
Before create the PhotoTreeMap you need to create the Hierarchy to display. A Hierarchy is the root Node of the tree, each Node must have at least the following properties:
| Name | Type | Description | | ------------- |------------- | ----- | | id | string | ID of the node.| | value | number | Value of the node, this will be used to sort the nodes and they will be displayed depending on it.| | label | string | Text to be displayed in each Node.|
Each Node with children should have the children property.
| Name | Type | Description | | ------------- |------------- | ----- | | children | Array <Node> | An array with nodes, which represent the node's children.|
In addition, the leaves or the nodes which represents a category must to have the property img.
| Name | Type | Description | | ------------- |------------- | ----- | | img | string | Source of the image of the Node, the root Node should not have img.|
Hierarchy Example
javascript
// Root Node of the Hierarchy
const root = {
id: "root",
value: 120,
label:'Animals',
children: [
{
id: "Children1",
value: 10,
label:'Fish',
img: "https://images.unsplash.com/photo-1513570050319-4797c2aef25e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=9a0e774d1c6dc64d2db999ac99fd5dd0&auto=format&fit=crop&w=1079&q=80",
},
{
id: "Children2",
value: 10,
label:'Bug',
img: "https://images.unsplash.com/photo-1519167734660-d1a18d66190b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=cfde3f91a1c44c82fc604ffc2bf5af19&auto=format&fit=crop&w=1049&q=80",
},
{
id: "Children3",
value: 50,
label:'Bird',
img: "https://images.unsplash.com/photo-1482330625994-3bb3c90a5d05?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e0ead9e00f1af258d880308b9a0af37b&auto=format&fit=crop&w=1052&q=80",
},
{
id: "Children4",
value: 50,
label:'Felines',
img: "https://images.unsplash.com/photo-1507984211203-76701d7bb120?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=eacbf50fac29a13afba26ad7499cedee&auto=format&fit=crop&w=1052&q=80",
children: [
{
id: "Children5",
value: 20,
label:'Cat',
img: "https://images.unsplash.com/photo-1507984211203-76701d7bb120?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=eacbf50fac29a13afba26ad7499cedee&auto=format&fit=crop&w=1052&q=80"
},
{
id: "Children6",
value: 30,
label:'Tiger',
img: "https://images.unsplash.com/photo-1501705388883-4ed8a543392c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=9da9e3aa07ca3d4d09a08ec168815d68&auto=format&fit=crop&w=1050&q=80"
},
],
}
],
};
Setup
Now you will need to create a new TreeMap and setup it. All possible configurations are applicable using a chaining approach, so each function return the PhotoTreeMap itself. All functions (configurations) are optional and listed below:
| Name | Type | Description | | ------------- |------------- | ----- | | breadCrumsHtmlID | string | ID of the element in which will be displayed the breadcrumbs.| | zoomable | boolean | Allows the PhotoTreeMap to be zoomable. If it is false, all the images will be showed at the same time.| | height | number | Set the height in pixels of the PhotoTreeMap.| | width | number | Set the width in pixels of the PhotoTreeMap.| | chainedAnimations | boolean | Allows the PhotoTreeMap to chain its animations.| | animationDuration | number | Set the duration of the animations.| | padding | number | Set the padding in pixels of the PhotoTreeMap.| | sort | string | Set the property used to sort the Nodes, as default they are sorted by the property value.| | value | string | Set the property used as value of the Nodes, as default their value is the property value.| | label | string | Set the property shown as label, as default the property showed is label.| | labelValue | string | Set the property shown as label value, as default the property showed is labelValue.| | showLabel | boolean | Enable or disable the display of labels in the Nodes.| | useShannon | boolean | Enable the PhotoTreeMap to use ShannonEntropy, it allows the Nodes to display the most relevant part of the image.|
Finally, bind the data with the PhotoTreeMap by calling the update function and send as param the root of the hierarchy to display.
| Name | Type | Description | | ------------- |------------- | ----- | | update | Hierarchy | Bind the hierarchy with the PhotoTreeMap.|
Setup Example
javascript
// Create a new photoTreemap, setup and finally add the data
let photoTreemap = new TreeMap("#target")
.breadCrumsHtmlID('#breadcrumbs')
.zoomable(true)
.update(root);
Styles
The PhotoTreeMap as default have styles defined in defaultStyles.css. However, you can override these styles, the classes used are: .node, .leaf, .nodeText, .nodeTextTitle, .nodeTextValue and .nodeBG.
Owner
- Name: John Alexis Guerra Gómez
- Login: john-guerra
- Kind: user
- Location: San Francisco, California
- Company: Northeastern University Silicon Valley
- Website: http://johnguerra.co
- Twitter: duto_guerra
- Repositories: 40
- Profile: https://github.com/john-guerra
I love to build dataviz for Insight discovery. I also love to put technology to the service of humanity
GitHub Events
Total
Last Year
Issues and Pull Requests
Last synced: 9 months ago
All Time
- Total issues: 0
- Total pull requests: 0
- Average time to close issues: N/A
- Average time to close pull requests: N/A
- Total issue authors: 0
- Total pull request authors: 0
- Average comments per issue: 0
- Average comments per pull request: 0
- Merged pull requests: 0
- Bot issues: 0
- Bot pull requests: 0
Past Year
- Issues: 0
- Pull requests: 0
- Average time to close issues: N/A
- Average time to close pull requests: N/A
- Issue authors: 0
- Pull request authors: 0
- Average comments per issue: 0
- Average comments per pull request: 0
- Merged pull requests: 0
- Bot issues: 0
- Bot pull requests: 0