JSFiddle - React, Tailwind, and code Playground

by chaosmail

HTML

<script src="https://rawgithub.com/mbostock/d3/v3.2.8/d3.min.js"></script>
<script src="https://rawgithub.com/chaosmail/d3-styles/master/dist/d3-styles.min.js"></script>
<script src="https://rawgithub.com/chaosmail/dchart/master/dist/dchart.min.js"></script>

<div id="scatterChart1">

JavaScript

var scatterData1 = [],
    scatterData2 = [];
var i = 0;
for (i=0;i<=100;i++) {
    scatterData1.push({x:Math.random()*10,y:Math.random()*10});
    scatterData2.push({x:Math.random()*10,y:Math.random()*10});
}

var scatterChart1 = new dChart.ScatterChart({
        elem: 'scatterChart1',
        width: 700,
        height: 400,
        axis: {
            x: {
                range: [0,11],
                ticks:20,
                format: "0.1f"
            },
            y: {
                range: [0,10],
                ticks:10,
                gridStyle: {
                    stroke: "lightgrey",
                    strokeOpacity: 0.5
                }
            }
        },
        transition: {
            duration: 100,
            delay: 10
        },
        dataSets: [
            {
                label: "Random Data",
                symbolStyle: {
                    stroke: "olivedrab",
                    fill: "olivedrab",
                    fillOpacity: 0.7
                },
                data: scatterData1
            },
            {
                label: "Random Data",
                symbolStyle: {
                    stroke: "navy",
                    fill: "navy",
                    fillOpacity: 0.7,
                    size: 1.5
                },
                data: scatterData2
            }
        ]
    });