Published
Edited
May 16, 2020
1 fork
{
const root = treemap(dataToHierarchy());
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("font", "10px sans-serif");
const leaf = svg.selectAll("g")
.data(root.leaves())
.join("g")
.attr("transform", d => `translate(${d.x0},${d.y0})`);
leaf.append("title")
.text(d => `${d.ancestors().reverse().map(d => d.data.name).join("/")}\n${format(d.value)}`);
leaf.append("rect")
.attr("id", d => (d.leafUid = DOM.uid("leaf")).id)
.attr("fill", d => { while (d.depth > 1) d = d.parent; return color(d.data.name); })
.attr("fill-opacity", 0.6)
.attr("width", d => d.x1 - d.x0)
.attr("height", d => d.y1 - d.y0)
.on('mouseover', function (d) {
mutable hovering = d.ancestors().reverse().map(d => d.data.name).join("/")
+' '+format(d.value)
d3.select(this)
.attr('opacity', 0.5)
})
// Listen to the "mouseout" event, and reset the value of "hovering" and color
.on('mouseout', function (d) {
mutable hovering = 'None'
d3.select(this)
.attr('opacity', 1)
})
.on('click', function(d){
})
leaf.append("clipPath")
.attr("id", d => (d.clipUid = DOM.uid("clip")).id)
.append("use")
.attr("xlink:href", d => d.leafUid.href);
leaf.append("text")
.attr("clip-path", d => d.clipUid)
.selectAll("tspan")
.data(d => d.data.name.split(/(?=[A-Z][a-z])|\s+/g).concat(format(d.value)))
.join("tspan")
.attr("x", 3)
.attr("y", (d, i, nodes) => `${(i === nodes.length - 1) * 0.3 + 1.1 + i * 0.9}em`)
.attr("fill-opacity", (d, i, nodes) => i === nodes.length - 1 ? 0.7 : null)
.text(d => d);
return svg.node();
}
format = d3.format(",d")
treemap = data => d3.treemap()
.tile(d3.treemapSquarify)
.size([width, height])
.padding(1)
.round(true)
(d3.hierarchy(data)
.sum(d=>d.value)
.sort((a, b) => b.value - a.value)
)
function dataToHierarchy(){
var aix = ["Regia Marina", "Kriegsmarine", "Imperial Japanese Navy", "Romania", "Nazi Germany", "Germany",
"Japan", "Italy"]
var sideFilterS, sideFilterA, sideFilterV
switch(side){
case 'All':
sideFilterS = ''
sideFilterA = ''
sideFilterV = ''
break;
case 'allies':
sideFilterS = (v) => !_.includes(aix, v['Country or organization'])
sideFilterA = (v) => !_.includes(aix, v['Country of origin\n'])
sideFilterV = (v) => !_.includes(aix, v['Country'])
break;
case 'axis':
sideFilterS = (v) => _.includes(aix, v['Country or organization'])
sideFilterA = (v) => _.includes(aix, v['Country of origin\n'])
sideFilterV = (v) => _.includes(aix, v['Country'])
break;
}
var ship = _.chain(list_of_ship)
.filter(sideFilterS)
.groupBy('Country or organization')
.map((value, key) => ({ 'name': key, 'children':_.chain(value)
.groupBy('Type')
.map((value, key) => ({ 'name': key, 'children':_.chain(value)
.groupBy('Ship')
.value(), 'value': value.length }))
.value()}))
.value()
// var groupByCountry = _.chain(list_of_ship)
// .groupBy('Country or organization')
// .mapValues(values=> _.chain(values)
// .groupBy('Type')
// .value()
// )
// .value()
var aircraft =_.chain(list_of_aircraft)
.filter(sideFilterA)
.groupBy('Country of origin\n')
.map((value, key) => ({ 'name': key, 'children':_.chain(value)
.groupBy('Categories\n')
.map((value, key) => ({ 'name': key, 'children':_.chain(value)
.groupBy('Name of aircraft\n')
.value(), 'value': value.length }))
.value()}))
.value()
var weapon =_.chain(list_of_weapon)
.filter(sideFilterV)
.groupBy('Country')
.map((value, key) => ({ 'name': key, 'children':_.chain(value)
.groupBy('Type')
.map((value, key) => ({ 'name': key, 'children':_.chain(value)
.groupBy('Weapon')
.value(), 'value': value.length }))
.value()}))
.value()
var vehicle = _.chain(list_of_vehicle)
.filter(sideFilterV)
.groupBy('Country')
.map((value, key) => ({ 'name': key, 'children':_.chain(value)
.groupBy('Types')
.map((value, key) => ({ 'name': key, 'children':_.chain(value)
.groupBy('Name')
.value(), 'value': value.length }))
.value()}))
.value()
// var vehicle = _.chain(list_of_vehicle)
// .filter(sideFilterV)
// .groupBy('Country')
// .map((value, key) => ({ 'name': key, 'children':_.chain(value)
// .groupBy('Types')
// .map((value, key) => ({ 'name': key, 'children':_.chain(value)
// .groupBy('Name')
// .map((value, key) => ({ 'name': key, 'children':_.chain(value)
// , 'value': value.length }))
// .value()}))
// .value()}))
// .value()
var temp= new Object
temp.name = ''
temp.children = vehicle
switch(equipment){
case 'ship':
temp.children = ship
break;
case 'aircraft':
temp.children = aircraft
break;
case 'vehicle':
temp.children = vehicle
break;
case 'weapon':
temp.children = weapon
break;
}
return temp;
}
dataToHierarchy()
list_of_vehicle = d3.csv('https://raw.githubusercontent.com/sharpsonmong/comp4462_data_visualization/master/equipment/wiki_list_of_vehicles.csv?token=AII4MQ2GLRGAT7V5W7WSZIK6YEYY2')
list_of_aircraft = d3.csv('https://raw.githubusercontent.com/sharpsonmong/comp4462_data_visualization/master/equipment/wiki_operational_aircraft.csv?token=AII4MQ43BS5Z6MS6DU73W4K6YEXBC')
list_of_ship = d3.csv(
'https://raw.githubusercontent.com/sharpsonmong/comp4462_data_visualization/master/equipment/wiki_list_of_ship.csv?token=AII4MQ4ZLOEDHQ7YYGWY5LC6YARDI')
list_of_weapon = d3.csv('https://raw.githubusercontent.com/sharpsonmong/comp4462_data_visualization/master/equipment/wiki_list_of_common_world_war_ii_infantry_weapons.csv?token=AII4MQ3CA5BLZXZZ23DJCDK6YEYR2')
width
height = 810
color = d3.scaleOrdinal(d3.schemePaired)
d3 = require('d3', 'd3-svg-legend')
_ = require('lodash')
{
var aix = ["Regia Marina", "Kriegsmarine", "Imperial Japanese Navy", "Romania", "Nazi Germany", "Germany"
, "Japan", "Italy"]
var isAxis = (v) => !_.includes(aix, v['Country or organization'])
var ship = _.chain(list_of_aircraft)
.filter(isAxis)
.groupBy('Country or organization')
.map((value, key) => ({ 'name': key, 'children':_.chain(value)
.groupBy('Type')
.map((value, key) => ({ 'name': key, 'children':_.chain(value)
.groupBy('Ship')
.value(), 'value': value.length }))
.value()}))
.value()
return ship
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
