JSFiddle - React, Tailwind, and code Playground

by gibito

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>d3</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script src="http://mbostock.github.com/d3/d3.js"></script>
    </head>
    <body>
    </body>
</html>

JavaScript

// parameters
    var plotWidth = 450,
        plotHeight = 250, 
        leftPadding = 50, 
        topPadding = 20, 
        bottomPadding = 70,
        rightPadding = 50;

// select body, make chart
    var body = d3.select('body')
    var years = [1990, 1995, 2000, 2005, 2010]
        

// Make data
var country_data= {
        Maternal_Mortality: [
            {year:1990, prev:.7},
            {year:1995, prev:.6},
            {year:2000, prev:.5},
            {year:2005, prev:.5},
            {year:2010, prev:.4}
        ],
        Breast_Cancer: [
            {year:1990, prev:.2},
            {year:1995, prev:.3},
            {year:2000, prev:.5},
            {year:2005, prev:.6},
            {year:2010, prev:.7}
        ],
        Child_Mortality: [
            {year:1990, prev:.3},
            {year:1995, prev:.4},
            {year:2000, prev:.4},
            {year:2005, prev:.4},
            {year:2010, prev:.5}
        ],
        Diabetes: [
            {year:1990, prev:.4},
            {year:1995, prev:.4},
            {year:2000, prev:.6},
            {year:2005, prev:.7},
            {year:2010, prev:.8}
        ],
        Cervical_Cancer: [
            {year:1990, prev:.4},
            {year:1995, prev:.3},
            {year:2000, prev:.4},
            {year:2005, prev:.6},
            {year:2010, prev:.7}
        ],
        Malaria: [
            {year:1990, prev:.7},
            {year:1995, prev:.5},
            {year:2000, prev:.5},
            {year:2005, prev:.2},
            {year:2010, prev:.1}
        ]
    }
    
    
    // track metrics of data -- to incorporate into meta-data
    var metaData = []
    metaData['Maternal_Mortality'] = 'Prevalence'
    metaData['Child_Mortality'] = 'Crude Death Rate'
    metaData['Cervical_Cancer'] = 'Survival Rate'
    metaData['Breast_Cancer'] = 'Crude Death Rate'
    metaData['Diabetes'] = 'Prevalence'
    metaData['Malaria'] = 'Deaths'
// Make line functions
    xval = d3.scale.linear().domain([1990,...