upset test

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Upset Test</title>
    <script src="d3.v3.min.js"></script>
    <script src="upset.js"></script>
    <script src="e451VizColors.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

var products = [
        {name: "Bread", productId: 1},
        {name: "Nut Butters", productId: 2},
        {name: "Jelly", productId: 3},
        {name: "Honey", productId: 4}
    ]

var barData = [
        {value: 0.9, products: ["1"]},
        {value: 14.56, products: ["2"]},
        {value: 10.02, products: ["3"]},
        {value: 1.42, products: ["4"]},
        {value: 1.69, products: ["1", "2"]},
        {value: 4.47, products: ["1", "3"]},
        {value: 0.26, products: ["1", "4"]},
        {value: 24.96, products: ["2", "3"]},
        {value: 4.03, products: ["2", "4"]},
        {value: 3.23, products: ["3", "4"]},
        {value: 10.18, products: ["1", "2", "3"]},
        {value: 0.69, products: ["1", "2", "4"]},
        {value: 1.84, products: ["1", "3", "4"]},
        {value: 13.65, products: ["2", "3", "4"]},
        {value: 7.10, products: ["1", "2", "3", "4"]},
    ]

makeUpsetNew(products, barData);
</script>
</html>