Treemaps for my master's exhibition.
Last active
December 16, 2015 16:49
-
-
Save wiederkehr/5466219 to your computer and use it in GitHub Desktop.
Treemaps for my master's exhibition.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {"name":"income","children":[{"name":"Cash","size":1},{"name":"Accounts","children":[{"name":"Savings Account","size":4},{"name":"Transactional Account","size":2}]},{"name":"Funds","children":[{"name":"Equity Funds","size":5},{"name":"Bond Funds","size":2},{"name":"Money Market Funds","size":2}]},{"name":"Property","children":[{"name":"Real Estate","size":10},{"name":"Commodities","size":2}]},{"name":"Pension Deposit","size":4}]} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {"name":"income","children":[{"name":"Other Income","size":1},{"name":"Child","children":[{"name":"Child Support","size":3},{"name":"Alimony","size":2}]},{"name":"Investment","children":[{"name":"Investment Income","size":5},{"name":"Real Estate Investment Income","size":4}]},{"name":"Salary","children":[{"name":"Primary Income","size":15},{"name":"Spouse's Income","size":13},{"name":"Business Income","size":8}]},{"name":"Other","children":[{"name":"Inheritance","size":2},{"name":"Windfall","size":1}]},{"name":"Other","children":[{"name":"Social Security Income","size":3},{"name":"Disability Income","size":2},{"name":"Pension Income","size":4}]}]} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang=en> | |
| <head> | |
| <meta charset=utf-8> | |
| <title>Treemaps</title> | |
| <link type="text/css" rel="stylesheet" href="style.css"/> | |
| </head> | |
| <body> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {"name":"income","children":[{"name":"Discretionary Spending","children":[{"name":"Personal Expenses","children":[{"name":"Fashion","size":2},{"name":"Travel & Vacation","size":4},{"name":"Clothing","size":1},{"name":"Dining Out","size":2},{"name":"Entertainement","size":1},{"name":"Cigarettes & Tabacco","size":1},{"name":"Beer & Alcohol","size":2}]},{"name":"Mobility","children":[{"name":"Auto Loan","size":3},{"name":"Auto repairs","size":1},{"name":"Gasoline","size":1}]},{"name":"Communication & Media","children":[{"name":"Mobile Phone","size":2},{"name":"Computer","size":1},{"name":"Internet","size":1}]},{"name":"Household","children":[{"name":"Hobby","size":3},{"name":"Pets","size":1},{"name":"Garden Supplies","size":1},{"name":"Home Security","size":1},{"name":"Home Improvement","size":3},{"name":"Telephone","size":1},{"name":"Cable or Satelite Television","size":1}]}]},{"name":"Mandatory Spending","children":[{"name":"Other Dependent Expenses","size":2},{"name":"Living","children":[{"name":"Home Supplies","size":2},{"name":"Home Repairs","size":4},{"name":"Gas & Electric","size":2},{"name":"Garbage","size":1},{"name":"Water","size":1},{"name":"Home Equity Loan","size":1},{"name":"Rent or Mortgage","size":15}]},{"name":"Household","children":[{"name":"Child & Baby Expenses","size":6},{"name":"Childcare","size":4},{"name":"Laundry","size":1},{"name":"Food & Groceries","size":1}]},{"name":"Taxes ","children":[{"name":"Credit Card Bills","size":4},{"name":"Business Income Expenses","size":1},{"name":"Investment Real Estate Expenses","size":1},{"name":"Student Loans","size":4},{"name":"Property Taxes","size":3},{"name":"Income Deductions","size":1},{"name":"Payroll Taxes","size":4}]},{"name":"Insurances","children":[{"name":"Dental Care or Insurance","size":2},{"name":"Health Care or Insurance","size":2},{"name":"Home or Renters Insurance","size":2},{"name":"Auto Insurance","size":2},{"size":1,"name":"Life Insurance"}]}]}]} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function() { | |
| var margin = {top: 20, right: 20, bottom: 20, left: 60}, | |
| width = 1000 - margin.left - margin.right, | |
| height = 340 - margin.top - margin.bottom; | |
| var svg = d3.select("body").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 color = d3.scale.category20c(); | |
| var treemap = d3.layout.treemap() | |
| .size([width, height]) | |
| .sticky(true) | |
| .value(function(d) { return d.size; }); | |
| d3.json("holding.json", function(error, root) { | |
| var nodes = treemap.nodes(root) | |
| .filter(function(d) { return !d.children; }); | |
| var cell = svg.selectAll("g") | |
| .data(nodes) | |
| .enter().append("g") | |
| .attr("class", "cell") | |
| .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); | |
| cell.append("rect") | |
| .attr("width", function(d) { return d.dx - 1; }) | |
| .attr("height", function(d) { return d.dy - 1; }) | |
| .style("fill", function(d) { return color(d.parent.name); }); | |
| cell.append("text") | |
| .attr("x", function(d) { return d.dx / 2; }) | |
| .attr("y", function(d) { return d.dy / 2; }) | |
| .attr("dy", ".35em") | |
| .attr("text-anchor", "middle") | |
| .text(function(d) { return d.name; }); | |
| }); | |
| })() |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| font: 10px "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| } | |
| .axis path { | |
| fill: none; | |
| stroke: #000; | |
| shape-rendering: crispEdges; | |
| } | |
| .axis line { | |
| fill: none; | |
| stroke: #000; | |
| shape-rendering: crispEdges; | |
| } | |
| .node { | |
| border: solid 1px white; | |
| font: 10px sans-serif; | |
| line-height: 12px; | |
| overflow: hidden; | |
| position: absolute; | |
| text-indent: 2px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment