bradybod-usu/cs5890_data_visualization
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

hw2 Meh

Browse Source
This commit is contained in:
bbod
2019-09-16 20:36:30 -06:00
commit 33714c6291
12 changed files with 749 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
hw1/Hw1.html Normal file
View File

@@ -0,0 +1,113 @@
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.bar{
fill: grey;
stroke: black;
stroke-width: .05%;
}
.line{
stroke-width: .05%;
fill: none;
stroke: blue;
}
.filledLine{
fill: green;
stroke: green;
stroke-width: .05%;
}
.scatterPlot{
fill: black;
}
</style>
<meta charset="UTF-8">
<title>Charts</title>
</head>
<body>
<svg>
<g class="bar" transform="translate(20,150) scale(6,-6)">
<rect height="10.0" width="1"></rect>
<rect height="8.0" width="1" x="1"></rect>
<rect height="13.0" width="1" x="2"></rect>
<rect height="9.0" width="1" x="3"></rect>
<rect height="11.0" width="1" x="4"></rect>
<rect height="14.0" width="1" x="5"></rect>
<rect height="6.0" width="1" x="6"></rect>
<rect height="4.0" width="1" x="7"></rect>
<rect height="12.0" width="1" x="8"></rect>
<rect height="7.0" width="1" x="9"></rect>
<rect height="5.0" width="1" x="10"></rect>
</g>
</svg>
<svg>
<g class="bar" transform="translate(20,150) scale(6,-6)">
<rect height="7.46" width="1"></rect>
<rect height="6.7" width="1" x="1"></rect>
<rect height="12.74" width="1" x="2"></rect>
<rect height="7.11" width="1" x="3"></rect>
<rect height="7.81" width="1" x="4"></rect>
<rect height="8.84" width="1" x="5"></rect>
<rect height="6.08" width="1" x="6"></rect>
<rect height="5.39" width="1" x="7"></rect>
<rect height="8.15" width="1" x="8"></rect>
<rect height="6.42" width="1" x="9"></rect>
<rect height="5.73" width="1" x="10"></rect>
</g>
</svg>
<svg>
<g class="line" transform="translate(20,150) scale(6,-6)">
<path d="M0 10 L1 8 L2 13 L3 9 L4 11 L5 14 L6 6 L7 4 L8 12 L9 7 L10 5"></path>
</g>
</svg>
<svg>
<g class="line" transform="translate(20,150) scale(6,-6)">
<line x1="0" y1="7.46" x2="1" y2="6.7"></line>
<line x1="1" y1="6.7" x2="2" y2="12.74"></line>
<line x1="2" y1="12.74" x2="3" y2="7.11"></line>
<line x1="3" y1="7.11" x2="4" y2="7.81"></line>
<line x1="4" y1="7.81" x2="5" y2="8.84"></line>
<line x1="5" y1="8.84" x2="6" y2="6.08"></line>
<line x1="6" y1="6.08" x2="7" y2="5.39"></line>
<line x1="7" y1="5.39" x2="8" y2="8.15"></line>
<line x1="8" y1="8.15" x2="9" y2="6.42"></line>
<line x1="9" y1="6.42" x2="10" y2="5.73"></line>
</g>
</svg>
<svg>
<g class="filledLine" transform="translate(20,150) scale(6,-6)">
<path d="M0 0 L0 10 L1 8 L2 13 L3 9 L4 11 L5 14 L6 6 L7 4 L8 12 L9 7 L10 5 L10 0"></path>
</g>
</svg>
<svg>
<g class="filledLine" transform="translate(20,150) scale(6,-6)">
<path d="M0 0 L0 7.46 L1 6.7 L2 12.74 L3 7.11 L4 7.81 L5 8.84 L6 6.08 L7 5.39 L8 8.15 L9 6.42 L10 5.73 L10 0"></path>
</g>
</svg>
<svg>
<g class="scatterPlot" transform="translate(20,150) scale(6,-6)">
<circle r=".5" cx="10" cy="7.46"></circle>
<circle r=".5" cx="8" cy="6.77"></circle>
<circle r=".5" cx="13" cy="12.74"></circle>
<circle r=".5" cx="9" cy="7.11"></circle>
<circle r=".5" cx="11" cy="7.81"></circle>
<circle r=".5" cx="14" cy="8.84"></circle>
<circle r=".5" cx="6" cy="6.08"></circle>
<circle r=".5" cx="4" cy="5.39"></circle>
<circle r=".5" cx="12" cy="8.15"></circle>
<circle r=".5" cx="7" cy="6.42"></circle>
<circle r=".5" cx="5" cy="5.73"></circle>
</g>
</svg>
</body>
</html>

13
hw2/.idea/hw2.iml generated Normal file
View File

@@ -0,0 +1,13 @@
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$">
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
<excludeFolder url="file://$MODULE_DIR$/temp" />
<excludeFolder url="file://$MODULE_DIR$/tmp" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
<orderEntry type="library" name="d3.v4" level="application" />
</component>
</module>

6
hw2/.idea/jsLibraryMappings.xml generated Normal file
View File

@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="JavaScriptLibraryMappings">
<file url="PROJECT" libraries="{d3.v4}" />
</component>
</project>

6
hw2/.idea/misc.xml generated Normal file
View File

@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="JavaScriptSettings">
<option name="languageLevel" value="ES6" />
</component>
</project>

8
hw2/.idea/modules.xml generated Normal file
View File

@@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/hw2.iml" filepath="$PROJECT_DIR$/.idea/hw2.iml" />
</modules>
</component>
</project>

6
hw2/.idea/vcs.xml generated Normal file
View File

@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="$PROJECT_DIR$/.." vcs="Git" />
</component>
</project>

325
hw2/.idea/workspace.xml generated Normal file
View File

@@ -0,0 +1,325 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ChangeListManager">
<list default="true" id="a11ee4a0-3787-4da9-80ca-2e586b2721a1" name="Default Changelist" comment="">
<change afterPath="$PROJECT_DIR$/../hw1/Hw1.html" afterDir="false" />
<change afterPath="$PROJECT_DIR$/.idea/hw2.iml" afterDir="false" />
<change afterPath="$PROJECT_DIR$/.idea/jsLibraryMappings.xml" afterDir="false" />
<change afterPath="$PROJECT_DIR$/.idea/vcs.xml" afterDir="false" />
<change afterPath="$PROJECT_DIR$/data/Tree.json" afterDir="false" />
<change afterPath="$PROJECT_DIR$/hw2.html" afterDir="false" />
<change afterPath="$PROJECT_DIR$/js/Node.js" afterDir="false" />
<change afterPath="$PROJECT_DIR$/js/Tree.js" afterDir="false" />
<change afterPath="$PROJECT_DIR$/js/script.js" afterDir="false" />
</list>
<ignored path="$PROJECT_DIR$/.tmp/" />
<ignored path="$PROJECT_DIR$/temp/" />
<ignored path="$PROJECT_DIR$/tmp/" />
<option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
<option name="LAST_RESOLUTION" value="IGNORE" />
</component>
<component name="FUSProjectUsageTrigger">
<session id="-371711873">
<usages-collector id="statistics.lifecycle.project">
<counts>
<entry key="project.closed" value="2" />
<entry key="project.open.time.12" value="1" />
<entry key="project.open.time.4" value="1" />
<entry key="project.open.time.9" value="1" />
<entry key="project.opened" value="3" />
</counts>
</usages-collector>
<usages-collector id="statistics.file.extensions.open">
<counts>
<entry key="html" value="1" />
<entry key="iml" value="1" />
<entry key="js" value="3" />
<entry key="json" value="1" />
</counts>
</usages-collector>
<usages-collector id="statistics.file.types.open">
<counts>
<entry key="HTML" value="1" />
<entry key="IDEA_MODULE" value="1" />
<entry key="JSON" value="1" />
<entry key="JavaScript" value="3" />
</counts>
</usages-collector>
<usages-collector id="statistics.file.extensions.edit">
<counts>
<entry key="js" value="3169" />
<entry key="json" value="1" />
</counts>
</usages-collector>
<usages-collector id="statistics.file.types.edit">
<counts>
<entry key="JSON" value="1" />
<entry key="JavaScript" value="3169" />
</counts>
</usages-collector>
</session>
</component>
<component name="FileEditorManager">
<leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
<file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/hw2.html">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="345">
<caret line="23" column="12" lean-forward="true" selection-start-line="23" selection-start-column="12" selection-end-line="23" selection-end-column="12" />
</state>
</provider>
</entry>
</file>
<file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/data/Tree.json">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="-128">
<caret line="27" column="2" lean-forward="true" selection-start-line="27" selection-start-column="2" selection-end-line="27" selection-end-column="2" />
</state>
</provider>
</entry>
</file>
<file pinned="false" current-in-tab="true">
<entry file="file://$PROJECT_DIR$/js/Tree.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="788">
<caret line="85" column="42" lean-forward="true" selection-start-line="85" selection-start-column="42" selection-end-line="85" selection-end-column="42" />
</state>
</provider>
</entry>
</file>
<file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/js/Node.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="205">
<caret line="24" column="24" selection-start-line="24" selection-start-column="24" selection-end-line="24" selection-end-column="24" />
</state>
</provider>
</entry>
</file>
<file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/js/script.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="75">
<caret line="5" column="2" lean-forward="true" selection-start-line="5" selection-start-column="2" selection-end-line="5" selection-end-column="2" />
</state>
</provider>
</entry>
</file>
</leaf>
</component>
<component name="Git.Settings">
<option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$/.." />
</component>
<component name="IdeDocumentHistory">
<option name="CHANGED_PATHS">
<list>
<option value="$PROJECT_DIR$/hw2.html" />
<option value="$PROJECT_DIR$/js/Tree.js" />
</list>
</option>
</component>
<component name="JsBuildToolGruntFileManager" detection-done="true" sorting="DEFINITION_ORDER" />
<component name="JsBuildToolPackageJson" detection-done="true" sorting="DEFINITION_ORDER" />
<component name="JsGulpfileManager">
<detection-done>true</detection-done>
<sorting>DEFINITION_ORDER</sorting>
</component>
<component name="ProjectFrameBounds">
<option name="y" value="23" />
<option name="width" value="1280" />
<option name="height" value="731" />
</component>
<component name="ProjectLevelVcsManager" settingsEditedManually="true" />
<component name="ProjectView">
<navigator currentView="Scope" currentSubView="Scope 'Project Files'; set:Project Files; class com.intellij.psi.search.scope.ProjectFilesScope" proportions="" version="1">
<foldersAlwaysOnTop value="true" />
</navigator>
<panes>
<pane id="Scope">
<subPane subId="Scope 'Project Files'; set:Project Files; class com.intellij.psi.search.scope.ProjectFilesScope">
<expand>
<path>
<item name="hw2" type="3d21c010:ScopeViewTreeModel$ProjectNode" />
<item name="" type="442cc68d:ScopeViewTreeModel$RootNode" />
</path>
<path>
<item name="hw2" type="3d21c010:ScopeViewTreeModel$ProjectNode" />
<item name="" type="442cc68d:ScopeViewTreeModel$RootNode" />
<item name="data" type="9f88c78c:ScopeViewTreeModel$FileNode" />
</path>
<path>
<item name="hw2" type="3d21c010:ScopeViewTreeModel$ProjectNode" />
<item name="" type="442cc68d:ScopeViewTreeModel$RootNode" />
<item name="js" type="9f88c78c:ScopeViewTreeModel$FileNode" />
</path>
</expand>
<select />
</subPane>
</pane>
<pane id="ProjectPane">
<subPane>
<expand>
<path>
<item name="hw2" type="b2602c69:ProjectViewProjectNode" />
<item name="hw2" type="462c0819:PsiDirectoryNode" />
</path>
</expand>
<select />
</subPane>
</pane>
</panes>
</component>
<component name="PropertiesComponent">
<property name="WebServerToolWindowFactoryState" value="false" />
<property name="last_opened_file_path" value="$PROJECT_DIR$" />
<property name="nodejs_interpreter_path.stuck_in_default_project" value="undefined stuck path" />
<property name="nodejs_npm_path_reset_for_default_project" value="true" />
</component>
<component name="RunDashboard">
<option name="ruleStates">
<list>
<RuleState>
<option name="name" value="ConfigurationTypeDashboardGroupingRule" />
</RuleState>
<RuleState>
<option name="name" value="StatusDashboardGroupingRule" />
</RuleState>
</list>
</option>
</component>
<component name="RunManager">
<configuration name="hw2.html" type="JavascriptDebugType" factoryName="JavaScript Debug" temporary="true" nameIsGenerated="true" uri="http://localhost:63342/hw2/hw2.html">
<method v="2">
<option name="ToolBeforeRunTask" enabled="true" actionId="Tool_External Tools_TERMINAL" />
</method>
</configuration>
<recent_temporary>
<list>
<item itemvalue="JavaScript Debug.hw2.html" />
</list>
</recent_temporary>
</component>
<component name="SvnConfiguration">
<configuration />
</component>
<component name="TaskManager">
<task active="true" id="Default" summary="Default task">
<changelist id="a11ee4a0-3787-4da9-80ca-2e586b2721a1" name="Default Changelist" comment="" />
<created>1568584050957</created>
<option name="number" value="Default" />
<option name="presentableId" value="Default" />
<updated>1568584050957</updated>
<workItem from="1568584054070" duration="4815000" />
<workItem from="1568614403562" duration="1200000" />
<workItem from="1568644410386" duration="11879000" />
</task>
<servers />
</component>
<component name="TimeTrackingManager">
<option name="totallyTimeSpent" value="17894000" />
</component>
<component name="TodoView">
<todo-panel id="selected-file">
<is-autoscroll-to-source value="true" />
</todo-panel>
<todo-panel id="all">
<are-packages-shown value="true" />
<is-autoscroll-to-source value="true" />
</todo-panel>
</component>
<component name="ToolWindowManager">
<frame x="0" y="23" width="1280" height="731" extended-state="0" />
<layout>
<window_info active="true" content_ui="combo" id="Project" order="0" visible="true" weight="0.2494043" />
<window_info id="Structure" order="1" side_tool="true" weight="0.25" />
<window_info id="Favorites" order="2" side_tool="true" />
<window_info anchor="bottom" id="Message" order="0" />
<window_info anchor="bottom" id="Find" order="1" />
<window_info anchor="bottom" id="Run" order="2" weight="0.3286385" />
<window_info anchor="bottom" id="Debug" order="3" weight="0.4" />
<window_info anchor="bottom" id="Cvs" order="4" weight="0.25" />
<window_info anchor="bottom" id="Inspection" order="5" weight="0.4" />
<window_info anchor="bottom" id="TODO" order="6" weight="0.3286385" />
<window_info anchor="bottom" id="Docker" order="7" show_stripe_button="false" />
<window_info anchor="bottom" id="Version Control" order="8" show_stripe_button="false" />
<window_info anchor="bottom" id="Terminal" order="9" visible="true" weight="0.3286385" />
<window_info anchor="bottom" id="Event Log" order="10" side_tool="true" />
<window_info anchor="right" id="Commander" internal_type="SLIDING" order="0" type="SLIDING" weight="0.4" />
<window_info anchor="right" id="Ant Build" order="1" weight="0.25" />
<window_info anchor="right" content_ui="combo" id="Hierarchy" order="2" weight="0.25" />
</layout>
<layout-to-restore>
<window_info content_ui="combo" id="Project" order="0" visible="true" weight="0.2494043" />
<window_info id="Structure" order="1" side_tool="true" weight="0.25" />
<window_info id="Favorites" order="2" side_tool="true" />
<window_info anchor="bottom" id="Message" order="0" />
<window_info anchor="bottom" id="Find" order="1" />
<window_info anchor="bottom" id="Run" order="2" weight="0.3286385" />
<window_info anchor="bottom" id="Debug" order="3" weight="0.4" />
<window_info anchor="bottom" id="Cvs" order="4" weight="0.25" />
<window_info anchor="bottom" id="Inspection" order="5" weight="0.4" />
<window_info anchor="bottom" id="TODO" order="6" weight="0.3286385" />
<window_info anchor="bottom" id="Docker" order="7" show_stripe_button="false" />
<window_info anchor="bottom" id="Version Control" order="8" show_stripe_button="false" />
<window_info active="true" anchor="bottom" id="Terminal" order="9" visible="true" weight="0.3286385" />
<window_info anchor="bottom" id="Event Log" order="10" side_tool="true" />
<window_info anchor="right" id="Commander" internal_type="SLIDING" order="0" type="SLIDING" weight="0.4" />
<window_info anchor="right" id="Ant Build" order="1" weight="0.25" />
<window_info anchor="right" content_ui="combo" id="Hierarchy" order="2" weight="0.25" />
</layout-to-restore>
</component>
<component name="TypeScriptGeneratedFilesManager">
<option name="version" value="1" />
</component>
<component name="VcsContentAnnotationSettings">
<option name="myLimit" value="2678400000" />
</component>
<component name="editorHistoryManager">
<entry file="file://$PROJECT_DIR$/.idea/hw2.iml">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="165">
<caret line="11" column="9" lean-forward="true" selection-start-line="11" selection-start-column="9" selection-end-line="11" selection-end-column="9" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/js/script.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="75">
<caret line="5" column="2" lean-forward="true" selection-start-line="5" selection-start-column="2" selection-end-line="5" selection-end-column="2" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/js/Node.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="205">
<caret line="24" column="24" selection-start-line="24" selection-start-column="24" selection-end-line="24" selection-end-column="24" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/hw2.html">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="345">
<caret line="23" column="12" lean-forward="true" selection-start-line="23" selection-start-column="12" selection-end-line="23" selection-end-column="12" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/data/Tree.json">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="-128">
<caret line="27" column="2" lean-forward="true" selection-start-line="27" selection-start-column="2" selection-end-line="27" selection-end-column="2" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/js/Tree.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="788">
<caret line="85" column="42" lean-forward="true" selection-start-line="85" selection-start-column="42" selection-end-line="85" selection-end-column="42" />
</state>
</provider>
</entry>
</component>
</project>

56
hw2/data/Tree.json Normal file
View File

@@ -0,0 +1,56 @@
[{
"name":"Animal",
"parent":"root"
},
{
"name":"Reptile",
"parent":"Animal"
},
{
"name":"Mammal",
"parent":"Animal"
},
{
"name":"Lizard",
"parent":"Reptile"
},
{
"name":"Snake",
"parent":"Reptile"
},
{
"name":"Bird",
"parent":"Reptile"
},
{
"name":"Canary",
"parent":"Bird"
},
{
"name":"Equine",
"parent":"Mammal"
},
{
"name":"Bovine",
"parent":"Mammal"
},
{
"name":"Canine",
"parent":"Mammal"
},
{
"name":"Cow",
"parent":"Bovine"
},
{
"name":"Horse",
"parent":"Equine"
},
{
"name":"Zebra",
"parent":"Equine"
},
{
"name":"Dog",
"parent":"Canine"
}]

34
hw2/hw2.html Normal file
View File

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Homework 2</title>
<style>
circle {
fill: steelblue;
}
line{
stroke:darkGrey;
stroke-width:6;
}
.label{
fill:white;
font-weight: bold;
text-anchor: middle;
font-size: 16px;
letter-spacing: 3px;
}
</style>
<script src="https://d3js.org/d3.v4.js"></script>
<script src="js/Tree.js"></script>
<script src="js/Node.js"></script>
<script type="application/javascript" src="js/script.js"></script>
</head>
<body>
</body>
</html>

48
hw2/js/Node.js Normal file
View File

@@ -0,0 +1,48 @@
/** Class representing a Node in a tree. */
class Node {
/**
* Creates a Node and intializes the following fields to null/empty:
* parentNode, children, parentName,level,position
* @param {string} nodeName - The name of the node.
* @param {string} parentName - The name of the parent node.
*/
constructor(nodeName,parentName) {
//String of Node Name
this.name = nodeName;
//String of Parent Name
this.parentName = parentName;
/**
* Reference to parent Node Object.
*/
this.parentNode = null;
/**
* Array of Children.
*/
this.children=[];
/**
* Level of the node.
*/
this.level=null;
/**
* Position of the node.
* Initialize to -1
*/
this.position=-1;
}
/**
* Add child to current Node.
* @param {Node} The child Node.
*/
addChild(childNode) {
this.children.push(childNode);
}
}

108
hw2/js/Tree.js Normal file
View File

@@ -0,0 +1,108 @@
/** Class representing a Tree. */
class Tree {
/**
* Creates a Tree Object
* parentNode, children, parentName,level,position
* @param {json[]} json - array of json object with name and parent fields
*/
constructor(json) {
this.listOfNodes = [];
json.forEach(nodeInfo => {
let node = new Node(nodeInfo.name, nodeInfo.parent);
//console.log(node);
this.listOfNodes.push(node);
});
}
/**
* Function that builds a tree from a list of nodes with parent refs
*/
buildTree(){
let rootNode = this.listOfNodes.find(node => node.parentName === "root");
this.listOfNodes.forEach(currentNode => {
for(let i = 0; i < this.listOfNodes.length; i ++){
if(this.listOfNodes[i].parentName === currentNode.name){
currentNode.addChild(this.listOfNodes[i]);
}
}
});
//console.log(rootNode);
this.assignLevel(rootNode, 0);
this.assignPosition(rootNode, 0);
}
/**
* Recursive function that assign positions to each node
*/
assignPosition(node, position) {
node.position = position;
let currentlevel = node.level;
let q = [];
node.children.forEach(x=>{
q.push(x)
});
let count = 0;
while(q.length > 0){
let current = q.shift();
if(currentlevel === current.level){
current.position = count;
count +=1;
current.children.forEach(x=> q.push(x));
console.log(q);
}
else{
currentlevel = current.level;
current.children.forEach(x=> q.push(x));
count = current.position+1;
}
}
}
/**
* Recursive function that assign levels to each node
*/
assignLevel(node, level) {
node.level = level;
node.children.forEach(childNode => {
this.assignLevel(childNode, level+1);
})
}
/**
* Function that renders the tree
*/
renderTree() {
d3.select("body")
.append("svg")
.attr("width", 1200)
.attr("height", 1200);
this.listOfNodes.forEach(node => {
let svgElement = d3.select("svg");
for (var i = 0; i < node.children.length; i++) {
svgElement.append("line")
.attr("x1", (node.level + 3) * 100)
.attr("y1", (node.position + 3) * 100)
.attr("x2", (node.children[i].level +3) * 100)
.attr("y2", (node.children[i].position+3) * 100)
}
svgElement.append("circle")
.attr("r", 35)
.attr("cx", (node.level+3) * 100)
.attr("cy", (node.position+3) * 100)
svgElement.append("text")
.attr("class", "label")
.attr("dx", (node.level+3) * 100)
.attr("dy", (node.position+3) * 100)
.text(node.name)
})
}
}

26
hw2/js/script.js Normal file
View File

@@ -0,0 +1,26 @@
/**
* Requests the file and executes a callback with the parsed result once
* it is available
* @param {path} file path
* @param {callback} callback to execute once the result is available
*/
function fetchJSONFile(path, callback) {
var httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = function() {
if (httpRequest.readyState === 4) {
if (httpRequest.status === 200) {
let data = JSON.parse(httpRequest.responseText);
if (callback) callback(data);
}
}
};
httpRequest.open('GET', path);
httpRequest.send();
}
//call fetchJSONFile then build and render a tree
fetchJSONFile('data/Tree.json', function(data) {
let tree = new Tree(data);
tree.buildTree();
tree.renderTree();
});