Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <html>
<head><meta charset="utf-8" /></head>
<body>
    <div>                        <script type="text/javascript">window.PlotlyConfig = {MathJaxConfig: 'local'};</script>
        <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>                <div id="ffda7a2f-f6bd-4d7b-93bf-d0b3b59eca48" class="plotly-graph-div" style="height:100%; width:100%;"></div>            <script type="text/javascript">                                    window.PLOTLYENV=window.PLOTLYENV || {};                                    if (document.getElementById("ffda7a2f-f6bd-4d7b-93bf-d0b3b59eca48")) {                    Plotly.newPlot(                        "ffda7a2f-f6bd-4d7b-93bf-d0b3b59eca48",                        [{"branchvalues": "total", "customdata": [[67.0], [10.0], [75.0], [3.0], [4.0], [14.0], [4.0], [5.0], [6.0], [13.0], [3.0], [6.0], [15.0], [5.0], [3.0], [10.0], [3.0], [5.0], [14.0], [14.0], [3.0], [4.0], [72.0], [14.0], [3.0], [4.0], [18.0], [10.0], [15.0], [14.0], [26.0], [6.0], [3.0], [4.0], [15.0], [9.0], [14.0], [34.0], [3.0], [41.0], [8.0], [30.0], [3.0], [61.0], [7.0], [8.0], [3.0], [6.0], [3.0], [3.0], [4.0], [5.0], [16.0], [14.0], [9.0], [5.0], [3.0], [4.0], [11.0], [23.0], [6.0], [35.68571428571428], [45.890756302521005], [9.703703703703704], [4.842105263157895]], "domain": {"x": [0.0, 1.0], "y": [0.0, 1.0]}, "hovertemplate": "labels=%{label}<br>count_sum=%{value}<br>parent=%{parent}<br>id=%{id}<br>count=%{color}<extra></extra>", "ids": ["Backend/.net", "Mobile/android", "Front-end/angular", "Backend/api", "Others/autosar", "Backend/aws", "Backend/azure", "Front-end/bootstrap", "Others/c++", "Front-end/css", "Others/development", "Backend/django", "Backend/docker", "Backend/elasticsearch", "Others/embedded", "Mobile/flutter", "Others/gcp", "Others/git", "Backend/golang", "Front-end/html", "Mobile/ionic", "Mobile/ios", "Backend/java", "Front-end/javascript", "Others/jira", "Front-end/jquery", "Front-end/js", "Backend/kafka", "Mobile/kotlin", "Backend/kubernetes", "Backend/laravel", "Others/linux", "Others/manual", "Backend/microservices", "Backend/mongodb", "Others/mvc", "Backend/mysql", "Backend/node.js", "Others/oracle", "Backend/php", "Backend/postgresql", "Backend/python", "Backend/rabbitmq", "Front-end/react", "Mobile/react native", "Backend/redis", "Others/rpa", "Backend/ruby", "Backend/ruby on rails", "Others/sap", "Others/sass", "Others/software", "Backend/spring", "Backend/sql", "Backend/sql server", "Mobile/swift", "Others/tensorflow", "Others/testing", "Front-end/typescript", "Front-end/vue.js", "Others/wordpress", "Backend", "Front-end", "Mobile", "Others"], "labels": [".net", "android", "angular", "api", "autosar", "aws", "azure", "bootstrap", "c++", "css", "development", "django", "docker", "elasticsearch", "embedded", "flutter", "gcp", "git", "golang", "html", "ionic", "ios", "java", "javascript", "jira", "jquery", "js", "kafka", "kotlin", "kubernetes", "laravel", "linux", "manual", "microservices", "mongodb", "mvc", "mysql", "node.js", "oracle", "php", "postgresql", "python", "rabbitmq", "react", "react native", "redis", "rpa", "ruby", "ruby on rails", "sap", "sass", "software", "spring", "sql", "sql server", "swift", "tensorflow", "testing", "typescript", "vue.js", "wordpress", "Backend", "Front-end", "Mobile", "Others"], "marker": {"coloraxis": "coloraxis", "colors": [67.0, 10.0, 75.0, 3.0, 4.0, 14.0, 4.0, 5.0, 6.0, 13.0, 3.0, 6.0, 15.0, 5.0, 3.0, 10.0, 3.0, 5.0, 14.0, 14.0, 3.0, 4.0, 72.0, 14.0, 3.0, 4.0, 18.0, 10.0, 15.0, 14.0, 26.0, 6.0, 3.0, 4.0, 15.0, 9.0, 14.0, 34.0, 3.0, 41.0, 8.0, 30.0, 3.0, 61.0, 7.0, 8.0, 3.0, 6.0, 3.0, 3.0, 4.0, 5.0, 16.0, 14.0, 9.0, 5.0, 3.0, 4.0, 11.0, 23.0, 6.0, 35.68571428571428, 45.890756302521005, 9.703703703703704, 4.842105263157895]}, "name": "", "parents": ["Backend", "Mobile", "Front-end", "Backend", "Others", "Backend", "Backend", "Front-end", "Others", "Front-end", "Others", "Backend", "Backend", "Backend", "Others", "Mobile", "Others", "Others", "Backend", "Front-end", "Mobile", "Mobile", "Backend", "Front-end", "Others", "Front-end", "Front-end", "Backend", "Mobile", "Backend", "Backend", "Others", "Others", "Backend", "Backend", "Others", "Backend", "Backend", "Others", "Backend", "Backend", "Backend", "Backend", "Front-end", "Mobile", "Backend", "Others", "Backend", "Backend", "Others", "Others", "Others", "Backend", "Backend", "Backend", "Mobile", "Others", "Others", "Front-end", "Front-end", "Others", "", "", "", ""], "type": "treemap", "values": [67.0, 10.0, 75.0, 3.0, 4.0, 14.0, 4.0, 5.0, 6.0, 13.0, 3.0, 6.0, 15.0, 5.0, 3.0, 10.0, 3.0, 5.0, 14.0, 14.0, 3.0, 4.0, 72.0, 14.0, 3.0, 4.0, 18.0, 10.0, 15.0, 14.0, 26.0, 6.0, 3.0, 4.0, 15.0, 9.0, 14.0, 34.0, 3.0, 41.0, 8.0, 30.0, 3.0, 61.0, 7.0, 8.0, 3.0, 6.0, 3.0, 3.0, 4.0, 5.0, 16.0, 14.0, 9.0, 5.0, 3.0, 4.0, 11.0, 23.0, 6.0, 455.0, 238.0, 54.0, 76.0]}],                        {"coloraxis": {"colorbar": {"title": {"text": "count"}}, "colorscale": [[0.0, "rgb(103,0,31)"], [0.1, "rgb(178,24,43)"], [0.2, "rgb(214,96,77)"], [0.3, "rgb(244,165,130)"], [0.4, "rgb(253,219,199)"], [0.5, "rgb(247,247,247)"], [0.6, "rgb(209,229,240)"], [0.7, "rgb(146,197,222)"], [0.8, "rgb(67,147,195)"], [0.9, "rgb(33,102,172)"], [1.0, "rgb(5,48,97)"]]}, "legend": {"tracegroupgap": 0}, "margin": {"t": 60}, "template": {"data": {"bar": [{"error_x": {"color": "#2a3f5f"}, "error_y": {"color": "#2a3f5f"}, "marker": {"line": {"color": "#E5ECF6", "width": 0.5}}, "type": "bar"}], "barpolar": [{"marker": {"line": {"color": "#E5ECF6", "width": 0.5}}, "type": "barpolar"}], "carpet": [{"aaxis": {"endlinecolor": "#2a3f5f", "gridcolor": "white", "linecolor": "white", "minorgridcolor": "white", "startlinecolor": "#2a3f5f"}, "baxis": {"endlinecolor": "#2a3f5f", "gridcolor": "white", "linecolor": "white", "minorgridcolor": "white", "startlinecolor": "#2a3f5f"}, "type": "carpet"}], "choropleth": [{"colorbar": {"outlinewidth": 0, "ticks": ""}, "type": "choropleth"}], "contour": [{"colorbar": {"outlinewidth": 0, "ticks": ""}, "colorscale": [[0.0, "#0d0887"], [0.1111111111111111, "#46039f"], [0.2222222222222222, "#7201a8"], [0.3333333333333333, "#9c179e"], [0.4444444444444444, "#bd3786"], [0.5555555555555556, "#d8576b"], [0.6666666666666666, "#ed7953"], [0.7777777777777778, "#fb9f3a"], [0.8888888888888888, "#fdca26"], [1.0, "#f0f921"]], "type": "contour"}], "contourcarpet": [{"colorbar": {"outlinewidth": 0, "ticks": ""}, "type": "contourcarpet"}], "heatmap": [{"colorbar": {"outlinewidth": 0, "ticks": ""}, "colorscale": [[0.0, "#0d0887"], [0.1111111111111111, "#46039f"], [0.2222222222222222, "#7201a8"], [0.3333333333333333, "#9c179e"], [0.4444444444444444, "#bd3786"], [0.5555555555555556, "#d8576b"], [0.6666666666666666, "#ed7953"], [0.7777777777777778, "#fb9f3a"], [0.8888888888888888, "#fdca26"], [1.0, "#f0f921"]], "type": "heatmap"}], "heatmapgl": [{"colorbar": {"outlinewidth": 0, "ticks": ""}, "colorscale": [[0.0, "#0d0887"], [0.1111111111111111, "#46039f"], [0.2222222222222222, "#7201a8"], [0.3333333333333333, "#9c179e"], [0.4444444444444444, "#bd3786"], [0.5555555555555556, "#d8576b"], [0.6666666666666666, "#ed7953"], [0.7777777777777778, "#fb9f3a"], [0.8888888888888888, "#fdca26"], [1.0, "#f0f921"]], "type": "heatmapgl"}], "histogram": [{"marker": {"colorbar": {"outlinewidth": 0, "ticks": ""}}, "type": "histogram"}], "histogram2d": [{"colorbar": {"outlinewidth": 0, "ticks": ""}, "colorscale": [[0.0, "#0d0887"], [0.1111111111111111, "#46039f"], [0.2222222222222222, "#7201a8"], [0.3333333333333333, "#9c179e"], [0.4444444444444444, "#bd3786"], [0.5555555555555556, "#d8576b"], [0.6666666666666666, "#ed7953"], [0.7777777777777778, "#fb9f3a"], [0.8888888888888888, "#fdca26"], [1.0, "#f0f921"]], "type": "histogram2d"}], "histogram2dcontour": [{"colorbar": {"outlinewidth": 0, "ticks": ""}, "colorscale": [[0.0, "#0d0887"], [0.1111111111111111, "#46039f"], [0.2222222222222222, "#7201a8"], [0.3333333333333333, "#9c179e"], [0.4444444444444444, "#bd3786"], [0.5555555555555556, "#d8576b"], [0.6666666666666666, "#ed7953"], [0.7777777777777778, "#fb9f3a"], [0.8888888888888888, "#fdca26"], [1.0, "#f0f921"]], "type": "histogram2dcontour"}], "mesh3d": [{"colorbar": {"outlinewidth": 0, "ticks": ""}, "type": "mesh3d"}], "parcoords": [{"line": {"colorbar": {"outlinewidth": 0, "ticks": ""}}, "type": "parcoords"}], "pie": [{"automargin": true, "type": "pie"}], "scatter": [{"marker": {"colorbar": {"outlinewidth": 0, "ticks": ""}}, "type": "scatter"}], "scatter3d": [{"line": {"colorbar": {"outlinewidth": 0, "ticks": ""}}, "marker": {"colorbar": {"outlinewidth": 0, "ticks": ""}}, "type": "scatter3d"}], "scattercarpet": [{"marker": {"colorbar": {"outlinewidth": 0, "ticks": ""}}, "type": "scattercarpet"}], "scattergeo": [{"marker": {"colorbar": {"outlinewidth": 0, "ticks": ""}}, "type": "scattergeo"}], "scattergl": [{"marker": {"colorbar": {"outlinewidth": 0, "ticks": ""}}, "type": "scattergl"}], "scattermapbox": [{"marker": {"colorbar": {"outlinewidth": 0, "ticks": ""}}, "type": "scattermapbox"}], "scatterpolar": [{"marker": {"colorbar": {"outlinewidth": 0, "ticks": ""}}, "type": "scatterpolar"}], "scatterpolargl": [{"marker": {"colorbar": {"outlinewidth": 0, "ticks": ""}}, "type": "scatterpolargl"}], "scatterternary": [{"marker": {"colorbar": {"outlinewidth": 0, "ticks": ""}}, "type": "scatterternary"}], "surface": [{"colorbar": {"outlinewidth": 0, "ticks": ""}, "colorscale": [[0.0, "#0d0887"], [0.1111111111111111, "#46039f"], [0.2222222222222222, "#7201a8"], [0.3333333333333333, "#9c179e"], [0.4444444444444444, "#bd3786"], [0.5555555555555556, "#d8576b"], [0.6666666666666666, "#ed7953"], [0.7777777777777778, "#fb9f3a"], [0.8888888888888888, "#fdca26"], [1.0, "#f0f921"]], "type": "surface"}], "table": [{"cells": {"fill": {"color": "#EBF0F8"}, "line": {"color": "white"}}, "header": {"fill": {"color": "#C8D4E3"}, "line": {"color": "white"}}, "type": "table"}]}, "layout": {"annotationdefaults": {"arrowcolor": "#2a3f5f", "arrowhead": 0, "arrowwidth": 1}, "autotypenumbers": "strict", "coloraxis": {"colorbar": {"outlinewidth": 0, "ticks": ""}}, "colorscale": {"diverging": [[0, "#8e0152"], [0.1, "#c51b7d"], [0.2, "#de77ae"], [0.3, "#f1b6da"], [0.4, "#fde0ef"], [0.5, "#f7f7f7"], [0.6, "#e6f5d0"], [0.7, "#b8e186"], [0.8, "#7fbc41"], [0.9, "#4d9221"], [1, "#276419"]], "sequential": [[0.0, "#0d0887"], [0.1111111111111111, "#46039f"], [0.2222222222222222, "#7201a8"], [0.3333333333333333, "#9c179e"], [0.4444444444444444, "#bd3786"], [0.5555555555555556, "#d8576b"], [0.6666666666666666, "#ed7953"], [0.7777777777777778, "#fb9f3a"], [0.8888888888888888, "#fdca26"], [1.0, "#f0f921"]], "sequentialminus": [[0.0, "#0d0887"], [0.1111111111111111, "#46039f"], [0.2222222222222222, "#7201a8"], [0.3333333333333333, "#9c179e"], [0.4444444444444444, "#bd3786"], [0.5555555555555556, "#d8576b"], [0.6666666666666666, "#ed7953"], [0.7777777777777778, "#fb9f3a"], [0.8888888888888888, "#fdca26"], [1.0, "#f0f921"]]}, "colorway": ["#636efa", "#EF553B", "#00cc96", "#ab63fa", "#FFA15A", "#19d3f3", "#FF6692", "#B6E880", "#FF97FF", "#FECB52"], "font": {"color": "#2a3f5f"}, "geo": {"bgcolor": "white", "lakecolor": "white", "landcolor": "#E5ECF6", "showlakes": true, "showland": true, "subunitcolor": "white"}, "hoverlabel": {"align": "left"}, "hovermode": "closest", "mapbox": {"style": "light"}, "paper_bgcolor": "white", "plot_bgcolor": "#E5ECF6", "polar": {"angularaxis": {"gridcolor": "white", "linecolor": "white", "ticks": ""}, "bgcolor": "#E5ECF6", "radialaxis": {"gridcolor": "white", "linecolor": "white", "ticks": ""}}, "scene": {"xaxis": {"backgroundcolor": "#E5ECF6", "gridcolor": "white", "gridwidth": 2, "linecolor": "white", "showbackground": true, "ticks": "", "zerolinecolor": "white"}, "yaxis": {"backgroundcolor": "#E5ECF6", "gridcolor": "white", "gridwidth": 2, "linecolor": "white", "showbackground": true, "ticks": "", "zerolinecolor": "white"}, "zaxis": {"backgroundcolor": "#E5ECF6", "gridcolor": "white", "gridwidth": 2, "linecolor": "white", "showbackground": true, "ticks": "", "zerolinecolor": "white"}}, "shapedefaults": {"line": {"color": "#2a3f5f"}}, "ternary": {"aaxis": {"gridcolor": "white", "linecolor": "white", "ticks": ""}, "baxis": {"gridcolor": "white", "linecolor": "white", "ticks": ""}, "bgcolor": "#E5ECF6", "caxis": {"gridcolor": "white", "linecolor": "white", "ticks": ""}}, "title": {"x": 0.05}, "xaxis": {"automargin": true, "gridcolor": "white", "linecolor": "white", "ticks": "", "title": {"standoff": 15}, "zerolinecolor": "white", "zerolinewidth": 2}, "yaxis": {"automargin": true, "gridcolor": "white", "linecolor": "white", "ticks": "", "title": {"standoff": 15}, "zerolinecolor": "white", "zerolinewidth": 2}}}},                        {"responsive": true}                    )                };                            </script>        </div>
</body>
</html>
              
            
!

CSS

              
                
              
            
!

JS

              
                
              
            
!
999px

Console