Skip to content

Commit

Permalink
feat(explorer): make it basic works
Browse files Browse the repository at this point in the history
  • Loading branch information
@phodal
phodal committed Mar 5, 2021
1 parent 01ca42b commit 79bd3db
Showing 1 changed file with 54 additions and 103 deletions.
157 changes: 54 additions & 103 deletions web/public/js/graph/git/file-explorer.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
function renderCodeExplorer(freedom, elementId) {
function renderCodeExplorer(freedom, data, elementId) {
let margin = {top: 20, right: 20, bottom: 50, left: 50};
let width = GraphConfig.width - margin.left - margin.right;
let height = GraphConfig.width - margin.top - margin.bottom;
Expand All @@ -10,44 +10,22 @@ function renderCodeExplorer(freedom, elementId) {
(height * (1 + 0.99 * Math.sin((i / 50) * Math.PI))) / 2
])

let selectedYear = "2008";
let bigFormat = d3.format(",.0f");

let freedom_year = [];
freedom.map(obj => {
if (obj.year === selectedYear) {
freedom_year.push({
name: obj.countries,
value: parseInt(obj.population, 10),
region_simple: obj.region_simple
});
}
const rootNode = d3.hierarchy(data); // .sum(d => d.value);
rootNode.descendants().forEach((node) => {
node.data.hierarchNode = node;
});

let freedom_nest = d3.group(freedom_year, d => d.region_simple)
let data_nested = {key: "freedom_nest", values: freedom_nest}

let population_hierarchy = d3.hierarchy(data_nested.values).sum(d => d.value);

let regionColor = function (region) {
let colors = {
"Middle East and Africa": "#596F7E",
"Americas": "#168B98",
"Asia": "#ED5B67",
"Oceania": "#fd8f24",
"Europe": "#919c4c"
};
return colors[region];
}
let maxDepth = 3;
const allNodes = rootNode
.descendants()
.filter((d) => d.depth <= maxDepth)
.filter(
(d) => d.children === undefined || d.depth === maxDepth
);

let svg = d3.select(elementId).append("svg")
.attr("width", GraphConfig.width)
.attr("height", GraphConfig.width)
svg
.append("rect")
.attr("width", "100%")
.attr("height", "100%")
.style("fill", "#F5F5F2");
.attr("viewBox", [-GraphConfig.width / 2, -GraphConfig.height / 2, GraphConfig.width, GraphConfig.height,]);

const voronoi = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
const labels = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
Expand All @@ -58,102 +36,75 @@ function renderCodeExplorer(freedom, elementId) {
.prng(seed)
.clip(ellipse);

function colorHierarchy(hierarchy) {
if (hierarchy.depth === 0) {
hierarchy.color = 'black';
} else if (hierarchy.depth === 1) {
hierarchy.color = regionColor(hierarchy.data[0]);
} else {
hierarchy.color = hierarchy.parent.color;
}

if (hierarchy.children) {
hierarchy.children.forEach(child => colorHierarchy(child))
}
}

voronoiTreeMap(population_hierarchy);
colorHierarchy(population_hierarchy);

let allNodes = population_hierarchy.descendants()
.sort((a, b) => b.depth - a.depth)
.map((d, i) => Object.assign({}, d, {id: i}));

let hoveredShape = null;

voronoi.selectAll('path')
.data(allNodes)
.enter()
.append('path')
.attr('d', d => "M" + d.polygon.join("L") + "Z")
.attr('d', d => `${d3.line()(d.data.layout.polygon)}z`)
.style('fill', d => d.parent ? d.parent.color : d.color)
.attr("stroke", "#F5F5F2")
.attr("stroke-width", 0)
.style('fill-opacity', d => d.depth === 2 ? 1 : 0)
.attr('pointer-events', d => d.depth === 2 ? 'all' : 'none')
// .attr("stroke-width", 0)
// .style('fill-opacity', d => d.depth === 2 ? 1 : 0)
// .attr('pointer-events', d => d.depth === 2 ? 'all' : 'none')
.on('mouseenter', d => {
let label = labels.select(`.label-${d.id}`);
label.attr('opacity', 1)
let pop_label = pop_labels.select(`.label-${d.id}`);
pop_label.attr('opacity', 1)
})
.on('mouseleave', d => {
let label = labels.select(`.label-${d.id}`);
label.attr('opacity', d => d.data.value > 130000000 ? 1 : 0)
let pop_label = pop_labels.select(`.label-${d.id}`);
pop_label.attr('opacity', d => d.data.value > 130000000 ? 1 : 0)
// let label = labels.select(`.label-${d.id}`);
// label.attr('opacity', d => d.data.value > 130000000 ? 1 : 0)
// let pop_label = pop_labels.select(`.label-${d.id}`);
// pop_label.attr('opacity', d => d.data.value > 130000000 ? 1 : 0)
})
.transition()
.duration(1000)
.attr("stroke-width", d => 7 - d.depth * 2.8)
.style('fill', d => d.color);
// .style('fill', d => d.color);

labels.selectAll('text')
.data(allNodes.filter(d => d.depth === 2))
.data(allNodes)
.enter()
.append('text')
.attr('class', d => `label-${d.id}`)
.attr('text-anchor', 'middle')
.attr("transform", d => "translate(" + [d.polygon.site.x, d.polygon.site.y + 6] + ")")
.text(d => d.data.key || d.data.name)
.attr('opacity', function (d) {
if (d.data.key === hoveredShape) {
return (1);
} else if (d.data.value > 130000000) {
return (1);
} else {
return (0);
}
.attr("transform", d => {
// return "translate(" + [d.data.layout.polygon.site.x, d.data.layout.polygon.site.y + 6] + ")"
})

.attr('cursor', 'default')
.attr('pointer-events', 'none')
.attr('fill', 'black')
.style('font-family', 'Montserrat');

pop_labels.selectAll('text')
.data(allNodes.filter(d => d.depth === 2))
.enter()
.append('text')
.attr('class', d => `label-${d.id}`)
.attr('text-anchor', 'middle')
.attr("transform", d => "translate(" + [d.polygon.site.x, d.polygon.site.y + 25] + ")")
.text(d => bigFormat(d.data.value))
//.attr('opacity', d => d.data.key === hoveredShape ? 1 : 0)
.attr('opacity', function (d) {
if (d.data.key === hoveredShape) {
return (1);
} else if (d.data.value > 130000000) {
return (1);
} else {
return (0);
}
.text(d => {
return d.data.path
})
.attr('opacity', function (d) {

})
.attr('cursor', 'default')
.attr('pointer-events', 'none')
.attr('fill', 'black')
.style('font-size', '12px')
.style('font-family', 'Montserrat');
.attr('fill', 'white')

// pop_labels.selectAll('text')
// .data(allNodes.filter(d => d.depth === 2))
// .enter()
// .append('text')
// .attr('class', d => `label-${d.id}`)
// .attr('text-anchor', 'middle')
// // .attr("transform", d => "translate(" + [d.polygon.site.x, d.polygon.site.y + 25] + ")")
// .text(d => bigFormat(d.data.value))
// //.attr('opacity', d => d.data.key === hoveredShape ? 1 : 0)
// .attr('opacity', function (d) {
// if (d.data.key === hoveredShape) {
// return (1);
// } else if (d.data.value > 130000000) {
// return (1);
// } else {
// return (0);
// }
// })
//
// .attr('cursor', 'default')
// .attr('pointer-events', 'none')
// .attr('fill', 'black')
// .style('font-size', '12px')
// .style('font-family', 'Montserrat');

}

0 comments on commit 79bd3db

Please sign in to comment.