Skip to content

Commit

Permalink
Colors vary and layout donut
Browse files Browse the repository at this point in the history
  • Loading branch information
@EliaFantini
EliaFantini committed Jun 4, 2023
1 parent 85bb5ce commit a817598
Show file tree
Hide file tree
Showing 3 changed files with 65 additions and 26 deletions.
38 changes: 22 additions & 16 deletions website/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>App data visualization</title>
<!-- Bootstrap Core CSS -->
<link href="css/theme.css" rel="stylesheet" type="text/css">
<link href="css/theme.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS: You can use this stylesheet to override any Bootstrap styles and/or apply your own styles -->
<link href="css/custom.css" rel="stylesheet">
Expand All @@ -26,17 +26,23 @@
<p class="navigation__logo logo">InsightSquad</p>
<nav class="navigation__container">
<ul class="navigation__list">
<li><a href="#home">Home</a>
<li>
<a href="#home">Home</a>
</li>
<li><a href="#intro-section">About</a>
<li>
<a href="#intro-section">About</a>
</li>
<li><a href="#plot1">Sankey</a>
<li>
<a href="#plot1">Sankey</a>
</li>
<li><a href="#plot2">Streamgraph</a>
<li>
<a href="#plot2">Streamgraph</a>
</li>
<li><a href="#plot3">Treemap</a>
<li>
<a href="#plot3">Treemap</a>
</li>
<li><a href="#plot4">More</a>
<li>
<a href="#plot4">More</a>
</li>
</ul>
</nav>
Expand Down Expand Up @@ -105,8 +111,8 @@ <h1 class="section-heading">Sankey Diagram</h1>
<p class="chart-description"><b>Hover</b> one of the link to display from and to which label we are going, and how many applications are concerned.
Use the <b>slider</b> to change between datasets and the <b>drop down menu</b> to change the category.</p>
<p class="chart-description"><em>IAP: In-App Purchases</em></p>
</div>
</div>
</div>
</div>
<div class="row">
<div id="slider-container">
<label for="slider">Select Data:</label>
Expand All @@ -116,7 +122,7 @@ <h1 class="section-heading">Sankey Diagram</h1>
<option value="2" class="apple-label" label="Apple"></option>
<option value="3" label="Editor's Choice"></option>
</datalist>
</div>
</div>
<div id="category-container">
<label for="category">Category:</label>
<select id="category">
Expand Down Expand Up @@ -172,12 +178,12 @@ <h1 class="section-heading">Number of apps created each year</h1>
<section id="plot3" class="content content-2">
<div class="container-treemap">
<div class="row">
<h1 class="section-heading">How many apps in each category?</h1>
<h1 class="section-heading">How many apps in each category?</h1>
<p class="chart-description">You ever wondered which category was the biggest in terms of applications? Wonder no more as this visualization was made for you.
With a glimpse of an eye, you henceforth know it.</p>
<p class="chart-description">Each tile size represents the proportion of applications in the category, <b>click</b> on one of them to display the 10 most downloaded/reviewed
applications for that specific category. <br><b>Hover</b> a tile to display its name, the number of applications and the percentage it represents.
Use the <b>slider</b> to change between datasets.</p>
Use the <b>slider</b> to change between datasets.</p>
<div id="slider-container-treemap">
<label for="slider-treemap">Select Data:</label>
<input type="range" min="1" max="3" value="1" id="slider-treemap" list="slider-treemap-labels">
Expand All @@ -203,6 +209,8 @@ <h1 class="section-heading">How many apps in each category?</h1>
<div class="row">
<h1 class="section-heading">More results</h1>
<div class="column column-left-45">
<p class="chart-description">With the huge number of applications, can we find a pattern in the naming convention? <br>The chart showcases the 10 most used words overall or by category.</p>
<p class="chart-description">Simply chose one category in the <b>drop down menu</b> above. <br>You can also change between datasets with the <b>slider</b></p>
<div id="slider-container-donut">
<label for="slider-donut">Select Data:</label>
<input type="range" min="1" max="3" value="1" id="slider-donut" list="slider-donut-labels">
Expand All @@ -217,9 +225,7 @@ <h1 class="section-heading">More results</h1>
<select id="category-donut">
<option value="---">---</option>
</select>
</div>
<p class="chart-description">With the huge number of applications, can we find a pattern in the naming convention? <br>The chart showcases the 10 most used words overall or by category.</p>
<p class="chart-description">Simply chose one category in the <b>drop down menu</b> above. <br>You can also change between datasets with the <b>slider</b></p>
</div>
<div id="donutchart"></div>
<script src="js/donutchart.js"></script>
</div>
Expand Down Expand Up @@ -262,7 +268,7 @@ <h1 class="section-heading">More results</h1>
<div class="row">
<div class="col-lg-12">
<p>App Data Visualization presented by Elia Fantini, Konrad Litwiński, Adrien Vauthey</p>
</div>
</div>
</footer>
<!-- jQuery -->
<script src="js/jquery-1.11.3.min.js"></script>
Expand Down
28 changes: 26 additions & 2 deletions website/js/donutchart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,9 +99,33 @@ function updateCategoryOptions() {
sliderDonut.on("input", updateCategoryOptions)

function updateDonutChart(data) {
var colorDonut = d3.scaleOrdinal()

const palettes_donut = {
1: ['#007f5f', '#2b9348', '#55a630', '#80b918', '#aacc00', '#bfd200', '#d4d700', '#dddf00', '#eeef20', '#ffff3f'],
2: ['#7400b8', '#6930c3', '#5e60ce', '#5390d9', '#4ea8de', '#48bfe3', '#56cfe1', '#64dfdf', '#72efdd', '#80ffdb'],
3: ['#012a4a', '#013a63', '#01497c', '#014f86', '#2a6f97', '#2c7da0', '#468faf', '#61a5c2', '#89c2d9', '#a9d6e5'],
4: ['#ff7b00', '#ff8800', '#ff9500', '#ffa200', '#ffaa00', '#ffb700', '#ffc300', '#ffd000', '#ffdd00', '#ffea00'],
5: ['#033270', '#1368aa', '#4091c9', '#9dcee2', '#fedfd4', '#f29479', '#f26a4f', '#ef3c2d', '#cb1b16', '#65010c'],
6: ['#b76935', '#a56336', '#935e38', '#815839', '#6f523b', '#5c4d3c', '#4a473e', '#38413f', '#263c41', '#143642'],
7: ['#eb5e28', '#f27f34', '#f9a03f', '#f6b049', '#f3c053', '#a1c349', '#94b33d', '#87a330', '#799431', '#6a8532'],
8: ['#264653', '#287271', '#2a9d8f', '#8ab17d', '#babb74', '#e9c46a', '#efb366', '#f4a261', '#ee8959', '#e76f51'],
9: ['#0c3e5e', '#155b87', '#2d92d1', '#74bbe8', '#97d1f4', '#0c5e50', '#158774', '#2ed1b5', '#74e8d4', '#97f4e5'],
10: ['#00193a', '#002b53', '#023f73', '#034780', '#7a0213', '#a10220', '#bf0a26', '#cd0c2b', '#131313', '#262626'],
11: ['#ff0072', '#ff177f', '#ff2e8c', '#ff4598', '#ff5ca5', '#ff74b2', '#ff8bbf', '#ffa2cb', '#ffb9d8', '#ffd0e5'],
12: ['#8ecae6', '#219ebc', '#126782', '#023047', '#ffb703', '#fd9e02', '#fb8500', '#bb3e03', '#ae2012', '#9b2226'],
13: ['#70b8ff', '#429bfa', '#147df5', '#095dd7', '#0000ff', '#0000b8', '#00008f', '#000079', '#000052', '#00003d'],
14: ['#f72585', '#b5179e', '#7209b7', '#560bad', '#480ca8', '#3a0ca3', '#159f91', '#1bccba', '#1ee3cf', '#92f2e8'],
15: ['#f2636a', '#dc4b4f', '#c63333', '#e94900', '#ef6803', '#f58606', '#c1b225', '#72a85f', '#229e99', '#36a7a2'],
16: ['#5c0000', '#751717', '#ba0c0c', '#ff0000', '#ffebeb', '#ecffeb', '#27a300', '#2a850e', '#2d661b', '#005c00'],
17: ['#643100', '#763a00', '#7f3e00', '#914600', '#af5500', '#b96619', '#c27731', '#cb8849', '#d49961', '#eacaae'],
};
// choose a random color palette for the nodes
const palette_donut = palettes_donut[Math.floor(Math.random() * 8) + 1];
// color palette
var colorDonut = d3.scaleOrdinal()
.domain(data.columns.slice(1))
.range(colorRangeDonut);
.range(palette_donut);


// remove the previous svg if it exists
d3.select("#donutchart").selectAll("svg").remove();
Expand Down
25 changes: 17 additions & 8 deletions website/js/streamgraph.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,14 +113,23 @@ function buildStreamgraph(data, dataRadius) {


const palettes = {
1: ['#7400b8', '#6930c3', '#5e60ce', '#5390d9', '#4ea8de', '#48bfe3', '#56cfe1', '#64dfdf', '#72efdd', '#80ffdb'],
2: ['#ff7b00', '#ff8800', '#ff9500', '#ffa200', '#ffaa00', '#ffb700', '#ffc300', '#ffd000', '#ffdd00', '#ffea00'],
3: ['#ff0000', '#ff8700', '#ffd300', '#deff0a', '#a1ff0a', '#0aff99', '#0aefff', '#147df5', '#580aff', '#be0aff'],
4: ['#ff0000', '#ff8700', '#ffd300', '#deff0a', '#a1ff0a', '#0aff99', '#0aefff', '#147df5', '#580aff', '#be0aff'],
5: ['#001219', '#005f73', '#0a9396', '#94d2bd', '#e9d8a6', '#ee9b00', '#ca6702', '#bb3e03', '#ae2012', '#9b2226'],
6: ['#001219', '#005f73', '#0a9396', '#94d2bd', '#e9d8a6', '#ee9b00', '#ca6702', '#bb3e03', '#ae2012', '#9b2226'],
7: ['#001219', '#005f73', '#0a9396', '#94d2bd', '#e9d8a6', '#ee9b00', '#ca6702', '#bb3e03', '#ae2012', '#9b2226'],
8: ['#001219', '#005f73', '#0a9396', '#94d2bd', '#e9d8a6', '#ee9b00', '#ca6702', '#bb3e03', '#ae2012', '#9b2226'],
1: ['#007f5f', '#2b9348', '#55a630', '#80b918', '#aacc00', '#bfd200', '#d4d700', '#dddf00', '#eeef20', '#ffff3f'],
2: ['#7400b8', '#6930c3', '#5e60ce', '#5390d9', '#4ea8de', '#48bfe3', '#56cfe1', '#64dfdf', '#72efdd', '#80ffdb'],
3: ['#012a4a', '#013a63', '#01497c', '#014f86', '#2a6f97', '#2c7da0', '#468faf', '#61a5c2', '#89c2d9', '#a9d6e5'],
4: ['#ff7b00', '#ff8800', '#ff9500', '#ffa200', '#ffaa00', '#ffb700', '#ffc300', '#ffd000', '#ffdd00', '#ffea00'],
5: ['#033270', '#1368aa', '#4091c9', '#9dcee2', '#fedfd4', '#f29479', '#f26a4f', '#ef3c2d', '#cb1b16', '#65010c'],
6: ['#b76935', '#a56336', '#935e38', '#815839', '#6f523b', '#5c4d3c', '#4a473e', '#38413f', '#263c41', '#143642'],
7: ['#eb5e28', '#f27f34', '#f9a03f', '#f6b049', '#f3c053', '#a1c349', '#94b33d', '#87a330', '#799431', '#6a8532'],
8: ['#264653', '#287271', '#2a9d8f', '#8ab17d', '#babb74', '#e9c46a', '#efb366', '#f4a261', '#ee8959', '#e76f51'],
9: ['#0c3e5e', '#155b87', '#2d92d1', '#74bbe8', '#97d1f4', '#0c5e50', '#158774', '#2ed1b5', '#74e8d4', '#97f4e5'],
10: ['#00193a', '#002b53', '#023f73', '#034780', '#7a0213', '#a10220', '#bf0a26', '#cd0c2b', '#131313', '#262626'],
11: ['#ff0072', '#ff177f', '#ff2e8c', '#ff4598', '#ff5ca5', '#ff74b2', '#ff8bbf', '#ffa2cb', '#ffb9d8', '#ffd0e5'],
12: ['#8ecae6', '#219ebc', '#126782', '#023047', '#ffb703', '#fd9e02', '#fb8500', '#bb3e03', '#ae2012', '#9b2226'],
13: ['#70b8ff', '#429bfa', '#147df5', '#095dd7', '#0000ff', '#0000b8', '#00008f', '#000079', '#000052', '#00003d'],
14: ['#f72585', '#b5179e', '#7209b7', '#560bad', '#480ca8', '#3a0ca3', '#159f91', '#1bccba', '#1ee3cf', '#92f2e8'],
15: ['#f2636a', '#dc4b4f', '#c63333', '#e94900', '#ef6803', '#f58606', '#c1b225', '#72a85f', '#229e99', '#36a7a2'],
16: ['#5c0000', '#751717', '#ba0c0c', '#ff0000', '#ffebeb', '#ecffeb', '#27a300', '#2a850e', '#2d661b', '#005c00'],
17: ['#643100', '#763a00', '#7f3e00', '#914600', '#af5500', '#b96619', '#c27731', '#cb8849', '#d49961', '#eacaae'],
};
// choose a random color palette for the nodes
const palette = palettes[Math.floor(Math.random() * 8) + 1];
Expand Down

0 comments on commit a817598

Please sign in to comment.