| <!DOCTYPE html> |
| <!-- |
| Licensed to the Apache Software Foundation (ASF) under one |
| or more contributor license agreements. See the NOTICE file |
| distributed with this work for additional information |
| regarding copyright ownership. The ASF licenses this file |
| to you under the Apache License, Version 2.0 (the |
| "License"); you may not use this file except in compliance |
| with the License. You may obtain a copy of the License at |
| |
| http://www.apache.org/licenses/LICENSE-2.0 |
| |
| Unless required by applicable law or agreed to in writing, |
| software distributed under the License is distributed on an |
| "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY |
| KIND, either express or implied. See the License for the |
| specific language governing permissions and limitations |
| under the License. |
| --> |
| |
| |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <script src="lib/esl.js"></script> |
| <script src="lib/config.js"></script> |
| <script src="lib/jquery.min.js"></script> |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| <link rel="stylesheet" href="lib/reset.css"> |
| </head> |
| <body> |
| <style> |
| #main, #main2 { |
| width: auto; |
| margin: 100px; |
| height: 550px; |
| } |
| </style> |
| <div id="main"></div> |
| <div id="main2"></div> |
| |
| <script src="data/obama_budget_proposal_2012.tree.js"></script> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <script> |
| |
| require([ |
| 'echarts' |
| // 'echarts/chart/treemap', |
| // 'echarts/component/title', |
| // 'echarts/component/legend', |
| // 'echarts/component/tooltip', |
| // 'echarts/component/toolbox' |
| ], function (echarts) { |
| |
| var myChart = echarts.init(document.getElementById('main')); |
| |
| convertData(window.obama_budget_2012); |
| |
| function convertData(originList) { |
| for (var i = 0; i < originList.length; i++) { |
| var node = originList[i]; |
| if (node) { |
| var value = node.value; |
| value[3] = value[2] > 0 |
| ? 100 |
| : value[2] < 0 |
| ? -100 |
| : 0; |
| |
| if (node.children) { |
| convertData(node.children); |
| } |
| } |
| } |
| } |
| |
| |
| function isValidNumber(num) { |
| return num != null && isFinite(num); |
| } |
| |
| myChart.setOption(option = { |
| title: { |
| left: 'center', |
| text: 'Category Mapping', |
| subtext: 'Growth > 0: green; Growth < 0: red; Growth = 0: grey' |
| }, |
| tooltip: { |
| formatter: function (info) { |
| var value = info.value; |
| |
| var amount = value[0]; |
| amount = isValidNumber(amount) |
| ? echarts.format.addCommas(amount * 1000) + '$' |
| : '-'; |
| |
| var amount2011 = value[1]; |
| amount2011 = isValidNumber(amount2011) |
| ? echarts.format.addCommas(amount2011 * 1000) + '$' |
| : '-'; |
| |
| var change = value[2]; |
| change = isValidNumber(change) |
| ? change.toFixed(2) + '%' |
| : '-'; |
| |
| return [ |
| '<div class="tooltip-title">' + echarts.format.encodeHTML(info.name) + '</div>', |
| '2012 Amount: ' + amount + '<br>', |
| '2011 Amount: ' + amount2011 + '<br>', |
| 'Change From 2011: ' + change |
| ].join(''); |
| } |
| }, |
| series: [{ |
| name: 'ALL', |
| top: 80, |
| type: 'treemap', |
| label: { |
| show: true, |
| formatter: "{b}", |
| normal: { |
| textStyle: { |
| ellipsis: true |
| } |
| } |
| }, |
| itemStyle: { |
| normal: { |
| borderColor: 'black' |
| } |
| }, |
| visualMin: -100, |
| visualMax: 100, |
| visualDimension: 3, |
| levels: [ |
| { |
| itemStyle: { |
| normal: { |
| borderWidth: 3, |
| borderColor: '#333', |
| gapWidth: 3 |
| } |
| } |
| }, |
| { |
| color: ['#942e38', '#aaa', '#269f3c'], |
| colorMappingBy: 'value', |
| itemStyle: { |
| normal: { |
| gapWidth: 1 |
| } |
| } |
| } |
| ], |
| data: window.obama_budget_2012 |
| }] |
| }); |
| |
| |
| }); |
| |
| </script> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <script> |
| |
| require([ |
| 'echarts' |
| // 'echarts/chart/treemap', |
| // 'echarts/component/title', |
| // 'echarts/component/legend', |
| // 'echarts/component/tooltip', |
| // 'echarts/component/toolbox' |
| ], function (echarts) { |
| |
| var myChart = echarts.init(document.getElementById('main2')); |
| |
| var visualMin = -100; |
| var visualMax = 100; |
| var visualMinBound = -40; |
| var visualMaxBound = 40; |
| |
| convertData(window.obama_budget_2012); |
| |
| function convertData(originList) { |
| var min = Infinity; |
| var max = -Infinity; |
| |
| for (var i = 0; i < originList.length; i++) { |
| var node = originList[i]; |
| if (node) { |
| var value = node.value; |
| value[2] != null && value[2] < min && (min = value[2]); |
| value[2] != null && value[2] > max && (max = value[2]); |
| } |
| } |
| |
| for (var i = 0; i < originList.length; i++) { |
| var node = originList[i]; |
| if (node) { |
| var value = node.value; |
| |
| // Scale value for visual effect |
| if (value[2] != null && value[2] > 0) { |
| value[3] = echarts.number.linearMap( |
| value[2], [0, max], [visualMaxBound, visualMax], true |
| ); |
| } |
| else if (value[2] != null && value[2] < 0) { |
| value[3] = echarts.number.linearMap( |
| value[2], [min, 0], [visualMin, visualMinBound], true |
| ); |
| } |
| else { |
| value[3] = 0; |
| } |
| |
| if (!isFinite(value[3])) { |
| value[3] = 0; |
| } |
| |
| if (node.children) { |
| convertData(node.children); |
| } |
| } |
| } |
| } |
| |
| |
| function isValidNumber(num) { |
| return num != null && isFinite(num); |
| } |
| |
| myChart.setOption(option = { |
| title: { |
| left: 'center', |
| text: 'Gradient Mapping', |
| subtext: 'Growth > 0: green; Growth < 0: red; Growth = 0: grey' |
| }, |
| tooltip: { |
| formatter: function (info) { |
| var value = info.value; |
| |
| var amount = value[0]; |
| amount = isValidNumber(amount) |
| ? echarts.format.addCommas(amount * 1000) + '$' |
| : '-'; |
| |
| var amount2011 = value[1]; |
| amount2011 = isValidNumber(amount2011) |
| ? echarts.format.addCommas(amount2011 * 1000) + '$' |
| : '-'; |
| |
| var change = value[2]; |
| change = isValidNumber(change) |
| ? change.toFixed(2) + '%' |
| : '-'; |
| |
| return [ |
| '<div class="tooltip-title">' + echarts.format.encodeHTML(info.name) + '</div>', |
| '2012 Amount: ' + amount + '<br>', |
| '2011 Amount: ' + amount2011 + '<br>', |
| 'Change From 2011: ' + change |
| ].join(''); |
| } |
| }, |
| series: [{ |
| name: 'ALL', |
| top: 80, |
| type: 'treemap', |
| label: { |
| show: true, |
| formatter: "{b}", |
| normal: { |
| textStyle: { |
| ellipsis: true |
| } |
| } |
| }, |
| itemStyle: { |
| normal: { |
| borderColor: 'black' |
| } |
| }, |
| visualMin: visualMin, |
| visualMax: visualMax, |
| visualDimension: 3, |
| levels: [ |
| { |
| itemStyle: { |
| normal: { |
| borderWidth: 3, |
| borderColor: '#333', |
| gapWidth: 3 |
| } |
| } |
| }, |
| { |
| color: ['#942e38', '#aaa', '#269f3c'], |
| colorMappingBy: 'value', |
| itemStyle: { |
| normal: { |
| gapWidth: 1 |
| } |
| } |
| } |
| ], |
| data: window.obama_budget_2012 |
| }] |
| }); |
| |
| |
| }); |
| |
| </script> |
| |
| </body> |
| </html> |
