Isometric Treemap Visualization of Money Allocation

Developer
Steve Pepple
Size
3,403 Kb
Views
14,168
  1. Isometric Treemap Visualization of Money Allocation Previews
  2. Isometric Treemap Visualization of Money Allocation HTML Codes
  3. Isometric Treemap Visualization of Money Allocation CSS Codes
  4. Isometric Treemap Visualization of Money Allocation JS Codes

How do I make an isometric treemap visualization of money allocation?

Code forked from nitaku’s block: http://bl.ocks.org/nitaku/e03a1a5c1a4a95f06c3b. What is a isometric treemap visualization of money allocation? How do you make a isometric treemap visualization of money allocation? This script and codes were developed by Steve Pepple on 30 September 2022, Friday.

Isometric Treemap Visualization of Money Allocation Previews
IQ Test

Isometric Treemap Visualization of Money Allocation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Isometric Treemap Visualization of Money Allocation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!doctype html>
<html lang="en"> <head>	<meta charset="utf-8">	<title>Isometric Treemap of Defence Budgets 2015</title>	<script src="https://d3js.org/d3.v3.min.js"></script>	<link rel="stylesheet" href="index.css"> </head> <body>	<svg width="960px" height="600px"></svg>	<script src="index.js"></script> </body>
</html> <script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.min.js'></script>
<script src='http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Isometric Treemap Visualization of Money Allocation - Script Codes CSS Codes

.iso.face.bottom { fill: brown;
}
.iso.outline { stroke: white; fill: none; vector-effect: non-scaling-stroke;
}
.vis:hover .pipedon:not(:hover) * { opacity: 0.3;
}

Isometric Treemap Visualization of Money Allocation - Script Codes JS Codes

(function() { var color, data, enter_pipedons, height, iso_layout, isometric, parallelepipedon, path_generator, pipedons, svg, treemap, vis, width, zoom, zoomable_layer; var budgets = [596, 146, 82, 66, 56, 48, 47, 41, 37, 34]; svg = d3.select('svg'); // Make canvas the same size as window width = svg.node().getBoundingClientRect().width; height = svg.node().getBoundingClientRect().height; zoomable_layer = svg.append('g'); var tip = d3.tip() .attr('class', 'd3-tip') .offset([0, 0]) .html(function(d) { return "<strong>Frequency:</strong> <span style='color:red'>" + d.frequency + "</span>"; }) // handle zooming and panning behavoir zoom = d3.behavior.zoom().scaleExtent([1, 10]).on('zoom', function() { return zoomable_layer.attr({ transform: "translate(" + (zoom.translate()) + ")scale(" + (zoom.scale()) + ")" }); }); svg.call(zoom); vis = zoomable_layer.append('g').attr({ "class": 'vis', transform: "translate(" + (width / 2) + "," + (height / 3) + ")" }); isometric = function(_3d_p) { return [-Math.sqrt(3) / 2 * _3d_p[0] + Math.sqrt(3) / 2 * _3d_p[1], +0.5 * _3d_p[0] + 0.5 * _3d_p[1] - _3d_p[2]]; }; parallelepipedon = function(d) { var fb, ft, mlb, mlt, mrb, mrt, nb, nt; if (!(d.x != null)) { d.x = 0; } if (!(d.y != null)) { d.y = 0; } if (!(d.h != null)) { d.h = 0; } if (!(d.dx != null)) { d.dx = 10; } if (!(d.dy != null)) { d.dy = 10; } if (!(d.dh != null)) { d.dh = 10; } fb = isometric([d.x, d.y, d.h], mlb = isometric([d.x + d.dx, d.y, d.h], nb = isometric([d.x + d.dx, d.y + d.dy, d.h], mrb = isometric([d.x, d.y + d.dy, d.h], ft = isometric([d.x, d.y, d.h + d.dh], mlt = isometric([d.x + d.dx, d.y, d.h + d.dh], nt = isometric([d.x + d.dx, d.y + d.dy, d.h + d.dh], mrt = isometric([d.x, d.y + d.dy, d.h + d.dh])))))))); d.iso = { face_bottom: [fb, mrb, nb, mlb], face_left: [mlb, mlt, nt, nb], face_right: [nt, mrt, mrb, nb], face_top: [ft, mrt, nt, mlt], outline: [ft, mrt, mrb, nb, mlb, mlt], far_point: fb }; return d; }; iso_layout = function(data, shape, scale) { if (!(scale != null)) { scale = 1; } data.forEach(function(d) { return shape(d, scale); }); return data.sort(function(a, b) { return b.dh - a.dh; }); }; path_generator = function(d) { return 'M' + d.map(function(p) { return p.join(' '); }).join('L') + 'z'; }; treemap = d3.layout.treemap().size([300, 300]).value(function(d) { return d.area; }).sort(function(a, b) { return a.dh - b.dh; }).ratio(1).round(false); // colors used in the treemap color = d3.scale.category20(); scale = d3.scale.linear() .domain([1, getMaxOfArray(budgets)]) .range([1, 200]) data = []; _.forEach(budgets, function(val){ var area = val; var dh = scale(val); data.push({ area: area, dh: dh }); }) console.log(data) data = treemap.nodes({ children: data }).filter(function(n) { return n.depth === 1; }); iso_layout(data, parallelepipedon); pipedons = vis.selectAll('.pipedon').data(data); enter_pipedons = pipedons.enter().append('g').attr({ "class": 'pipedon' }); enter_pipedons.append('path').attr({ "class": 'iso face bottom', d: function(d) { return path_generator(d.iso.face_bottom); } }); enter_pipedons.append('path').attr({ "class": 'iso face left template', d: function(d) { return path_generator(d.iso.face_left); }, fill: function(d, i) { return color(i); } }); enter_pipedons.append('path').attr({ "class": 'iso face right', d: function(d) { return path_generator(d.iso.face_right); }, fill: function(d) { color = d3.hcl(d3.select(this.parentNode).select('.template').style('fill')); color = color.darker(1.5); return d3.hcl(color.h, color.c, color.l - 12); console.log("Hover state: ") } }); enter_pipedons.call(tip); enter_pipedons.append('path').attr({ "class": 'iso face top', d: function(d) { return path_generator(d.iso.face_top); }, fill: function(d) { color = d3.hcl(d3.select(this.parentNode).select('.template').style('fill')); return d3.hcl(color.h, color.c, color.l + 12); } }); enter_pipedons.append('path').attr({ "class": 'iso outline', d: function(d) { return path_generator(d.iso.outline); } });
}).call(this);
function getMaxOfArray(numArray) { return Math.max.apply(null, numArray);
}
Isometric Treemap Visualization of Money Allocation - Script Codes
Isometric Treemap Visualization of Money Allocation - Script Codes
Home Page Home
Developer Steve Pepple
Username stevepepple
Uploaded September 30, 2022
Rating 3
Size 3,403 Kb
Views 14,168
Do you need developer help for Isometric Treemap Visualization of Money Allocation?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Steve Pepple (stevepepple) Script Codes
Name
Geofence Example
Colors from Photos Taken in the Mission
Flying Web GL Map
Bay Area Bus Stops and Businesses
Multi-Hue Color Scales with Bezier Interpolation
Visualizing Search Algorithms and Heuristics
Real Time Buses API
LA Point-of-Interest Analysis
A Pen by Steve Pepple
Bay Area Example of ViziCities
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!