JSFiddle - React, Tailwind, and code Playground

by Henry

HTML

<div id="pieChart"></div>

CSS

#pieChart {    
            position:absolute;
            top:10px;
            left:10px;
            width:400px;
            height: 400px; 
        }

        #lineChart {    
            position:absolute;
            top:10px;
            left:410px;
            height: 150px;
        }

        #barChart {
            position:absolute;
            top:160px;
            left:410px;
            height: 250px;
        }

        .slice {
            font-size: 8pt;
            font-family: Verdana;
            fill: white; //svg specific - instead of color
            font-weight: normal ;   
        } 

        /*for line chart*/
        .axis path, .axis line {
            fill: none;
            stroke: black;
            shape-rendering: crispEdges; //The shape-rendering property is an SVG attribute, used here to make sure our axis and its tick mark lines are pixel-perfect. 
        }

        .line {
            fill: none;
            /*stroke: steelblue;*/
            stroke-width: 3px;
        }

        .dot {
            /*fill: white;*/
            /*stroke: steelblue;*/
            stroke-width: 1.5px;
        }


        .axis text {
            font-family: Verdana;
            font-size: 11px;
        }

        .title {
            font-family: Verdana;
            font-size: 15px;    

        }

        .xAxis {
            font-family: verdana;
            font-size: 11px;
            fill: black;
        }  

        .yAxis {
            font-family: verdana;
            font-size: 11px;
            fill: white;
        }


        table {
            border-collapse:collapse;
            border: 0px;    
            font-family: Verdana;   
            color: #5C5558;
            font-size: 12px;
            text-align: right;          
        }

        td {
            padding-left: 10px;     
        }

        #lineChartTitle1 {
            font-family: Verdana;
            font-size  : 14px;
            fill       : lightgrey;
  ...

JavaScript

var formatAsPercentage = d3.format("%"),
                formatAsPercentage1Dec = d3.format(".1%"),
                formatAsInteger = d3.format(","),
                fsec = d3.time.format("%S s"),
                fmin = d3.time.format("%M m"),
                fhou = d3.time.format("%H h"),
                fwee = d3.time.format("%a"),
                fdat = d3.time.format("%d d"),
                fmon = d3.time.format("%b")
                ;


        function dsPieChart() {

            var dataset = [
                {category: "Tom", measure: 0.30},
                {category: "John", measure: 0.30},
                {category: "Martin", measure: 0.30},
                {category: "Sam", measure: 0.30},
                {category: "Peter", measure: 0.25},
                {category: "Johannes", measure: 0.15},
                {category: "Rick", measure: 0.05},
                {category: "Lenny", measure: 0.18},
                {category: "Paul", measure: 0.04},
                {category: "Steve", measure: 0.03}
            ]
                    ;

            var width = 400,
                    height = 400,
                    outerRadius = Math.min(width, height) / 2,
                    innerRadius = outerRadius * .999,
                    // for animation
                    innerRadiusFinal = outerRadius * .5,
                    innerRadiusFinal3 = outerRadius * .45,
                    color = d3.scale.category20()    //builtin range of colors
                    ;

            var vis = d3.select("#pieChart")
                    .append("svg:svg")              
                    .data([dataset])                  
                    .attr("width", width)          
                    .attr("height", height)
                    .append("svg:g")                
                    .attr("transform", "translate(" + outerRadius + "," + outerRadius + ")")   
                    ;

            var arc = d3.svg.arc()             
                   ...