Minimum Viable Product (MVP) Description

[matseng]

Goal of WikiViz App: Knowledge visualization and subsequent exploration of related Wikipedia articles.

Example usage: User enters a Wikipedia URL of an article into an input field. The app displays the title of the initial URL as a "central node" in a graph visualization. Attached to the central node are the following nodes: (1) child nodes, which are links contained within the central node article (2) parent nodes, which are articles that contain links to the central node article

MVP - Client:

• Input field for a Wikipedia URL
• Hub / spoke graph visualization of the central node, child nodes and parent nodes

MVP - Server:

• Database of article titles, article IDs, article URLs, child URLs
  • From the child URLs table, we can infer the parent URLs
• Query database for article title given an article URL
• Query database for array of children URLs given an article URL or ID
• Query database for array of parent URLs given an article URL or ID

Extra Credit - Client

• Display keywords / concepts of a given nodes or set of nodes
• If a user clicks a child node, then we append the graph to show the parents and child nodes of recently clicked child node
• Adjust diameter of each node based on the "popularity" of each node. Popularity of a nodeX could be a count of the number of articles that have URLs that point to nodeX.
• Display preview of each article upon clicking a button or on mousehover (e.g. display first sentence, thumbnail image, etc)
• Display modal popup of a full article if a user clicks a button

Extra Credit - Server

• Query database for an array of keywords / concepts given article URL(s) or ID(s)
• Query database for number of links that point to nodeX given nodeX's URL or ID
  • Database would contain a column for "Number of parents"

[autumnfjeld]

Hi Guys -

This plan sounds good to me. The hub/spoke visual is simpler than what I was picturing before ( which was a more intertwined connectedness between nodes). For visual clarity we can make the center-parent relationship-value different than center-child relationship-value. d3 can take such a value and then compute the layout of the nodes so that there is a ring of children, then a ring of parents. Or, we can define the x-y coordinates of the parent and children to form two rings around the center node.

For the extra credit:

• Can easily display keywords or preview of an article with the built-in d3 popup, e.g. during a mouseover event, I think it might be too cluttered to display more than a short title next to the node -- I've started looking into bootstrap for more advance modal/pop-ups
• Clicking a childnode: can set this up to call the d3 algorithm again with new data, I'll look into this in more detail....whether to append to the existing graph or show a new graph??
• Easy to set diameter/color/etc. based on some characteristic - would just need a value to quantify popularity

I have a working client with angular and a simple d3 node graph. I feel like an angular pro now! :) Now it's time to get fancy.... I'll spend some time with angular-bootstrap for css styling. I will also play a little on the server side, create a large dummy data set and then can show you guys the example data set so it is clear to you what I'm feeding into d3.

[matseng]

Awesome, Autumn, thanks for the details!

• Autumn: Clicking a childnode: can set this up to call the d3 algorithm again with new data, I'll look into this in more detail....whether to append to the existing graph or show a new graph??
  • Michael: I think we should append to the existing graph until D3 runs out of memory!

I just submitted / accepted my own pull request - just working on some mysql commands that will come in handy later.

Everyone remember to git pull --rebase upstream master right before you git push origin featureBranch.

On Wed, Feb 19, 2014 at 2:27 PM, Autumn notifications@github.com wrote:

Hi Guys -

This plan sounds good to me. The hub/spoke visual is simpler than what I was picturing before ( which was a more intertwined connectedness between nodes). For visual clarity we can make the center-parent relationship-value different than center-child relationship-value. d3 can take such a value and then compute the layout of the nodes so that there is a ring of children, then a ring of parents. Or, we can define the x-y coordinates of the parent and children to form two rings around the center node.

For the extra credit:

• Can easily display keywords or preview of an article with the built-in d3 popup, e.g. during a mouseover event, I think it might be too cluttered to display more than a short title next to the node -- I've started looking into bootstrap for more advance modal/pop-ups
• Clicking a childnode: can set this up to call the d3 algorithm again with new data, I'll look into this in more detail....whether to append to the existing graph or show a new graph??
• Easy to set diameter/color/etc. based on some characteristic - would just need a value to quantify popularity

I have a working client with angular and a simple d3 node graph. I feel like an angular pro now! :) Now it's time to get fancy.... I'll spend some time with angular-bootstrap for css styling. I will also play a little on the server side, create a large dummy data set and then can show you guys the example data set so it is clear to you what I'm feeding into d3.

Reply to this email directly or view it on GitHubhttps://github.com/WikiMapper/WikiViz/issues/24#issuecomment-35557713 .

[FarhadG]

Thanks for this outline, @matseng.

@autumnfjeld, that sounds awesome! Lookin' forward to seeing your magic.

I'll be spending today and tomorrow working on our MVP goals.