Dasboard SVG Test

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

.line {
            fill: none;
            stroke: #ffab00;
            stroke-width: 3;
        }

.dot {
            fill: #ffab00;
            stroke: #fff;
        }

.bar {
            fill: steelblue;
        }

.bar:hover {
            fill: brown;
        }

.axis--x path {
            display: none;
        }

</style>
</head>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
    console.time('test');

for (let i = 0; i < 20; i++) {
        const x = randomInt(0, 2);

if (x === 1) {
            createLineChart();
        } else if (x === 2) {
            createPie();
        } else {
            createBar();
        }
    }
    console.timeEnd('test');

function createLineChart() {
        // 2. Use the margin convention practice
        var margin = { top: 50, right: 50, bottom: 50, left: 50 }
            , width = 500 - margin.left - margin.right // Use the window's width
            , height = 400 - margin.top - margin.bottom; // Use the window's height

// The number of datapoints
        var n = 10;

// 5. X scale will use the index of our data
        var xScale = d3.scaleLinear()
            .domain([0, n - 1]) // input
            .range([0, width]); // output

// 6. Y scale will use the randomly generate number
        var yScale = d3.scaleLinear()
            .domain([0, 1]) // input
            .range([height, 0]); // output

// 7. d3's line generator
        var line = d3.line()
            .x(function (d, i) {
                return xScale(i);
            }) // set the x values for the line generator
            .y(function (d) {
                return yScale(d.y);
            }) // set the y values for the line generator
            .curve(d3.curveMonotoneX) // apply smoothing to the line

const data = [];

for (let i = 0; i < 4; i++) {
            data.push(
                d3.range(n).map(function (d) {
                    return { "y": d3.randomUniform(1)() }
                })
            )
        }

//        var dataset = d3.range(n).map(function (d) {
//            return { "y": d3.randomUniform(1)() }
//        });

var svg = d3.select("body").append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(d3.axisBottom(xScale)); // Create an axis component with d3.axisBottom

// 4. Call the y axis in a group tag
        svg.append("g")
            .attr("class", "y axis")
            .call(d3.axisLeft(yScale)); // Create an axis component with d3.axisLeft

// 9. Append the path, bind the data, and call the line generator

for (let i = 0; i < data.length; i++) {

svg.append("path")
                .datum(data[i])
                .attr("class", "line")
                .attr("d", line)
                .attr('style', `stroke: rgb(${randomInt(0, 255)}, ${randomInt(0, 255)}, ${randomInt(0, 255)})`);

svg.selectAll(".dot" + i)
                .data(data[i])
                .enter().append("circle") // Uses the enter().append() method
                .attr("class", "dot") // Assign a class for styling
                .attr("cx", function (d, i) {
                    return xScale(i)
                })
                .attr("cy", function (d) {
                    return yScale(d.y)
                })
                .attr("r", 5)
                .attr('style', `fill: rgb(${randomInt(0, 255)}, ${randomInt(0, 255)}, ${randomInt(0, 255)})`);
        }

}

function createPie() {
        var arc, color, csv, data, g, height, pie, radius, svg, width;

csv = 'category,value\none,123\ntwo,534\nthree,230\nfour,56';

width = 500;

height = 300;

//        data = d3.csv.parse(csv);
//
//        data.forEach(function (d) {
//            return d.value = +d.value;
//        });

var data = [];
        d3.range(5).forEach(function (el, index) {
            data.push({ value: Math.random() * 10 * el, time: new Date(Date.now() + index * 6000) });
        });

radius = Math.min(width, height) / 2;

//        color = d3.scale.ordinal().range(["#1b9e77", "#d95f02", "#7570b3", "#e7298a", "#66a61e", "#e6ab02", "#a6761d"]);
        color = d3.scaleOrdinal(d3.schemeCategory10);

arc = d3.arc().outerRadius(radius - 40).innerRadius(0);

pie = d3.pie().sort(null).value(function (d) {
            return d.value;
        });

svg = d3.select("body").append("svg").attr("width", width).attr("height", height)
            .append("g")
            .attr("transform",
                "translate(" + (width / 2) + ", " + (height / 2) + ")"
            );

g = svg.selectAll(".arc")
            .data(pie(data))
            .enter()
            .append("path")
            .attr('class', 'arc')
            .attr("d", arc)
            .style("fill", function (d, i) {
//                return color(d.data.category);
                return color(Math.floor(Math.random() * 20));
            });
    }

function createBar() {
        const data = [];

for (var i = 0; i < 20; i++) {
            data.push({
                letter: i,
                frequency: randomInt(1, 50)
            })
        }

var svgHeight = 300;
        var svgWidth = 500;

var svg = d3.select("body").append("svg")
            .attr('width', svgWidth)
            .attr('height', svgHeight);
        var margin = { top: 30, right: 30, bottom: 40, left: 50 };
        var width = +svg.attr("width") - margin.left - margin.right;
        var height = +svg.attr("height") - margin.top - margin.bottom;

var x = d3.scaleBand().rangeRound([0, width]).padding(0.1),
            y = d3.scaleLinear().rangeRound([height, 0]);

var g = svg.append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

x.domain(data.map(function (d) {
            return d.letter;
        }));

y.domain([0, d3.max(data, function (d) {
            return d.frequency;
        })]);

g.append("g")
            .attr("class", "axis axis--x")
            .attr("transform", "translate(0," + height + ")")
            .call(d3.axisBottom(x));

g.append("g")
            .attr("class", "axis axis--y")
            .attr("transform", "translate(9, 0)")
            .call(d3.axisLeft(y).ticks(10))
            .append("text")
            .attr("transform", "rotate(-90)")
            .attr("y", 6)
            .attr("dy", "0.71em")
            .attr("text-anchor", "end")
            .text("Frequency");

g.selectAll(".bar")
            .data(data)
            .enter()
            .append("rect")
            .attr("class", "bar")
            .attr("x", function (d) {
                return x(d.letter);
            })
            .attr("y", function (d) {
                return y(d.frequency);
            })
            .attr("width", x.bandwidth())
            .attr("height", function (d) {
                return height - y(d.frequency);
            });
    }

function randomInt(firstParam, secondParam) {
        if (secondParam === void 0) {
            return Math.floor(Math.random() * (firstParam + 1));
        } else {
            return firstParam + Math.floor(Math.random() * (secondParam - firstParam + 1));
        }
    }

</script>
</body>
</html>

https://d3js.org/d3.v4.min.js