JSFiddle - React, Tailwind, and code Playground

by Alex Azuero

HTML

<!DOCTYPE html>
<html>
    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
        <title>Popup with Chart</title>
        <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/dojo/dijit/themes/claro/claro.css">
        <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/esri/css/esri.css">
        <style>
            html, body {
                height: 100%;
                width: 100%;
                margin: 0;
                padding: 0;
            }
            #mapDiv {
                padding:0;
            }
        </style>
        <script>
            var dojoConfig = {
                parseOnLoad: true
            };
        </script>
        <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/"></script>
        <script>
            dojo.require("esri.map");
            dojo.require("esri.tasks.query");
            dojo.require("esri.tasks.geometry");
            dojo.require("dijit.layout.BorderContainer");
            dojo.require("dijit.layout.ContentPane");
            dojo.require("dojox.charting.Chart");
            dojo.require("dojox.charting.plot2d.Pie");

            // Make sure you include the theme you want here
            dojo.require("dojox.charting.themes.Julie");

            dojo.ready(pageReady);

            var map, queryTask, query, template;


            function pageReady() {
                debugger;
                map = new esri.Map("mapDiv", {
                    basemap: "streets",
                    center: [-117.252, 34.067],
                    zoom: 12
                });

                dojo.connect(map, "onLoad", mapReady);

                var censusLayer = new...