Adding basic visualization for organization list using P5.js #16
Conversation
list.html
Outdated
| @@ -1,3 +1,4 @@ | |||
| <!-- | |||
There was a problem hiding this comment.
leave this page as a boring list, and create a new page for your lovely UI ;-)
list.html
Outdated
|
|
||
| <div id="container"> | ||
| <div id="head"> | ||
|   |
There was a problem hiding this comment.
the entity needs a trailing comma; like &npsp;
list.html
Outdated
| <div id="head"> | ||
|   | ||
| <div id="title"> Hello </div> | ||
| <div id="quit-btn"> × </div> |
jsonloader.js
Outdated
|
|
||
| var xobj = new XMLHttpRequest(); | ||
| xobj.overrideMimeType("application/json"); | ||
| xobj.open('GET', './_data/orgs.json', true); |
There was a problem hiding this comment.
this file wasnt being published, but I've fixed that: 3424380
|
@gitmate-bot rebase |
|
Hey! I'm GitMate.io! This pull request is being rebased automatically. Please DO NOT push while rebase is in progress or your changes would be lost permanently |
|
Automated rebase with GitMate.io was successful! 🎉 |
|
yay, preview is working https://deploy-preview-16--soc-orgs.netlify.com/list.html |
visualizer.js
Outdated
|
|
||
| document.getElementById('title').innerHTML = node[index].name | ||
| document.getElementById('desc').innerHTML = node[index].tagline | ||
| document.getElementById('web').setAttribute('href', node[index].website_url |
There was a problem hiding this comment.
change this to point to the generated page, e.g. https://soc-orgs.netlify.com/orgs/aimacode
jsonloader.js
Outdated
| xobj.overrideMimeType("application/json"); | ||
| xobj.open('GET', './_data/orgs.json', true); | ||
| xobj.onreadystatechange = () => { | ||
| if (xobj.readyState == 4 && xobj.status == "200") { |
There was a problem hiding this comment.
Use === instead of ==. "200" should be an integer.
list.html
Outdated
|
|
||
|
|
||
| #container { | ||
| width: 25%; |
jsonloader.js
Outdated
| } | ||
|
|
||
|
|
||
| loadData = (cb) => { |
There was a problem hiding this comment.
(cb) doesn't need brackets. loadData = cb => { is fine.
visualizer.js
Outdated
| loadData(json => { | ||
| json.forEach(element => { | ||
| data.push(element) | ||
| if(category.find(value => value.category_name == element.category) == null) |
There was a problem hiding this comment.
Give a space after if keyword and use === instead of ==.
visualizer.js
Outdated
| ] | ||
|
|
||
| const getcoord = (x, y) => { | ||
| return [x - screenWidth()/2, y - screenHeight()/2] |
There was a problem hiding this comment.
const getcoord = (x, y) => ([x - screenWidth()/2, y - screenHeight()/2]) is equivalence.
visualizer.js
Outdated
|
|
||
| document.getElementById('title').innerHTML = node[index].name | ||
| document.getElementById('desc').innerHTML = node[index].tagline | ||
| document.getElementById('web').setAttribute('href', node[index].website_url) |
There was a problem hiding this comment.
This still needs fixing: #16 (comment)
|
On the view of a single category, with lots of orgs, what is determining the layout. The placement of the org nodes doesnt have an obvious purpose. If there is a good reason for the layout, maybe add a note explaining it to the user. |
|
the orgs is currently spawn at random position, i'm currently still searching for a way to represent the data. |
|
Also need to replace |
|
i've already replace it with the cdn version |
calculating org frequency starting to visualize orgs changing visualization style and adding p5 library start to displaying orgs data update orgs mode completing base visualization finishing all the basic functional fix trailing comma change library source to cdn move the visual to separated html file change redirect to soc-orgs generated page change the href target remove vendor directory cleanup and setup eslint cleanup and setup eslint
No description provided.