Skip to content

Instantly share code, notes, and snippets.

@DouglasFletcher

DouglasFletcher/index.html

Created March 3, 2017 13:02
Show Gist options
  • Save DouglasFletcher/30a8b95113f4e0c2f8be72ad30493964 to your computer and use it in GitHub Desktop.
Save DouglasFletcher/30a8b95113f4e0c2f8be72ad30493964 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<!-- Douglas Fletcher: 2016.06.08 -->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>tree map</title>
<link rel="stylesheet" type="text/css"
href="https://fonts.googleapis.com/css?family=Open+Sans:400,600">
<!-- specific formatting -->
<!--<link rel="stylesheet" type="text/css" href="css/treeformats.css"/>-->
<style>
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: auto;
position: relative;
width: 800px;
}
form {
position: absolute;
left: 10px;
top: 0px;
width: 800px;
}
.node {
border: solid 1px white;
font: 10px sans-serif;
line-height: 12px;
overflow: hidden;
position: absolute;
text-indent: 2px;
}
iframe {
width: 800px;
height: 800px;
}
#formContainer {
background-color: white;
margin-top:20px;
}
.bottom-buffer {margin-bottom:50px; margin-top: 10px}
.d3-tip {
line-height: 1;
font-weight: bold;
padding: 12px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 2px;
}
/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
box-sizing: border-box;
display: inline;
font-size: 10px;
width: 100%;
line-height: 1;
color: rgba(0, 0, 0, 0.8);
content: "\25BC";
position: absolute;
text-align: center;
}
/* Style northward tooltips differently */
.d3-tip.n:after {
margin: -1px 0 0 0;
top: 100%;
left: 0;
}
</style>
<!-- Bootstrap -->
<!--<link href="css/bootstrap.min.css" rel="stylesheet">-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<!-- Title: TODO: add multscreen -->
<!--<div class="container-fluid" class="col-xs-2" id="topContainer">
<h1>Credit Allocation: Attributed vs. Last Event</h1>
</div>-->
<!-- Form controls: TODO: Add positioning horizontal, multiscreen -->
<div class="bottom-buffer container-fluid" id="formContainer">
<!--<form class="locator form-inline inline-block">-->
<form>
<!-- Record Type -->
<div class="form-group col-xs-4 col-md-3">
<label class="labelSize" for="RecordType">Success Type</label>
<select class="form-control" id="RecordType">
<option value="tag01" selected>tag01</option>
<option value="tag02">tag02</option>
<option value="tag03">tag03</option>
<option value="tag04">tag04</option>
</select>
</div>
<!-- Grouping Level -->
<div class="form-group col-xs-4 col-md-3.1">
<label class="labelSize" for="grouplevel">Meta Level</label>
<select class="form-control" id="grouplevel" name="grouplevel">
<option value="Group1">Site-Match</option>
<option value="Group2" selected>Campaign</option>
<option value="Group3">Type-Category</option>
</select>
</div>
<!-- attribution type -->
<div class="form-group col-xs-4 col-md-3.1">
<label class="labelSize" for="attribmethod">Method</label>
<select class="form-control" id="attribmethod">
<option value="method1">method1</option>
<option value="method2" selected>method2</option>
</select>
</div>
</form>
</div>
<!-- Graphic d3 -->
<div class="row-fluid" id="graphContainer" class="col-xs-2">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- bootstrap -->
<!--<script src="js/bootstrap.min.js"></script>-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">
</script>
<!-- d3 plugins -->
<script src="http://d3js.org/d3.v3.min.js"></script>
<!-- tip library -->
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<!-- graph functions: THIS IS WHERE GRAPH COMES FROM -->
<!--<script type="text/javascript" src="js/mapdata.js"></script>-->
<script type="text/javascript">
// Douglas Fletcher
// 2016.06.08
/// ================
/// global variables
/// ================
// define positions
var margin = {
top: 30,
right: 10,
bottom: 10,
left: 10
},
width = 760 - margin.left - margin.right,
height = 580 - margin.top - margin.bottom;
// tooltip init
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d) {
return "<p><strong>Investment:</strong> <span style='color:red'>" + d.name + "</span></p>"
+ "<p><strong>Conversions:</strong> <span style='color:red'>" + (Math.round(d.value * 10) / 10).toLocaleString('de-DE') + "</span></p>"
;
});
/// =============================================
/// __main__ to create graph based on user inputs
/// =============================================
/// ===========
/// user inputs
/// ===========
// set default values for graph
var recordtype = $("#RecordType").val();
var grouplevel = $("#grouplevel").val();
//d3.json("json/treemap_contribs_test.json", function(error, jsonin) {
//if (error) throw error;
var rawdata =
'{"name": "inputdata","children": [{"name": ["tag01","Group2","Action01"],"children": [{"name": "Campaign01","value": {"method2": 626.0,"method1": 851.0}},{"name": "Campaign13","value": {"method2": 4883.0,"method1": 4816.0}},{"name": "Campaign09","value": {"method2": 412.0,"method1": 672.0}},{"name": "Campaign10","value": {"method2": 776.0,"method1": 90.0}},{"name": "Campaign04","value": {"method2": 3571.0,"method1": 4097.0}},{"name": "Campaign14","value": {"method2": 5106.0,"method1": 3970.0}},{"name": "Campaign03","value": {"method2": 934.0,"method1": 194.0}},{"name": "Campaign18","value": {"method2": 6709.0,"method1": 6457.0}},{"name": "Campaign06","value": {"method2": 5228.0,"method1": 4886.0}},{"name": "Campaign15","value": {"method2": 5548.0,"method1": 5857.0}},{"name": "Campaign20","value": {"method2": 9361.0,"method1": 7464.0}},{"name": "Campaign08","value": {"method2": 5982.0,"method1": 7587.0}},{"name": "Campaign19","value": {"method2": 0,"method1": 896.0}},{"name": "Campaign12","value": {"method2": 0,"method1": 401.0}},{"name": "Campaign16","value": {"method2": 2768.0,"method1": 2712.0}},{"name": "Campaign11","value": {"method2": 302.0,"method1": 1343.0}},{"name": "Campaign05","value": {"method2": 3990.0,"method1": 4095.0}}]},{"name": ["tag01","Group2","Action02"],"children": [{"name": "Campaign13","value": {"method2": 4340.0,"method1": 4882.0}},{"name": "Campaign09","value": {"method2": 666.0,"method1": 1817.0}},{"name": "Campaign04","value": {"method2": 2618.0,"method1": 2098.0}},{"name": "Campaign14","value": {"method2": 5170.0,"method1": 6588.0}},{"name": "Campaign11","value": {"method2": 990.0,"method1": 950.0}},{"name": "Campaign18","value": {"method2": 6046.0,"method1": 5684.0}},{"name": "Campaign06","value": {"method2": 4587.0,"method1": 5460.0}},{"name": "Campaign15","value": {"method2": 3438.0,"method1": 4400.0}},{"name": "Campaign16","value": {"method2": 450.0,"method1": 1747.0}},{"name": "Campaign08","value": {"method2": 5775.0,"method1": 6811.0}},{"name": "Campaign20","value": {"method2": 9213.0,"method1": 10607.0}},{"name": "Campaign07","value": {"method2": 749.0,"method1": 336.0}},{"name": "Campaign12","value": {"method2": 823.0,"method1": 992.0}},{"name": "Campaign10","value": {"method2": 0,"method1": 703.0}},{"name": "Campaign05","value": {"method2": 4288.0,"method1": 3308.0}}]},{"name": ["tag01","Group2","Action03"],"children": [{"name": "SearchCamp29","value": {"method2": 967.0,"method1": 269.0}},{"name": "SearchCamp16","value": {"method2": 1980.0,"method1": 1254.0}},{"name": "SearchCamp10","value": {"method2": 507.0,"method1": 612.0}},{"name": "SearchCamp24","value": {"method2": 1100.0,"method1": 634.0}},{"name": "SearchCamp18","value": {"method2": 601.0,"method1": 1303.0}},{"name": "SearchCamp14","value": {"method2": 1048.0,"method1": 371.0}},{"name": "SearchCamp25","value": {"method2": 888.0,"method1": 1445.0}},{"name": "SearchCamp19","value": {"method2": 1411.0,"method1": 1595.0}},{"name": "SearchCamp11","value": {"method2": 0,"method1": 18.0}},{"name": "SearchCamp45","value": {"method2": 1131.0,"method1": 694.0}},{"name": "SearchCamp28","value": {"method2": 1119.0,"method1": 1440.0}},{"name": "SearchCamp49","value": {"method2": 834.0,"method1": 579.0}},{"name": "SearchCamp7","value": {"method2": 1083.0,"method1": 1075.0}},{"name": "SearchCamp41","value": {"method2": 123.0,"method1": 1497.0}},{"name": "SearchCamp31","value": {"method2": 367.0,"method1": 441.0}},{"name": "SearchCamp20","value": {"method2": 289.0,"method1": 1036.0}},{"name": "SearchCamp9","value": {"method2": 721.0,"method1": 795.0}},{"name": "SearchCamp32","value": {"method2": 1527.0,"method1": 856.0}},{"name": "SearchCamp8","value": {"method2": 1369.0,"method1": 1408.0}},{"name": "SearchCamp1","value": {"method2": 707.0,"method1": 970.0}},{"name": "SearchCamp48","value": {"method2": 0,"method1": 832.0}},{"name": "SearchCamp12","value": {"method2": 1612.0,"method1": 675.0}},{"name": "SearchCamp52","value": {"method2": 1088.0,"method1": 752.0}},{"name": "SearchCamp33","value": {"method2": 615.0,"method1": 1171.0}},{"name": "SearchCamp40","value": {"method2": 349.0,"method1": 592.0}},{"name": "SearchCamp36","value": {"method2": 308.0,"method1": 1273.0}},{"name": "SearchCamp26","value": {"method2": 959.0,"method1": 671.0}},{"name": "SearchCamp22","value": {"method2": 3086.0,"method1": 2005.0}},{"name": "SearchCamp42","value": {"method2": 786.0,"method1": 748.0}},{"name": "SearchCamp23","value": {"method2": 916.0,"method1": 191.0}},{"name": "SearchCamp3","value": {"method2": 951.0,"method1": 1785.0}},{"name": "SearchCamp30","value": {"method2": 1221.0,"method1": 1450.0}},{"name": "SearchCamp34","value": {"method2": 672.0,"method1": 1073.0}},{"name": "SearchCamp38","value": {"method2": 1212.0,"method1": 460.0}},{"name": "SearchCamp15","value": {"method2": 974.0,"method1": 1155.0}},{"name": "SearchCamp35","value": {"method2": 2768.0,"method1": 855.0}},{"name": "SearchCamp46","value": {"method2": 1735.0,"method1": 1019.0}},{"name": "SearchCamp43","value": {"method2": 1783.0,"method1": 2726.0}},{"name": "SearchCamp2","value": {"method2": 770.0,"method1": 1606.0}},{"name": "SearchCamp17","value": {"method2": 1488.0,"method1": 1081.0}},{"name": "SearchCamp51","value": {"method2": 1026.0,"method1": 1181.0}},{"name": "SearchCamp6","value": {"method2": 215.0,"method1": 939.0}},{"name": "SearchCamp27","value": {"method2": 1314.0,"method1": 917.0}},{"name": "SearchCamp37","value": {"method2": 958.0,"method1": 417.0}},{"name": "SearchCamp21","value": {"method2": 1699.0,"method1": 1281.0}},{"name": "SearchCamp39","value": {"method2": 487.0,"method1": 468.0}},{"name": "SearchCamp44","value": {"method2": 456.0,"method1": 896.0}},{"name": "SearchCamp50","value": {"method2": 104.0,"method1": 895.0}},{"name": "SearchCamp47","value": {"method2": 521.0,"method1": 1359.0}},{"name": "SearchCamp4","value": {"method2": 1285.0,"method1": 1388.0}},{"name": "SearchCamp13","value": {"method2": 801.0,"method1": 1390.0}},{"name": "SearchCamp5","value": {"method2": 1320.0,"method1": 856.0}}]},{"name": ["tag02","Group2","Action01"],"children": [{"name": "Campaign02","value": {"method2": 987.0,"method1": 75.0}},{"name": "Campaign01","value": {"method2": 0,"method1": 184.0}},{"name": "Campaign13","value": {"method2": 4116.0,"method1": 3665.0}},{"name": "Campaign04","value": {"method2": 689.0,"method1": 1408.0}},{"name": "Campaign14","value": {"method2": 5410.0,"method1": 4405.0}},{"name": "Campaign16","value": {"method2": 1988.0,"method1": 2743.0}},{"name": "Campaign18","value": {"method2": 5672.0,"method1": 7434.0}},{"name": "Campaign06","value": {"method2": 2084.0,"method1": 1656.0}},{"name": "Campaign15","value": {"method2": 3465.0,"method1": 4408.0}},{"name": "Campaign20","value": {"method2": 236.0,"method1": 870.0}},{"name": "Campaign08","value": {"method2": 5419.0,"method1": 6692.0}},{"name": "Campaign11","value": {"method2": 238.0,"method1": 866.0}},{"name": "Campaign05","value": {"method2": 309.0,"method1": 190.0}}]},{"name": ["tag02","Group2","Action02"],"children": [{"name": "Campaign05","value": {"method2": 4231.0,"method1": 2460.0}},{"name": "Campaign09","value": {"method2": 0,"method1": 970.0}},{"name": "Campaign04","value": {"method2": 3793.0,"method1": 1512.0}},{"name": "Campaign14","value": {"method2": 5388.0,"method1": 4998.0}},{"name": "Campaign16","value": {"method2": 1083.0,"method1": 1789.0}},{"name": "Campaign18","value": {"method2": 6440.0,"method1": 6472.0}},{"name": "Campaign06","value": {"method2": 2774.0,"method1": 4309.0}},{"name": "Campaign15","value": {"method2": 2455.0,"method1": 2990.0}},{"name": "Campaign20","value": {"method2": 3623.0,"method1": 3457.0}},{"name": "Campaign08","value": {"method2": 7245.0,"method1": 6650.0}},{"name": "Campaign07","value": {"method2": 0,"method1": 197.0}},{"name": "Campaign11","value": {"method2": 826.0,"method1": 410.0}},{"name": "Campaign13","value": {"method2": 2612.0,"method1": 4385.0}}]},{"name": ["tag02","Group2","Action03"],"children": [{"name": "SearchCamp22","value": {"method2": 1960.0,"method1": 1436.0}},{"name": "SearchCamp16","value": {"method2": 1909.0,"method1": 2206.0}},{"name": "SearchCamp42","value": {"method2": 435.0,"method1": 541.0}},{"name": "SearchCamp24","value": {"method2": 591.0,"method1": 355.0}},{"name": "SearchCamp18","value": {"method2": 1633.0,"method1": 1517.0}},{"name": "SearchCamp23","value": {"method2": 102.0,"method1": 1333.0}},{"name": "SearchCamp25","value": {"method2": 927.0,"method1": 1651.0}},{"name": "SearchCamp19","value": {"method2": 1841.0,"method1": 1309.0}},{"name": "SearchCamp30","value": {"method2": 1004.0,"method1": 1729.0}},{"name": "SearchCamp51","value": {"method2": 0,"method1": 394.0}},{"name": "SearchCamp34","value": {"method2": 1116.0,"method1": 1599.0}},{"name": "SearchCamp45","value": {"method2": 453.0,"method1": 1055.0}},{"name": "SearchCamp28","value": {"method2": 434.0,"method1": 912.0}},{"name": "SearchCamp8","value": {"method2": 687.0,"method1": 299.0}},{"name": "SearchCamp15","value": {"method2": 1.0,"method1": 876.0}},{"name": "SearchCamp35","value": {"method2": 2481.0,"method1": 2093.0}},{"name": "SearchCamp46","value": {"method2": 490.0,"method1": 1042.0}},{"name": "SearchCamp43","value": {"method2": 2451.0,"method1": 3395.0}},{"name": "SearchCamp20","value": {"method2": 227.0,"method1": 394.0}},{"name": "SearchCamp2","value": {"method2": 0,"method1": 321.0}},{"name": "SearchCamp9","value": {"method2": 581.0,"method1": 1291.0}},{"name": "SearchCamp7","value": {"method2": 1170.0,"method1": 1347.0}},{"name": "SearchCamp4","value": {"method2": 1081.0,"method1": 942.0}},{"name": "SearchCamp6","value": {"method2": 1011.0,"method1": 1189.0}},{"name": "SearchCamp27","value": {"method2": 698.0,"method1": 1004.0}},{"name": "SearchCamp37","value": {"method2": 973.0,"method1": 1370.0}},{"name": "SearchCamp21","value": {"method2": 163.0,"method1": 881.0}},{"name": "SearchCamp39","value": {"method2": 1358.0,"method1": 1054.0}},{"name": "SearchCamp44","value": {"method2": 1131.0,"method1": 413.0}},{"name": "SearchCamp50","value": {"method2": 346.0,"method1": 855.0}},{"name": "SearchCamp31","value": {"method2": 575.0,"method1": 46.0}},{"name": "SearchCamp40","value": {"method2": 1020.0,"method1": 1093.0}},{"name": "SearchCamp3","value": {"method2": 502.0,"method1": 349.0}},{"name": "SearchCamp12","value": {"method2": 1505.0,"method1": 900.0}},{"name": "SearchCamp5","value": {"method2": 511.0,"method1": 527.0}},{"name": "SearchCamp52","value": {"method2": 424.0,"method1": 270.0}},{"name": "SearchCamp47","value": {"method2": 550.0,"method1": 98.0}},{"name": "SearchCamp36","value": {"method2": 704.0,"method1": 776.0}},{"name": "SearchCamp13","value": {"method2": 951.0,"method1": 1167.0}},{"name": "SearchCamp11","value": {"method2": 0,"method1": 361.0}},{"name": "SearchCamp26","value": {"method2": 698.0,"method1": 800.0}}]},{"name": ["tag03","Group2","Action01"],"children": [{"name": "Campaign18","value": {"method2": 5419.0,"method1": 5533.0}},{"name": "Campaign06","value": {"method2": 557.0,"method1": 1184.0}},{"name": "Campaign04","value": {"method2": 589.0,"method1": 767.0}},{"name": "Campaign15","value": {"method2": 759.0,"method1": 1185.0}},{"name": "Campaign05","value": {"method2": 0,"method1": 729.0}},{"name": "Campaign08","value": {"method2": 2892.0,"method1": 3877.0}},{"name": "Campaign16","value": {"method2": 2540.0,"method1": 2732.0}},{"name": "Campaign01","value": {"method2": 0,"method1": 92.0}},{"name": "Campaign11","value": {"method2": 974.0,"method1": 698.0}},{"name": "Campaign14","value": {"method2": 4032.0,"method1": 4198.0}},{"name": "Campaign13","value": {"method2": 3048.0,"method1": 3070.0}}]},{"name": ["tag03","Group2","Action02"],"children": [{"name": "Campaign18","value": {"method2": 4881.0,"method1": 3323.0}},{"name": "Campaign06","value": {"method2": 2391.0,"method1": 2529.0}},{"name": "Campaign15","value": {"method2": 4170.0,"method1": 2886.0}},{"name": "Campaign05","value": {"method2": 1405.0,"method1": 3430.0}},{"name": "Campaign08","value": {"method2": 5246.0,"method1": 7326.0}},{"name": "Campaign20","value": {"method2": 1397.0,"method1": 1359.0}},{"name": "Campaign16","value": {"method2": 2039.0,"method1": 1657.0}},{"name": "Campaign04","value": {"method2": 1052.0,"method1": 1062.0}},{"name": "Campaign11","value": {"method2": 1447.0,"method1": 963.0}},{"name": "Campaign14","value": {"method2": 6727.0,"method1": 5797.0}},{"name": "Campaign13","value": {"method2": 3142.0,"method1": 5099.0}}]},{"name": ["tag03","Group2","Action03"],"children": [{"name": "SearchCamp22","value": {"method2": 574.0,"method1": 1146.0}},{"name": "SearchCamp16","value": {"method2": 1224.0,"method1": 1405.0}},{"name": "SearchCamp42","value": {"method2": 936.0,"method1": 828.0}},{"name": "SearchCamp24","value": {"method2": 1643.0,"method1": 1142.0}},{"name": "SearchCamp18","value": {"method2": 877.0,"method1": 1712.0}},{"name": "SearchCamp23","value": {"method2": 135.0,"method1": 673.0}},{"name": "SearchCamp25","value": {"method2": 1668.0,"method1": 220.0}},{"name": "SearchCamp19","value": {"method2": 269.0,"method1": 1413.0}},{"name": "SearchCamp30","value": {"method2": 993.0,"method1": 1750.0}},{"name": "SearchCamp34","value": {"method2": 659.0,"method1": 1901.0}},{"name": "SearchCamp51","value": {"method2": 0,"method1": 533.0}},{"name": "SearchCamp28","value": {"method2": 815.0,"method1": 909.0}},{"name": "SearchCamp38","value": {"method2": 180.0,"method1": 327.0}},{"name": "SearchCamp15","value": {"method2": 618.0,"method1": 965.0}},{"name": "SearchCamp35","value": {"method2": 1745.0,"method1": 2018.0}},{"name": "SearchCamp7","value": {"method2": 629.0,"method1": 1124.0}},{"name": "SearchCamp43","value": {"method2": 3488.0,"method1": 3236.0}},{"name": "SearchCamp20","value": {"method2": 841.0,"method1": 150.0}},{"name": "SearchCamp40","value": {"method2": 1348.0,"method1": 1221.0}},{"name": "SearchCamp6","value": {"method2": 910.0,"method1": 624.0}},{"name": "SearchCamp27","value": {"method2": 226.0,"method1": 1921.0}},{"name": "SearchCamp37","value": {"method2": 1273.0,"method1": 1840.0}},{"name": "SearchCamp44","value": {"method2": 1018.0,"method1": 1486.0}},{"name": "SearchCamp50","value": {"method2": 488.0,"method1": 5.0}},{"name": "SearchCamp3","value": {"method2": 0,"method1": 552.0}},{"name": "SearchCamp12","value": {"method2": 1439.0,"method1": 591.0}},{"name": "SearchCamp5","value": {"method2": 751.0,"method1": 335.0}},{"name": "SearchCamp52","value": {"method2": 235.0,"method1": 813.0}},{"name": "SearchCamp47","value": {"method2": 0,"method1": 993.0}},{"name": "SearchCamp4","value": {"method2": 1285.0,"method1": 1232.0}},{"name": "SearchCamp13","value": {"method2": 539.0,"method1": 954.0}},{"name": "SearchCamp36","value": {"method2": 93.0,"method1": 718.0}},{"name": "SearchCamp26","value": {"method2": 1512.0,"method1": 1870.0}}]},{"name": ["tag04","Group2","Action02"],"children": [{"name": "Campaign15","value": {"method2": 0,"method1": 453.0}},{"name": "Campaign13","value": {"method2": 0,"method1": 175.0}},{"name": "Campaign20","value": {"method2": 0,"method1": 883.0}}]},{"name": ["tag04","Group2","Action03"],"children": [{"name": "SearchCamp21","value": {"method2": 865.0,"method1": 82.0}},{"name": "SearchCamp42","value": {"method2": 398.0,"method1": 771.0}},{"name": "SearchCamp24","value": {"method2": 181.0,"method1": 679.0}},{"name": "SearchCamp37","value": {"method2": 469.0,"method1": 22.0}}]},{"name": ["tag01","Group3","Action01"],"children": [{"name": "Brand","value": {"method2": 15596.0,"method1": 16776.0}},{"name": "UNKNOWN","value": {"method2": 9361.0,"method1": 7464.0}},{"name": "Retail","value": {"method2": 31239.0,"method1": 32148.0}}]},{"name": ["tag01","Group3","Action02"],"children": [{"name": "Brand","value": {"method2": 14215.0,"method1": 16136.0}},{"name": "UNKNOWN","value": {"method2": 9213.0,"method1": 10607.0}},{"name": "Retail","value": {"method2": 25725.0,"method1": 29640.0}}]},{"name": ["tag01","Group3","Action03"],"children": [{"name": "SearchCat03","value": {"method2": 2977.0,"method1": 4005.0}},{"name": "UNKNOWN","value": {"method2": 104.0,"method1": 895.0}},{"name": "SearchCat04","value": {"method2": 20485.0,"method1": 18906.0}},{"name": "SearchCat02","value": {"method2": 14352.0,"method1": 13011.0}},{"name": "SearchCat01","value": {"method2": 3760.0,"method1": 5729.0}},{"name": "SearchCat05","value": {"method2": 9265.0,"method1": 8580.0}},{"name": "SearchCat06","value": {"method2": 308.0,"method1": 1273.0}}]},{"name": ["tag02","Group3","Action01"],"children": [{"name": "Brand","value": {"method2": 12078.0,"method1": 14201.0}},{"name": "UNKNOWN","value": {"method2": 236.0,"method1": 870.0}},{"name": "Retail","value": {"method2": 18299.0,"method1": 19525.0}}]},{"name": ["tag02","Group3","Action02"],"children": [{"name": "Brand","value": {"method2": 14169.0,"method1": 14500.0}},{"name": "UNKNOWN","value": {"method2": 3623.0,"method1": 3457.0}},{"name": "Retail","value": {"method2": 22678.0,"method1": 22642.0}}]},{"name": ["tag02","Group3","Action03"],"children": [{"name": "SearchCat03","value": {"method2": 1621.0,"method1": 2431.0}},{"name": "UNKNOWN","value": {"method2": 346.0,"method1": 855.0}},{"name": "SearchCat04","value": {"method2": 5440.0,"method1": 6700.0}},{"name": "SearchCat02","value": {"method2": 14608.0,"method1": 16321.0}},{"name": "SearchCat01","value": {"method2": 4109.0,"method1": 5240.0}},{"name": "SearchCat05","value": {"method2": 7866.0,"method1": 8867.0}},{"name": "SearchCat06","value": {"method2": 704.0,"method1": 776.0}}]},{"name": ["tag03","Group3","Action01"],"children": [{"name": "Brand","value": {"method2": 8311.0,"method1": 9410.0}},{"name": "Retail","value": {"method2": 12499.0,"method1": 14655.0}}]},{"name": ["tag03","Group3","Action02"],"children": [{"name": "Brand","value": {"method2": 10127.0,"method1": 11093.0}},{"name": "UNKNOWN","value": {"method2": 1397.0,"method1": 1359.0}},{"name": "Retail","value": {"method2": 22373.0,"method1": 22979.0}}]},{"name": ["tag03","Group3","Action03"],"children": [{"name": "SearchCat03","value": {"method2": 0,"method1": 993.0}},{"name": "UNKNOWN","value": {"method2": 488.0,"method1": 5.0}},{"name": "SearchCat04","value": {"method2": 2599.0,"method1": 4109.0}},{"name": "SearchCat02","value": {"method2": 12428.0,"method1": 17369.0}},{"name": "SearchCat01","value": {"method2": 4418.0,"method1": 4228.0}},{"name": "SearchCat05","value": {"method2": 8385.0,"method1": 9185.0}},{"name": "SearchCat06","value": {"method2": 93.0,"method1": 718.0}}]},{"name": ["tag04","Group3","Action02"],"children": [{"name": "UNKNOWN","value": {"method2": 0,"method1": 883.0}},{"name": "Retail","value": {"method2": 0,"method1": 628.0}}]},{"name": ["tag04","Group3","Action03"],"children": [{"name": "SearchCat01","value": {"method2": 865.0,"method1": 82.0}},{"name": "SearchCat05","value": {"method2": 181.0,"method1": 679.0}},{"name": "SearchCat02","value": {"method2": 867.0,"method1": 793.0}}]},{"name": ["tag01","Group1","Action01"],"children": [{"name": "Site19","value": {"method2": 638.0,"method1": 45.0}},{"name": "Site29","value": {"method2": 928.0,"method1": 754.0}},{"name": "Site2","value": {"method2": 1133.0,"method1": 732.0}},{"name": "Site35","value": {"method2": 1344.0,"method1": 1441.0}},{"name": "Site11","value": {"method2": 2660.0,"method1": 2306.0}},{"name": "Site3","value": {"method2": 1067.0,"method1": 1019.0}},{"name": "Site23","value": {"method2": 1738.0,"method1": 593.0}},{"name": "Site10","value": {"method2": 2626.0,"method1": 2619.0}},{"name": "Site1","value": {"method2": 204.0,"method1": 450.0}},{"name": "Site33","value": {"method2": 3570.0,"method1": 2758.0}},{"name": "Site14","value": {"method2": 596.0,"method1": 973.0}},{"name": "Site48","value": {"method2": 2903.0,"method1": 3634.0}},{"name": "Site36","value": {"method2": 919.0,"method1": 209.0}},{"name": "Site32","value": {"method2": 308.0,"method1": 551.0}},{"name": "Site38","value": {"method2": 692.0,"method1": 1623.0}},{"name": "Site40","value": {"method2": 163.0,"method1": 303.0}},{"name": "Site46","value": {"method2": 399.0,"method1": 906.0}},{"name": "Site8","value": {"method2": 544.0,"method1": 615.0}},{"name": "Site42","value": {"method2": 517.0,"method1": 770.0}},{"name": "Site25","value": {"method2": 1369.0,"method1": 662.0}},{"name": "Site24","value": {"method2": 783.0,"method1": 479.0}},{"name": "Site22","value": {"method2": 2193.0,"method1": 1337.0}},{"name": "Site44","value": {"method2": 0,"method1": 896.0}},{"name": "Site4","value": {"method2": 270.0,"method1": 254.0}},{"name": "Site41","value": {"method2": 764.0,"method1": 1402.0}},{"name": "Site21","value": {"method2": 424.0,"method1": 1210.0}},{"name": "Site30","value": {"method2": 1237.0,"method1": 164.0}},{"name": "Site27","value": {"method2": 5236.0,"method1": 5916.0}},{"name": "Site12","value": {"method2": 907.0,"method1": 853.0}},{"name": "Site43","value": {"method2": 1303.0,"method1": 759.0}},{"name": "Site31","value": {"method2": 5055.0,"method1": 3833.0}},{"name": "Site34","value": {"method2": 0,"method1": 401.0}},{"name": "Site47","value": {"method2": 981.0,"method1": 809.0}},{"name": "Site49","value": {"method2": 749.0,"method1": 364.0}},{"name": "Site5","value": {"method2": 1071.0,"method1": 849.0}},{"name": "Site39","value": {"method2": 799.0,"method1": 982.0}},{"name": "Site7","value": {"method2": 776.0,"method1": 2589.0}},{"name": "Site13","value": {"method2": 2473.0,"method1": 2637.0}},{"name": "Site18","value": {"method2": 946.0,"method1": 2058.0}},{"name": "Site26","value": {"method2": 2214.0,"method1": 1825.0}},{"name": "Site45","value": {"method2": 646.0,"method1": 50.0}},{"name": "Site6","value": {"method2": 1813.0,"method1": 3368.0}},{"name": "Site9","value": {"method2": 1238.0,"method1": 390.0}}]},{"name": ["tag01","Group1","Action02"],"children": [{"name": "Site29","value": {"method2": 495.0,"method1": 655.0}},{"name": "Site2","value": {"method2": 1380.0,"method1": 1441.0}},{"name": "Site35","value": {"method2": 700.0,"method1": 595.0}},{"name": "Site11","value": {"method2": 766.0,"method1": 2213.0}},{"name": "Site3","value": {"method2": 849.0,"method1": 1116.0}},{"name": "Site23","value": {"method2": 1268.0,"method1": 1775.0}},{"name": "Site10","value": {"method2": 3984.0,"method1": 2518.0}},{"name": "Site33","value": {"method2": 2945.0,"method1": 3669.0}},{"name": "Site14","value": {"method2": 766.0,"method1": 101.0}},{"name": "Site48","value": {"method2": 3291.0,"method1": 4851.0}},{"name": "Site36","value": {"method2": 919.0,"method1": 883.0}},{"name": "Site32","value": {"method2": 735.0,"method1": 371.0}},{"name": "Site28","value": {"method2": 184.0,"method1": 587.0}},{"name": "Site40","value": {"method2": 1493.0,"method1": 2279.0}},{"name": "Site37","value": {"method2": 742.0,"method1": 335.0}},{"name": "Site8","value": {"method2": 252.0,"method1": 225.0}},{"name": "Site20","value": {"method2": 749.0,"method1": 336.0}},{"name": "Site25","value": {"method2": 1799.0,"method1": 1149.0}},{"name": "Site24","value": {"method2": 622.0,"method1": 80.0}},{"name": "Site17","value": {"method2": 605.0,"method1": 221.0}},{"name": "Site22","value": {"method2": 905.0,"method1": 1105.0}},{"name": "Site46","value": {"method2": 748.0,"method1": 1250.0}},{"name": "Site4","value": {"method2": 788.0,"method1": 601.0}},{"name": "Site41","value": {"method2": 284.0,"method1": 1079.0}},{"name": "Site21","value": {"method2": 341.0,"method1": 238.0}},{"name": "Site30","value": {"method2": 790.0,"method1": 547.0}},{"name": "Site12","value": {"method2": 676.0,"method1": 807.0}},{"name": "Site31","value": {"method2": 4730.0,"method1": 3035.0}},{"name": "Site34","value": {"method2": 357.0,"method1": 705.0}},{"name": "Site47","value": {"method2": 469.0,"method1": 954.0}},{"name": "Site38","value": {"method2": 1142.0,"method1": 510.0}},{"name": "Site49","value": {"method2": 370.0,"method1": 654.0}},{"name": "Site5","value": {"method2": 242.0,"method1": 1098.0}},{"name": "Site43","value": {"method2": 1107.0,"method1": 1525.0}},{"name": "Site7","value": {"method2": 1684.0,"method1": 3362.0}},{"name": "Site13","value": {"method2": 1296.0,"method1": 2449.0}},{"name": "Site18","value": {"method2": 2479.0,"method1": 1941.0}},{"name": "Site26","value": {"method2": 2939.0,"method1": 3520.0}},{"name": "Site45","value": {"method2": 106.0,"method1": 509.0}},{"name": "Site6","value": {"method2": 1276.0,"method1": 3612.0}},{"name": "Site9","value": {"method2": 1659.0,"method1": 1466.0}},{"name": "Site42","value": {"method2": 221.0,"method1": 16.0}}]},{"name": ["tag01","Group1","Action03"],"children": [{"name": "Site15 SearchMatch1","value": {"method2": 24557.0,"method1": 24644.0}},{"name": "Site16 UNKNOWN","value": {"method2": 104.0,"method1": 895.0}},{"name": "Site15 SearchMatch3","value": {"method2": 878.0,"method1": 903.0}},{"name": "Site15 SearchMatch2","value": {"method2": 25712.0,"method1": 25957.0}}]},{"name": ["tag02","Group1","Action01"],"children": [{"name": "Site19","value": {"method2": 559.0,"method1": 888.0}},{"name": "Site29","value": {"method2": 860.0,"method1": 1530.0}},{"name": "Site7","value": {"method2": 924.0,"method1": 788.0}},{"name": "Site11","value": {"method2": 473.0,"method1": 1135.0}},{"name": "Site3","value": {"method2": 795.0,"method1": 269.0}},{"name": "Site23","value": {"method2": 1023.0,"method1": 962.0}},{"name": "Site10","value": {"method2": 1532.0,"method1": 1510.0}},{"name": "Site35","value": {"method2": 1524.0,"method1": 997.0}},{"name": "Site36","value": {"method2": 99.0,"method1": 361.0}},{"name": "Site32","value": {"method2": 296.0,"method1": 340.0}},{"name": "Site40","value": {"method2": 666.0,"method1": 315.0}},{"name": "Site42","value": {"method2": 859.0,"method1": 342.0}},{"name": "Site25","value": {"method2": 309.0,"method1": 422.0}},{"name": "Site13","value": {"method2": 850.0,"method1": 627.0}},{"name": "Site22","value": {"method2": 987.0,"method1": 412.0}},{"name": "Site6","value": {"method2": 1676.0,"method1": 2881.0}},{"name": "Site4","value": {"method2": 641.0,"method1": 784.0}},{"name": "Site41","value": {"method2": 126.0,"method1": 920.0}},{"name": "Site21","value": {"method2": 832.0,"method1": 185.0}},{"name": "Site46","value": {"method2": 521.0,"method1": 872.0}},{"name": "Site27","value": {"method2": 4122.0,"method1": 3640.0}},{"name": "Site48","value": {"method2": 1786.0,"method1": 3109.0}},{"name": "Site43","value": {"method2": 1488.0,"method1": 1883.0}},{"name": "Site31","value": {"method2": 2474.0,"method1": 3765.0}},{"name": "Site8","value": {"method2": 967.0,"method1": 40.0}},{"name": "Site49","value": {"method2": 61.0,"method1": 514.0}},{"name": "Site5","value": {"method2": 353.0,"method1": 365.0}},{"name": "Site39","value": {"method2": 1613.0,"method1": 919.0}},{"name": "Site33","value": {"method2": 1888.0,"method1": 1619.0}},{"name": "Site18","value": {"method2": 0,"method1": 911.0}},{"name": "Site26","value": {"method2": 309.0,"method1": 1182.0}},{"name": "Site9","value": {"method2": 0,"method1": 109.0}}]},{"name": ["tag02","Group1","Action02"],"children": [{"name": "Site29","value": {"method2": 915.0,"method1": 1289.0}},{"name": "Site2","value": {"method2": 1612.0,"method1": 508.0}},{"name": "Site7","value": {"method2": 2691.0,"method1": 1296.0}},{"name": "Site11","value": {"method2": 805.0,"method1": 2094.0}},{"name": "Site3","value": {"method2": 953.0,"method1": 617.0}},{"name": "Site23","value": {"method2": 1170.0,"method1": 1350.0}},{"name": "Site10","value": {"method2": 2017.0,"method1": 2998.0}},{"name": "Site35","value": {"method2": 596.0,"method1": 189.0}},{"name": "Site8","value": {"method2": 11.0,"method1": 602.0}},{"name": "Site36","value": {"method2": 869.0,"method1": 672.0}},{"name": "Site32","value": {"method2": 483.0,"method1": 99.0}},{"name": "Site38","value": {"method2": 1970.0,"method1": 482.0}},{"name": "Site40","value": {"method2": 472.0,"method1": 143.0}},{"name": "Site46","value": {"method2": 0,"method1": 420.0}},{"name": "Site20","value": {"method2": 0,"method1": 197.0}},{"name": "Site25","value": {"method2": 893.0,"method1": 324.0}},{"name": "Site13","value": {"method2": 1237.0,"method1": 1511.0}},{"name": "Site24","value": {"method2": 484.0,"method1": 211.0}},{"name": "Site22","value": {"method2": 600.0,"method1": 558.0}},{"name": "Site48","value": {"method2": 2942.0,"method1": 4693.0}},{"name": "Site4","value": {"method2": 814.0,"method1": 708.0}},{"name": "Site41","value": {"method2": 910.0,"method1": 446.0}},{"name": "Site21","value": {"method2": 634.0,"method1": 911.0}},{"name": "Site30","value": {"method2": 43.0,"method1": 2.0}},{"name": "Site12","value": {"method2": 148.0,"method1": 832.0}},{"name": "Site31","value": {"method2": 5033.0,"method1": 3894.0}},{"name": "Site47","value": {"method2": 819.0,"method1": 519.0}},{"name": "Site49","value": {"method2": 489.0,"method1": 754.0}},{"name": "Site5","value": {"method2": 166.0,"method1": 755.0}},{"name": "Site43","value": {"method2": 1296.0,"method1": 1417.0}},{"name": "Site33","value": {"method2": 2018.0,"method1": 1556.0}},{"name": "Site18","value": {"method2": 830.0,"method1": 349.0}},{"name": "Site26","value": {"method2": 3156.0,"method1": 3762.0}},{"name": "Site45","value": {"method2": 0,"method1": 751.0}},{"name": "Site6","value": {"method2": 3216.0,"method1": 2565.0}},{"name": "Site9","value": {"method2": 69.0,"method1": 149.0}},{"name": "Site42","value": {"method2": 109.0,"method1": 976.0}}]},{"name": ["tag02","Group1","Action03"],"children": [{"name": "Site15 SearchMatch1","value": {"method2": 14839.0,"method1": 18384.0}},{"name": "Site16 UNKNOWN","value": {"method2": 346.0,"method1": 855.0}},{"name": "Site15 SearchMatch3","value": {"method2": 1177.0,"method1": 1751.0}},{"name": "Site15 SearchMatch2","value": {"method2": 18332.0,"method1": 20200.0}}]},{"name": ["tag03","Group1","Action01"],"children": [{"name": "Site19","value": {"method2": 206.0,"method1": 853.0}},{"name": "Site29","value": {"method2": 137.0,"method1": 107.0}},{"name": "Site7","value": {"method2": 986.0,"method1": 17.0}},{"name": "Site11","value": {"method2": 0,"method1": 942.0}},{"name": "Site3","value": {"method2": 473.0,"method1": 294.0}},{"name": "Site23","value": {"method2": 578.0,"method1": 1183.0}},{"name": "Site10","value": {"method2": 1239.0,"method1": 1320.0}},{"name": "Site35","value": {"method2": 1036.0,"method1": 423.0}},{"name": "Site36","value": {"method2": 805.0,"method1": 533.0}},{"name": "Site40","value": {"method2": 384.0,"method1": 299.0}},{"name": "Site42","value": {"method2": 871.0,"method1": 982.0}},{"name": "Site49","value": {"method2": 0,"method1": 830.0}},{"name": "Site6","value": {"method2": 786.0,"method1": 672.0}},{"name": "Site41","value": {"method2": 152.0,"method1": 809.0}},{"name": "Site27","value": {"method2": 3621.0,"method1": 2765.0}},{"name": "Site48","value": {"method2": 2375.0,"method1": 2417.0}},{"name": "Site43","value": {"method2": 1233.0,"method1": 839.0}},{"name": "Site31","value": {"method2": 2672.0,"method1": 2574.0}},{"name": "Site8","value": {"method2": 426.0,"method1": 960.0}},{"name": "Site5","value": {"method2": 120.0,"method1": 202.0}},{"name": "Site39","value": {"method2": 98.0,"method1": 633.0}},{"name": "Site33","value": {"method2": 222.0,"method1": 837.0}},{"name": "Site38","value": {"method2": 0,"method1": 368.0}},{"name": "Site26","value": {"method2": 1589.0,"method1": 2684.0}},{"name": "Site9","value": {"method2": 801.0,"method1": 522.0}}]},{"name": ["tag03","Group1","Action02"],"children": [{"name": "Site29","value": {"method2": 318.0,"method1": 664.0}},{"name": "Site2","value": {"method2": 961.0,"method1": 1322.0}},{"name": "Site7","value": {"method2": 2369.0,"method1": 1629.0}},{"name": "Site11","value": {"method2": 2338.0,"method1": 1599.0}},{"name": "Site3","value": {"method2": 1444.0,"method1": 525.0}},{"name": "Site23","value": {"method2": 421.0,"method1": 1025.0}},{"name": "Site10","value": {"method2": 3373.0,"method1": 2688.0}},{"name": "Site35","value": {"method2": 670.0,"method1": 331.0}},{"name": "Site36","value": {"method2": 0,"method1": 612.0}},{"name": "Site32","value": {"method2": 756.0,"method1": 559.0}},{"name": "Site18","value": {"method2": 0,"method1": 224.0}},{"name": "Site40","value": {"method2": 154.0,"method1": 532.0}},{"name": "Site42","value": {"method2": 559.0,"method1": 34.0}},{"name": "Site25","value": {"method2": 947.0,"method1": 756.0}},{"name": "Site13","value": {"method2": 265.0,"method1": 292.0}},{"name": "Site24","value": {"method2": 0,"method1": 444.0}},{"name": "Site22","value": {"method2": 869.0,"method1": 1349.0}},{"name": "Site6","value": {"method2": 2750.0,"method1": 1823.0}},{"name": "Site4","value": {"method2": 480.0,"method1": 694.0}},{"name": "Site41","value": {"method2": 1549.0,"method1": 944.0}},{"name": "Site21","value": {"method2": 936.0,"method1": 767.0}},{"name": "Site30","value": {"method2": 116.0,"method1": 437.0}},{"name": "Site48","value": {"method2": 2498.0,"method1": 1882.0}},{"name": "Site31","value": {"method2": 4811.0,"method1": 5087.0}},{"name": "Site8","value": {"method2": 925.0,"method1": 940.0}},{"name": "Site49","value": {"method2": 852.0,"method1": 781.0}},{"name": "Site5","value": {"method2": 485.0,"method1": 609.0}},{"name": "Site43","value": {"method2": 577.0,"method1": 1278.0}},{"name": "Site33","value": {"method2": 1113.0,"method1": 2437.0}},{"name": "Site38","value": {"method2": 124.0,"method1": 1061.0}},{"name": "Site26","value": {"method2": 317.0,"method1": 1476.0}},{"name": "Site9","value": {"method2": 920.0,"method1": 630.0}}]},{"name": ["tag03","Group1","Action03"],"children": [{"name": "Site15 SearchMatch1","value": {"method2": 12160.0,"method1": 17178.0}},{"name": "Site16 UNKNOWN","value": {"method2": 488.0,"method1": 5.0}},{"name": "Site15 SearchMatch3","value": {"method2": 1213.0,"method1": 1469.0}},{"name": "Site15 SearchMatch2","value": {"method2": 14550.0,"method1": 17955.0}}]},{"name": ["tag04","Group1","Action02"],"children": [{"name": "Site31","value": {"method2": 0,"method1": 1336.0}},{"name": "Site40","value": {"method2": 0,"method1": 175.0}}]},{"name": ["tag04","Group1","Action03"],"children": [{"name": "Site15 SearchMatch1","value": {"method2": 1263.0,"method1": 853.0}},{"name": "Site15 SearchMatch2","value": {"method2": 650.0,"method1": 701.0}}]}]}';
var jsonin = JSON.parse(rawdata);
/// ======================
/// all relevant functions
/// ======================
var setswitch = function(method){
//=========================================
//== purpose: get form input to filter data
//== input: form inputs
//== output: data
// NEED TO UPDATE WITH DATA VALUES
//=========================================
if (method == "method1"){
var funcVal = function(d){return d.value.method1;};
}
if (method == "method2"){
var funcVal = function(d){return d.value.method2;};
}
return funcVal;
}
function getdata(recordtype, grouplevel, jsonin) {
//====================================
//== purpose: get relavant data
//== input: 1) form inputs,
//== 2) original json in format
//== processed from python file
//== output: json data for d3 treemap
//== (check it out with JSON.stringify)
//====================================
var filteredData = []
// filter original data
var successfilter = jsonin.children.filter(function (row) {
// filter group type
if(row.name[1] == grouplevel & row.name[0] == recordtype) {
childfilter = []
row.children.map(function (childrow){
childfilter.push({"name": childrow.name, "value": childrow.value})
})
// collect data
filteredData.push({"name": row.name[2], "children": childfilter});
}
});
var outdata = {"name": "inputdata", "children": filteredData};
console.log(JSON.stringify(outdata));
return outdata;
};
function buildGraph(filteredData) {
//====================================
//== purpose: create plots for diagram
//== success type & meta level buttons
//== input: a) requred data
//== output: creates diagrams
//====================================
// start with clean slate
d3.select("body").select("#diagram").remove()
// attrib method default
var attribmethod = $("#attribmethod").val();
// set value default
var setvalue = setswitch(attribmethod);
// tree map object
var treemap = d3.layout.treemap()
.size([width, height])
.sticky(true)
.value(function(d) {
return d.value;
});
// add parent graph svg element
var svg = d3.select("body").append("svg")
.style("position", "relative")
.style("width", (width + margin.left + margin.right) + "px")
.style("height", (height + margin.top + margin.bottom) + "px")
.style("left", margin.left + "px")
.style("top", margin.top + "px")
.attr("id", "diagram");
// call tip method on svg
svg.call(tip)
// append group elements: for rect ?? text as well or text box sufficient?
var gvals = svg.datum(filteredData).selectAll("g")
.data(treemap.value(setvalue).nodes)
.enter()
.append("g")
.attr("class", "node")
.attr("id", setclass)
.attr("transform", translateinit);
// append rectangles
gvals.append("rect")
.call(objectSize)
.on("mouseover", tip.show)
.on("mouseout", tip.hide)
.style("fill", setcolor)
.style("fill-opacity", setfillopacity)
.style("stroke-opacity", "1px")
.style("stroke", setstroke)
.style("stroke-width", setstrokewidth);
};
function smoothTransition(filteredData){
//====================================
//== purpose: create plots for diagram
//== with transitioning/phasing
//== attribution type button
//== input: a) required data
//== output: creates diagrams
//====================================
// attrib method default
var attribmethod = $("#attribmethod").val();
// set value default
var setvalue = setswitch(attribmethod);
// set value default
// __init__ treemap
var treemap = d3.layout.treemap()
.size([width, height])
.sticky(false)
.value(function(d) {
return d.value;
});
// get existing elements
var gvals = d3.select("#diagram").datum(filteredData).selectAll("#node")
.data(treemap.value(setvalue).nodes)
.enter()
.center(0, 0)
.translate()
var gvals = d3.select("#diagram").datum(filteredData).selectAll("rect");
/*
gvals
.data(treemap.value(setvalue).nodes);
.call(objectSize);
// update existing
selectgs
.style("background", setcolor)
.on("mouseover", tip.show)
.on("mouseout", tip.hide)
.attr("class", "node")
.attr("id", setclass)
.attr("transform", translateval);
*/
};
///////////////////////
// css return functions
///////////////////////
var channelFlag = function (d){
//==========================================
//== purpose: return flag for dimension type
//== input: dimension variable
//== output: 1 or 0
//== THIS FUNCTION NEEDS TO BE UPDATED
//== ACCORDING TO YOUR INPUTS
//====================================
if (d.name == "Action01"){
return 1;
}
else if (d.name == "Action02"){
return 2;
}
else if (d.name == "Action03"){
return 3;
}
else if (d.name == "Action04"){
return 4;
}
else if (d.name == "Action05"){
return 5;
}
else{
return 0;
}
}
var setstroke = function(d){
// set rectangle properties
var channelflag = channelFlag(d);
if (channelflag == 0){
return "white";
}
}
var setstrokewidth = function(d){
// set rectangle properties
var channelflag = channelFlag(d);
if (channelflag == 0){
return "1.2px";
} else {
return "0px";
}
}
var setfillopacity = function(d){
// set opacity
var channelflag = channelFlag(d);
if (channelflag > 0 && channelflag < 5){
return 1;
} else {
return 0;
}
};
var setcolor = function(d){
// set color
var channelflag = channelFlag(d);
if (channelflag == 1){
return "#d62728";
}
else if (channelflag == 2){
return "#ff7f0e";
}
else if (channelflag == 3){
return "#9467bd";
}
else if (channelflag == 4){
return "#8c564b";
}
else{
return null;
}
};
var setnames = function(d){
// set name
var channelflag = channelFlag(d);
if (channelflag == 0){
return d;
}
else {
return "";
}
};
var setclass = function(d){
// set class
var channelflag = channelFlag(d);
if (channelflag == 0){
return "node";
}
else {
return "parentnode";
}
};
var translateinit = function(d){
// translate position
return "translate(" + d.x + "," + d.y +")";
};
var translatemove = function(d){
// translate position
return "translate(" + d.x + "," + d.y +")";
};
function objectSize() {
//==============================
//== purpose: update size values
//== output: size attributes
//==============================
this
.style("width", function(d) { return Math.max(0, d.dx - 1) + "px"; })
.style("height", function(d) { return Math.max(0, d.dy - 1) + "px"; })
}
//===============
//== other stuff
//===============
// append text
/*
gvals.append("text")
.call(objectSize)
.on("mouseover", tip.show)
.on("mouseout", tip.hide)
.text(setnames);
var node = svg.datum(filteredData).selectAll(".node")
.append("g")
.append("rect")
svg.datum(filteredData).selectAll("g")
.data(treemap.value(setvalue).nodes)
.enter()
.append("text").text(setnames)
.call(position);
*/
//d3.selectAll("g")
//.style("opacity", 0);
//.text(setnames)
//.style("color", "white");
/// ============
/// create graph
/// ============
// populate graph with default values
var filteredData = getdata(recordtype, grouplevel, jsonin);
// append node elements to graph
buildGraph(filteredData);
/// ============
/// update graph
/// ============
// record type update
d3.selectAll("#RecordType").on("change", function change() {
// get record level
recordtype = this.value;
// get new data
var filteredData = getdata(recordtype, grouplevel, jsonin);
// create new diagram
buildGraph(filteredData);
});
// group level update
d3.selectAll("#grouplevel").on("change", function change() {
// get group level
grouplevel = this.value;
// get new data
filteredData = getdata(recordtype, grouplevel, jsonin);
// update diagram
buildGraph(filteredData);
});
d3.selectAll("#attribmethod").on("change", function change() {
// get attribute type
attribmethod = this.value;
// get new data
filteredData = getdata(recordtype, grouplevel, jsonin);
// update diagram
//smoothTransition(filteredData);
buildGraph(filteredData);
});
</script>
</div>
</body>
</html>
@DouglasFletcher
Copy link
Author

add additional functionality to existing treegraph (https://bl.ocks.org/mbostock/4063582) more process here : https://github.com/DouglasFletcher/treemap_extensions

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment