Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Team5 CS599 UFO Visualisations #7

Open
wants to merge 12 commits into
base: gh-pages
Choose a base branch
from
Open

Team5 CS599 UFO Visualisations #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
a2b5914
added team5 and america map viz
akshayuascs Apr 22, 2018
43b4313
updated folder structures
akshayuascs Apr 22, 2018
122136d
added timeseries viz
akshayuascs Apr 23, 2018
1344bce
restructured.. yet again
akshayuascs Apr 24, 2018
9847b48
added legend
akshayuascs Apr 25, 2018
6266cc9
added wheel viz
akshayuascs Apr 27, 2018
094c1db
6 new visualization added and bugs fixed
ShrushtiPatel Apr 28, 2018
0daaf46
Added word cloud and elasticsearch viz.
anuragmantri Apr 28, 2018
6272c3a
Choropleth and linechart added
ShrushtiPatel Apr 28, 2018
65c2904
Modified word cloud.
anuragmantri Apr 28, 2018
9adc644
Merge branch 'gh-pages' of https://github.com/akshayuascs/ufo.usc.edu…
anuragmantri Apr 28, 2018
a26f5cc
Elasticsearch Viz added.
anuragmantri Apr 28, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion html/d3-examples.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@ <h3>Team 4</h3>
<div class="caption">
<h3>Team 5</h3>
<p></p>
<p><a href class="btn btn-primary" role="button">View</a>
<p><a href="team5.html" class="btn btn-primary" role="button">View</a>
</div>
</div>
</div>
Expand Down
220 changes: 220 additions & 0 deletions html/team5.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,220 @@
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Team 5 UFO Insights</title>
<!-- Bootstrap Core CSS -->
<link href="../css/bootstrap.min.css" rel="stylesheet">

<!-- Scrolling Nav CSS -->
<link href="../css/scrolling-nav.css" rel="stylesheet">

<!-- Custom CSS -->
<link href="../css/styles.css" rel="stylesheet">
<style type="text/css">
.thumbnail{
height: 400px;
width: 350px;
}
.img{
height: 380px;
width: 330px;
}

</style>

</head>

<!-- The #page-top ID is part of the scrolling feature - the data-spy and data-target are part of the built-in Bootstrap scrollspy function -->

<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">

<!-- Navigation -->
<div id="nav-main">
<nav class="navbar mav-main navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>

</div>

<div class="collapse navbar-collapse navbar-ex1-collapse">
<nav id="nav-wrap">
<ul class="nav navbar-nav navbar-custom">
<li class="current"><a class="page-scroll" href="index.html#intro" style="color:white">Home</a></li>
<li class="hidden"><a class="page-scroll" href="index.html#intro" style="color:white"></a></li>
<li><a class="page-scroll" href="index.html#about" style="color:#ffffff">About</a></li>
<li><a class="page-scroll" href="index.html#features" style="color:#ffffff">Insights</a></li>
<li><a class="page-scroll" style="color:#ffffff" href="index.html#learn-more">Partners</a></li>
</ul>
</nav>

<a href="http://usc.edu" class="pull-right">
<img src="../images/usc-primary-logotype.svg" width="176px" height="38px">
</a>
</div>
</div>
</nav>
</div>
<br><br><br>
<div class="container">

<div class="row">
<div><h4 align=center><b>Team 5 visualizations</b>, summarizing the work our team did in exploring and investigating UFO sightings using data science</h4>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="../images/team5images/team5_americaStates.png">
<div class="caption">
<h3>America Map</h3>
<p>Shows counts of UFO sightings in all US states</p>
<p><a href="../html/team5d3/mapCount.html" class="btn btn-primary" role="button">View</a></p>
<!--<p><class="btn btn-primary" role="button">View</a></p>Use above line here and add anchor-->
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="../images/team5images/team5_timeSeries.png">
<div class="caption">
<h3>Time Series</h3>
<p>Time series plot of sightings against time</p>
<p><a href="../html/team5d3/time.html" class="btn btn-primary" role="button">View</a></p>
<!--<p><class="btn btn-primary" role="button">View</a></p>Use above line here and add anchor-->
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="../images/team5images/team5_wheelViz.png">
<div class="caption">
<h3>Wheel</h3>
<p>A wheel showing the average distance of a military base in each state</p>
<p><a href="../html/team5d3/wheelViz.html" class="btn btn-primary" role="button">View</a></p>
<!--<p><class="btn btn-primary" role="button">View</a></p>Use above line here and add anchor-->
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="../images/team5images/team5_bubbleChart.jpg" class ="imgcrop" style="width:250px;height: 250px; ">
<div class="caption">
<h3>Bubble</h3>
<p>Bubble chart showing overview of all attributes</p>
<p><a href="../html/team5d3/BubbleChart.html" class="btn btn-primary" role="button">View</a></p>
<!--<p><class="btn btn-primary" role="button">View</a></p>Use above line here and add anchor-->
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="../images/team5images/team5_choropleth.JPG">
<div class="caption">
<h3>Density Map</h3>
<p>US Map showing density of areas where UFO sighting occured</p>
<p><a href="../html/team5d3/Choropleth.html" class="btn btn-primary" role="button">View</a></p>
<!--<p><class="btn btn-primary" role="button">View</a></p>Use above line here and add anchor-->
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="../images/team5images/team5_lineChartDensity.JPG" style="height: 350;">
<div class="caption">
<h3>Line Chart</h3>
<p>Line chart shows literacy rate of UFO sighted area</p>
<p><a href="../html/team5d3/LineChart.html" class="btn btn-primary" role="button">View</a></p>
<!--<p><class="btn btn-primary" role="button">View</a></p>Use above line here and add anchor-->
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="../images/team5images/team5_nitriteGraph.JPG">
<div class="caption">
<h3>Bar Graph</h3>
<p>It shows low, average and high nitrite concentration in UFO sighted area for every state</p>
<p><a href="../html/team5d3/nitrite.html" class="btn btn-primary" role="button">View</a></p>
<!--<p><class="btn btn-primary" role="button">View</a></p>Use above line here and add anchor-->
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="../images/team5images/team5_ruralUrbanGauge.JPG" style="height: 180px; width: 200px">
<div class="caption">
<h3>Gauge</h3>
<p>It shows percentage of UFO sighting in Rural or Urban area</p>
<p><a href="../html/team5d3/gauge.html" class="btn btn-primary" role="button">View</a></p>
<!--<p><class="btn btn-primary" role="button">View</a></p>Use above line here and add anchor-->
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="../images/team5images/team5_unemploymentMap.png">
<div class="caption">
<h3>US State Map</h3>
<p>It shows low, average and high percentage of employment for every state</p>
<p><a href="../html/team5d3/employment.html" class="btn btn-primary" role="button">View</a></p>
<!--<p><class="btn btn-primary" role="button">View</a></p>Use above line here and add anchor-->
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="../images/team5images/wordcloud.png">
<div class="caption">
<h3>Word Cloud</h3>
<p>A word cloud of top captions extracted from images of UFOs</p>
<p><a href="../html/team5d3/word-cloud/wordcloud.html" class="btn btn-primary" role="button">View</a></p>
<!--<p><class="btn btn-primary" role="button">View</a></p>Use above line here and add anchor-->
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="../images/team5images/esDonut.png" style="height: 200px;">
<div class="caption">
<h3>Top Shapes Donut</h3>
<p>A donut diagram of top 5 shapes reported in the UFO sightings</p>
<p><a href="../html/team5d3/elasticsearch-viz/elasticsearch-viz.html" class="btn btn-primary" role="button">View</a></p>
<!--<p><class="btn btn-primary" role="button">View</a></p>Use above line here and add anchor-->
</div>
</div>
</div>

</div>
</div>


<hr class="featurette-divider">
<div>
<div class="container">
<footer>
<p align=center>©USC Data Science Group 2016, All Rights Reserved</p>
</footer>
</div>
</div>

<!-- jQuery -->
<script src="../js/jquery.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="../js/bootstrap.min.js"></script>

<!-- Scrolling Nav JavaScript -->
<script src="../js/jquery.easing.min.js"></script>
<script src="../js/scrolling-nav.js"></script>
<script src="../js/cardpanel.js"></script>
</body>

</html>
125 changes: 125 additions & 0 deletions html/team5d3/BubbleChart.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,125 @@
<!DOCTYPE html>
<html>
<head>
<title>Hello Bubble Chart</title>
<meta charset="utf-8">

<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,600,200italic,600italic&subset=latin,vietnamese' rel='stylesheet' type='text/css'>

<script src="http://phuonghuynh.github.io/js/bower_components/jquery/dist/jquery.min.js"></script>
<script src="http://phuonghuynh.github.io/js/bower_components/d3/d3.min.js"></script>
<script src="http://phuonghuynh.github.io/js/bower_components/d3-transform/src/d3-transform.js"></script>
<script src="http://phuonghuynh.github.io/js/bower_components/cafej/src/extarray.js"></script>
<script src="http://phuonghuynh.github.io/js/bower_components/cafej/src/misc.js"></script>
<script src="http://phuonghuynh.github.io/js/bower_components/cafej/src/micro-observer.js"></script>
<script src="http://phuonghuynh.github.io/js/bower_components/microplugin/src/microplugin.js"></script>
<script src="http://phuonghuynh.github.io/js/bower_components/bubble-chart/src/bubble-chart.js"></script>
<script src="http://phuonghuynh.github.io/js/bower_components/bubble-chart/src/plugins/central-click/central-click.js"></script>
<script src="http://phuonghuynh.github.io/js/bower_components/bubble-chart/src/plugins/lines/lines.js"></script>
<script type = 'text/javascript' src="BubbleChart.json"></script>
<script >
$(document).ready(function () {
var mydata = JSON.parse(BubbleChart);
var bubbleChart = new d3.svg.BubbleChart({
supportResponsive: true,
//container: => use @default
size: 600,
//viewBoxSize: => use @default
innerRadius: 600 / 3.5,
//outerRadius: => use @default
radiusMin: 50,
//radiusMax: use @default
//intersectDelta: use @default
//intersectInc: use @default
//circleColor: use @default
data: {
items: mydata,
eval: function (item) {return item.count;},
classed: function (item) {return item.text.split(" ").join("");}
},
plugins: [
{
name: "central-click",
options: {
text: "",
style: {
"font-size": "12px",
"font-style": "italic",
"font-family": "Source Sans Pro, sans-serif",
//"font-weight": "700",
"text-anchor": "middle",
"fill": "white"
},
attr: {dy: "65px"},
centralClick: function() {
alert("Here is more details!!");
}
}
},
{
name: "lines",
options: {
format: [
{// Line #0
textField: "count",
classed: {count: true},
style: {
"font-size": "28px",
"font-family": "Source Sans Pro, sans-serif",
"text-anchor": "middle",
fill: "white"
},
attr: {
dy: "0px",
x: function (d) {return d.cx;},
y: function (d) {return d.cy;}
}
},
{// Line #1
textField: "text",
classed: {text: true},
style: {
"font-size": "14px",
"font-family": "Source Sans Pro, sans-serif",
"text-anchor": "middle",
fill: "white"
},
attr: {
dy: "20px",
x: function (d) {return d.cx;},
y: function (d) {return d.cy;}
}
}
],
centralFormat: [
{// Line #0
style: {"font-size": "50px"},
attr: {}
},
{// Line #1
style: {"font-size": "30px"},
attr: {dy: "40px"}
}
]
}
}]
});
});
</script>
<style>
.bubbleChart {
min-width: 100px;
max-width: 700px;
height: 700px;
margin: 0 auto;
}
.bubbleChart svg{
background: #FF5733;
}
</style>
</head>
<body style="background: #FF5733">
<div style="color: white;font-style: italic;font-size: x-large;"> The chart shows the type of area and state where maximum UFO sightings occured, shape of UFO observed by maximum sightings, average density, average airport distance, average Nitrite Concenteration and average Unemployment Percentage of areas where UFO sightings occurred.
<div class="bubbleChart"/>
</body>
</html>
1 change: 1 addition & 0 deletions html/team5d3/BubbleChart.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
BubbleChart= '[{"text": "Density", "count": "4386.03"}, {"text": "Unemployment Percentage", "count": "5.84"}, {"text": "Nitrite Concentration", "count": "0.08"}, {"text": "Airport Distance", "count": "170.58"}, {"text": "Metropolitan area core", "count": 28261}, {"text": " light", "count": 12202}, {"text": " CA", "count": 7529}]'
Loading