Skip to content

Instantly share code, notes, and snippets.

@pierreelliott

pierreelliott/.block

Last active January 7, 2020 12:04
Show Gist options
  • Save pierreelliott/4152df6e66f6e9386ca439922b78cd02 to your computer and use it in GitHub Desktop.
Save pierreelliott/4152df6e66f6e9386ca439922b78cd02 to your computer and use it in GitHub Desktop.
Download ZIP
Projet Dataviz - Classement
Raw
.block
license: mit
Raw
data.json
{"categories": [{"cat_name": "Search", "sites": [{"total": 3085729, "session_length": 0.196933333333277, "data": {"text": {"html": {"val": 756083, "prop": 245}, "javascript": {"val": 2183083, "prop": 707}, "plain": {"val": 12389, "prop": 4}, "val": 2951555, "prop": 956, "type": "text"}, "application": {"javascript": {"val": 0, "prop": 0}, "binary": {"val": 17254, "prop": 5}, "json": {"val": 50103, "prop": 16}, "val": 67357, "prop": 21, "type": "application"}, "image": {"png": {"val": 66459, "prop": 21}, "webp": {"val": 0, "prop": 0}, "x-icon": {"val": 355, "prop": 0}, "val": 66814, "prop": 21, "type": "image"}, "others": {"val": 3, "prop": 2, "types": ["font", "x-unknown"], "type": "others"}}, "total_proportion": 1000, "array_data": [{"html": {"val": 756083, "prop": 245}, "javascript": {"val": 2183083, "prop": 707}, "plain": {"val": 12389, "prop": 4}, "val": 2951555, "prop": 956, "type": "text"}, {"javascript": {"val": 0, "prop": 0}, "binary": {"val": 17254, "prop": 5}, "json": {"val": 50103, "prop": 16}, "val": 67357, "prop": 21, "type": "application"}, {"png": {"val": 66459, "prop": 21}, "webp": {"val": 0, "prop": 0}, "x-icon": {"val": 355, "prop": 0}, "val": 66814, "prop": 21, "type": "image"}, {"val": 3, "prop": 2, "types": ["font", "x-unknown"], "type": "others"}], "website": "Google"}], "average": {"website": "Average Search website", "data": {"text": {"val": 2951555, "prop": 956}, "application": {"val": 67357, "prop": 21}, "image": {"val": 66814, "prop": 21}, "others": {"val": 3, "prop": 2}}, "total": 3085729, "total_proportion": 1000}}, {"cat_name": "Video", "sites": [{"total": 5386678, "session_length": 3.6858000000000857, "data": {"text": {"html": {"val": 119748, "prop": 22}, "plain": {"val": 123, "prop": 0}, "javascript": {"val": 389326, "prop": 72}, "css": {"val": 24046, "prop": 4}, "xml": {"val": 59, "prop": 0}, "val": 533302, "prop": 98, "type": "text"}, "image": {"jpeg": {"val": 81063, "prop": 15}, "webp": {"val": 915222, "prop": 169}, "gif": {"val": 1088, "prop": 0}, "x-icon": {"val": 0, "prop": 0}, "png": {"val": 24789, "prop": 4}, "val": 1022162, "prop": 188, "type": "image"}, "video": {"webm": {"val": 2363563, "prop": 438}, "x-flv": {"val": 37, "prop": 0}, "val": 2363600, "prop": 438, "type": "video"}, "audio": {"webm": {"val": 1400875, "prop": 260}, "val": 1400875, "prop": 260, "type": "audio"}, "others": {"val": 66739, "prop": 16, "types": ["font", "application", "x-unknown"], "type": "others"}}, "total_proportion": 1000, "array_data": [{"html": {"val": 119748, "prop": 22}, "plain": {"val": 123, "prop": 0}, "javascript": {"val": 389326, "prop": 72}, "css": {"val": 24046, "prop": 4}, "xml": {"val": 59, "prop": 0}, "val": 533302, "prop": 98, "type": "text"}, {"jpeg": {"val": 81063, "prop": 15}, "webp": {"val": 915222, "prop": 169}, "gif": {"val": 1088, "prop": 0}, "x-icon": {"val": 0, "prop": 0}, "png": {"val": 24789, "prop": 4}, "val": 1022162, "prop": 188, "type": "image"}, {"webm": {"val": 2363563, "prop": 438}, "x-flv": {"val": 37, "prop": 0}, "val": 2363600, "prop": 438, "type": "video"}, {"webm": {"val": 1400875, "prop": 260}, "val": 1400875, "prop": 260, "type": "audio"}, {"val": 66739, "prop": 16, "types": ["font", "application", "x-unknown"], "type": "others"}], "website": "YouTube"}, {"total": 7503932, "session_length": 3.712033333333352, "data": {"image": {"jpeg": {"val": 75056, "prop": 10}, "gif": {"val": 9356, "prop": 1}, "png": {"val": 4602, "prop": 0}, "val": 89014, "prop": 11, "type": "image"}, "application": {"json": {"val": 38904, "prop": 5}, "javascript": {"val": 152058, "prop": 20}, "x-javascript": {"val": 33394, "prop": 4}, "vnd.apple.mpegurl": {"val": 5713, "prop": 0}, "x-gzip": {"val": 0, "prop": 0}, "val": 230069, "prop": 29, "type": "application"}, "video": {"mp2t": {"val": 6679158, "prop": 890}, "webm": {"val": 488788, "prop": 65}, "val": 7167946, "prop": 955, "type": "video"}, "others": {"val": 16903, "prop": 5, "types": ["text", "x-unknown"], "type": "others"}}, "total_proportion": 1000, "array_data": [{"jpeg": {"val": 75056, "prop": 10}, "gif": {"val": 9356, "prop": 1}, "png": {"val": 4602, "prop": 0}, "val": 89014, "prop": 11, "type": "image"}, {"json": {"val": 38904, "prop": 5}, "javascript": {"val": 152058, "prop": 20}, "x-javascript": {"val": 33394, "prop": 4}, "vnd.apple.mpegurl": {"val": 5713, "prop": 0}, "x-gzip": {"val": 0, "prop": 0}, "val": 230069, "prop": 29, "type": "application"}, {"mp2t": {"val": 6679158, "prop": 890}, "webm": {"val": 488788, "prop": 65}, "val": 7167946, "prop": 955, "type": "video"}, {"val": 16903, "prop": 5, "types": ["text", "x-unknown"], "type": "others"}], "website": "DailyMotion"}], "average": {"website": "Average Video website", "data": {"text": {"val": 266651, "prop": 41}, "image": {"val": 555588, "prop": 86}, "video": {"val": 4765773, "prop": 739}, "audio": {"val": 700437, "prop": 108}, "others": {"val": 41821, "prop": 9}, "application": {"val": 115034, "prop": 17}}, "total": 6445304, "total_proportion": 1000}}]}
Raw
data2.json
{"categories": [{"cat_name": "Search", "sites": [{"total": 26730129, "session_length": 0.1433833333334178, "data": {"text": {"html": {"val": 4983005, "prop": 186}, "javascript": {"val": 14881339, "prop": 556}, "css": {"val": 959916, "prop": 35}, "plain": {"val": 81125, "prop": 3}, "val": 20905385, "prop": 780, "type": "text"}, "image": {"png": {"val": 2628541, "prop": 98}, "webp": {"val": 263175, "prop": 9}, "x-icon": {"val": 28769, "prop": 1}, "svg+xml": {"val": 30735, "prop": 1}, "jpeg": {"val": 2231486, "prop": 83}, "gif": {"val": 158254, "prop": 5}, "vnd.microsoft.icon": {"val": 0, "prop": 0}, "val": 5340960, "prop": 197, "type": "image"}, "font": {"woff2": {"val": 275701, "prop": 10}, "val": 275701, "prop": 10, "type": "font"}, "others": {"val": 208083, "prop": 13, "types": ["x-unknown", "application"], "type": "others"}}, "total_proportion": 1000, "array_data": [{"html": {"val": 4983005, "prop": 186}, "javascript": {"val": 14881339, "prop": 556}, "css": {"val": 959916, "prop": 35}, "plain": {"val": 81125, "prop": 3}, "val": 20905385, "prop": 780, "type": "text"}, {"png": {"val": 2628541, "prop": 98}, "webp": {"val": 263175, "prop": 9}, "x-icon": {"val": 28769, "prop": 1}, "svg+xml": {"val": 30735, "prop": 1}, "jpeg": {"val": 2231486, "prop": 83}, "gif": {"val": 158254, "prop": 5}, "vnd.microsoft.icon": {"val": 0, "prop": 0}, "val": 5340960, "prop": 197, "type": "image"}, {"woff2": {"val": 275701, "prop": 10}, "val": 275701, "prop": 10, "type": "font"}, {"val": 208083, "prop": 13, "types": ["x-unknown", "application"], "type": "others"}], "website": "Google"}], "average": {"website": "Average Search website", "data": {"text": {"val": 20905385, "prop": 782}, "image": {"val": 5340960, "prop": 199}, "font": {"val": 275701, "prop": 10}, "others": {"val": 208083, "prop": 9}}, "total": 26730129, "total_proportion": 1000}}]}
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" crossorigin="anonymous"></script>
<style>
body { margin:10px;position:fixed;top:0;right:0;bottom:0;left:0; }
svg { border: 1px solid grey; }
.float-right { float: right; }
</style>
</head>
<body>
<h1>Classement des sites</h1>
<div id="categories">
</div>
<div id="ranking_visu"></div>
<script>
const ranking = (function(){
var sites = [];
function get_rank() {
return sites;
}
get_rank.remove = (site) => {
let idx = sites.findIndex(e => e.website === site.website);
if(idx != -1)
sites.splice(idx, 1);
};
get_rank.push = (site) => {
if(sites.every(e => e.website !== site.website))
sites.push(site);
};
return get_rank;
})();
var margin = {top: 20, right: 30, bottom: 20, left: 50},
width = 960 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
var cell = {height: 20, margin: 5};
var svg = d3.select("#ranking_visu")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
var sites_to_rank = [];
const t = svg.transition()
.duration(750);
d3.json("data.json").then(data => {
console.log("data", data);
var menu = d3.select("#categories");
createCategoryMenu(data.categories, menu)
menu.selectAll(".category-header > input")
.property("checked", true)
.dispatch("change");
})
function displayRanking() {
let data = ranking().sort((a,b) => d3.descending(a.total, b.total));
let max = d3.max(data, e => e.total);
// console.log(`Max is ${max}`, data);
var x = d3.scaleLinear()
.range([0, width/2])
.domain([0, max]);
// var x = (d) => {
// let c = xd3(d);
// console.log(`Checking size of ${d}: ${c}`);
// return c
// }
var ranks = svg.selectAll("rect")
.data(data, d => d.website)
.order()
.join(
enter =>
enter.append("rect")
.attr("fill", "green")
.attr("x", 0)
.attr("y", (d, i) => (cell.height + cell.margin)*i )
.attr("height", cell.height)
.attr("width", d => x(d.total))
.text(d => d.website)
.on("click", (d,i,n) => callCompareVisu(d))
,
// .call(enter => enter.transition(t)
// .attr("fill", "black")
// .attr("width", d => x(d.total))),
update => update.transition(t)
.attr("y", (d, i) => (cell.height + cell.margin)*i)
.attr("width", d => x(d.total))
,
exit => exit.attr("fill", "brown")
.call(exit => exit.transition(t)
.attr("x", d => x(d.total))
.attr("width", 0)
.remove())
).each(d => console.log("Bouhhhh:", d))
svg.selectAll("rect").data(ranks).each(d => console.log("d", d));
console.log("ranks", ranks)
}
function createCategoryMenu(categories, menu) {
var categoryTemplate = (category) => `
<div class="category-header cat-header-${getCategoryName(category)}">
<input type=checkbox id="check-${getCategoryName(category)}">
<label for="check-${getCategoryName(category)}">${category.cat_name}</label>
<a class="btn btn-primary float-right" role="button" data-toggle="collapse" href="#cat-${getCategoryName(category)}">Expand</a>
</div>
`
var siteTemplate = (site) => `
<input type=checkbox id="check-${getSiteName(site)}">
<label for="check-${getSiteName(site)}">${site.website}</label>
`
category = menu.selectAll(".category")
.data(categories)
.enter()
.append("div")
.attr("class", "category border-top border-primary mt-2")
.html(c => categoryTemplate(c))
.append("div")
.attr("id", c => `cat-${getCategoryName(c)}`)
.attr("class", "collapse sites")
.selectAll(".site")
.data(c => c.sites)
.enter()
.append("div")
.attr("class", "site ml-3")
.html(s => siteTemplate(s))
d3.select("#categories")
.selectAll(".category > .category-header > input")
.on("change", () => {
let domElem = d3.event.target;
let categoryName = domElem.id.replace("check-", "");
// console.log(`Update selection of category '${categoryName}'`);
d3.select(`#cat-${categoryName}`)
.selectAll(".site > input")
.property("checked", domElem.checked)
.dispatch("change");
});
d3.select("#categories")
.selectAll(".site")
.select("input")
.on("change", (d) => {
console.log(`${d3.event.target.checked? "C": "Unc"}hecked '${d.website}'`)
if(d3.event.target.checked) { ranking.push(d); }
else { ranking.remove(d); }
displayRanking(2)
})
}
function getCategoryName(category) {
return category.cat_name.toLowerCase().replace(" ", "-");
}
function getSiteName(site) {
return site.website.toLowerCase().replace(" ", "-");
}
function callCompareVisu(site) {
let category = d3.select(`#check-${getSiteName(site)}`).node().parentNode.parentNode.parentNode.__data__
console.log(category)
}
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment