diff --git a/static/code-city.html b/static/code-city.html
new file mode 100644
index 0000000000000000000000000000000000000000..b274aa0f0b418ecf67d9f075a94a26ea9be633eb
--- /dev/null
+++ b/static/code-city.html
@@ -0,0 +1,293 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Coca Code City</title>
+    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
+    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
+    <script src="https://cdn.bootcdn.net/ajax/libs/echarts-gl/1.1.2/echarts-gl.min.js "></script>
+</head>
+<body>
+
+<div id="main" style="width: 1440px;height:768px;"></div>
+<script>
+    var myChart = echarts.init(document.getElementById('main'));
+    myChart.showLoading();
+
+    $.get('visual.json', function (diskData) {
+        myChart.hideLoading();
+
+        var canvas = document.createElement('canvas');
+        canvas.width = canvas.height = 2048;
+        var treemapChart = echarts.init(canvas);
+
+        function hierarchy(data, delimiter = ".") {
+            let root;
+            const map = new Map;
+            data.forEach(function find(data) {
+                const {name} = data;
+                if (map.has(name)) return map.get(name);
+                const i = name.lastIndexOf(delimiter);
+                map.set(name, data);
+                if (i >= 0) {
+                    let found = find({name: name.substring(0, i), children: []});
+                    if (found.children) {
+                        found.children.push(data);
+                    } else {
+                        return data
+                    }
+                    data.name = name.substring(i + 1);
+                } else {
+                    root = data;
+                }
+                return data;
+            });
+
+            return root;
+        }
+
+        var dMap = {}
+
+        for (let node of diskData.nodes) {
+            dMap[node.id] = {
+                name: "root." + node.id,
+                value: 1
+            }
+        }
+
+        for (let link of diskData.links) {
+            if (link.source === link.target) {
+                continue
+            }
+            if (!dMap[link.source]) {
+                dMap[link.source] = {
+                    name: "root." + link.source,
+                    value: 1
+                }
+            } else {
+                dMap[link.source].value++
+            }
+        }
+
+        var jdata = Object.values(dMap)
+        let data = hierarchy(jdata);
+        data.children.forEach(function (item, index, object) {
+            if (item.name === '') {
+                object.splice(index, 1);
+            }
+        });
+
+        var colorPalette = ['#d87c7c', '#919e8b', '#d7ab82', '#6e7074', '#61a0a8', '#efa18d', '#787464', '#cc7e63', '#724e58', '#4b565b'];
+
+        var formatUtil = echarts.format;
+
+        let upperLabel = {
+            color: "#000",
+            show: true,
+            height: 10,
+            fontSize: 8
+        };
+
+        function getLevelOption() {
+            return [
+                {
+                    colorAlpha: [0.5, 1],
+                    itemStyle: {
+                        borderColor: '#555',
+                        borderWidth: 0,
+                        gapWidth: 0
+                    }
+                },
+                {
+                    colorAlpha: [0.5, 1],
+                    itemStyle: {
+                        borderColor: '#555',
+                        borderWidth: 1,
+                        gapWidth: 1
+                    }
+                },
+                {
+                    upperLabel: upperLabel,
+                    colorMappingBy: 'id',
+                    colorSaturation: [0.2, 0.8],
+                    itemStyle: {
+                        borderColorSaturation: 0.7,
+                        gapWidth: 1,
+                        borderWidth: 1
+                    }
+                },
+                {
+                    upperLabel: upperLabel,
+                    colorMappingBy: 'id',
+                    itemStyle: {
+                        borderColorSaturation: 0.9,
+                        gapWidth: 1
+                    }
+                },
+                {
+                    upperLabel: upperLabel,
+                    colorMappingBy: 'id',
+                    itemStyle: {
+                        borderColorSaturation: 0.8,
+                        gapWidth: 1
+                    }
+                },
+                {
+                    upperLabel: upperLabel,
+                    borderColor: '#fff',
+                    itemStyle: {
+                        borderColorSaturation: 0.9,
+                        gapWidth: 1
+                    }
+                }
+            ];
+        }
+
+
+        function colorMappingChange(value) {
+            var levelOption = getLevelOption(value);
+            chart.setOption({
+                series: [{
+                    levels: levelOption
+                }]
+            });
+        }
+
+        treemapChart.setOption({
+            title: {
+                left: 'center'
+            },
+            tooltip: {
+                formatter: function (info) {
+                    var value = info.value;
+                    var treePathInfo = info.treePathInfo;
+                    var treePath = [];
+
+                    for (var i = 1; i < treePathInfo.length; i++) {
+                        treePath.push(treePathInfo[i].name);
+                    }
+
+                    return [
+                        '<div class="tooltip-title">' + formatUtil.encodeHTML(treePath.join('.')) + '</div>',
+                        'Call ' + formatUtil.addCommas(value) + ' ',
+                    ].join('');
+                }
+            },
+
+            series: [
+                {
+                    name: "coca",
+                    type: 'treemap',
+                    visibleMin: 1200,
+                    width: 1200,
+                    height: 768,
+                    label: {
+                        position: 'insideTopLeft',
+                        formatter: function (params) {
+                            var arr = [
+                                '{name|' + params.name + '}',
+                            ];
+                            return arr;
+                        },
+                        rich: {
+                            name: {
+                                fontSize: 12,
+                                color: '#fff'
+                            }
+                        }
+                    },
+                    itemStyle: {
+                        borderColor: '#fff'
+                    },
+                    visualDimension: 2,
+                    levels: getLevelOption(),
+                    data: data.children
+                }
+            ]
+        });
+
+        var treemapData = treemapChart.getModel().getSeriesByIndex(0).getData();
+        var tree = treemapData.tree;
+        echarts.registerMap('treemap', {
+            type: 'FeatureCollection',
+            features: treemapData.mapArray(function (idx) {
+                var itemLayout = treemapData.getItemLayout(idx);
+                if (itemLayout && itemLayout.height && itemLayout.width && !itemLayout.invisible) {
+                    return {
+                        type: 'Feature',
+                        geometry: {
+                            type: 'Polygon',
+                            coordinates: [[
+                                [itemLayout.x, 2048 - itemLayout.y],
+                                [itemLayout.x + itemLayout.width, 2048 - itemLayout.y],
+                                [itemLayout.x + itemLayout.width, 2048 - itemLayout.y - itemLayout.height],
+                                [itemLayout.x, 2048 - itemLayout.y - itemLayout.height]
+                            ]]
+                        },
+                        properties: {
+                            name: treemapData.getName(idx)
+                        }
+                    }
+                }
+            }).filter(function (item) {
+                return !!item;
+            })
+        });
+        var regions = treemapData.mapArray(function (idx) {
+            var itemLayout = treemapData.getItemLayout(idx);
+            if (itemLayout && itemLayout.height && itemLayout.width && !itemLayout.invisible) {
+                return {
+                    height: tree.getNodeByDataIndex(idx).depth + 1,
+                    name: treemapData.getName(idx)
+                    // itemStyle: {
+                    //     areaColor: treemapData.getItemVisual(idx, 'color')
+                    // }
+                };
+            }
+        }).filter(function (item) {
+            return !!item;
+        });
+
+        myChart.setOption({
+            geo3D: {
+                silent: true,
+                map: 'treemap',
+                instancing: true,
+                regions: regions,
+
+                aspectScale: 1,
+
+                lambertMaterial: {
+                    detailTexture: treemapChart
+                },
+                projectUVOnGround: true,
+
+                postEffect: {
+                    enable: true,
+                    screenSpaceAmbientOcclusion: {
+                        enable: true,
+                        radius: 3,
+                        intensity: 1.5
+                    },
+                    depthOfField: {
+                        enable: true,
+                        blurRadius: 3
+                    }
+                },
+                viewControl: {
+                    minBeta: -Infinity,
+                    maxBeta: Infinity
+                }
+            },
+            series: []
+        });
+
+
+        window.addEventListener('resize', function () {
+            myChart.resize();
+        });
+
+    });
+</script>
+</body>
+</html>
\ No newline at end of file
