Visualize Data with a ScatterPlot

index.html

 
<div id="chart">
    <div id="tooltip" class="tooltip">
        <span id="AthleteInfo1">

         </span>
        <span id="AthleteInfo2">

          </span>

        <span id="DopingInfo">

         </span>


    </div>

</div>

 

script.babel

///No jquerry or zepto, use these
/*document.addEventListener('DOMContentLoaded', function() {
   // ...
});*/
 


let ToSeconds = (str) => {

    let tmp = str.split(":");
    return parseInt(tmp[0]) * 60 + parseInt(tmp[1]);

}

let Formater = (secs) => {
    let minTimeutes = Math.floor(secs / 60);
    let seconds = secs - minTimeutes * 60;
    return minTimeutes + "m " + seconds + "s";

}

$(document).ready(function() {


    $.getJSON('https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/cyclist-data.json',
        function(data) {

            const margin = {
                    top: 20,
                    right: 20,
                    bottom: 30,
                    left: 50
                },
                width = 960 - margin.left - margin.right,
                height = 500 - margin.top - margin.bottom,
                barWidth = width / data.length;
            const minTime = d3.min(data, d => ToSeconds(d.Time)),
                maxTime = d3.max(data, d => ToSeconds(d.Time));


            let y = d3.scaleLinear().range([height, 0]).domain([d3.min(data, d => d.Place) - 1, d3.max(data, d => d.Place)]),
                x = d3.scaleLinear().range([0, width]).domain([minTime - 10, maxTime + 20]);




            let chart = d3.select("#chart").append("svg")
                .attr("class", "chart")
                .attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom)
                .append("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");



            let xAxis = d3.axisBottom(x)
                .tickFormat(Formater)
                .tickValues(d3.range(minTime, maxTime + 20, 20)),
                yAxis = d3.axisLeft(y);



            // x-axis
            chart.append("g")
                .attr("class", "x-axis")
                .attr("transform", "translate(0," + height + ")")
                .call(xAxis);

            chart.append("text")
                .attr("y", height - 30 )
                .attr("x", (width / 2 ))
                .attr("dy", "2em")
                .style("text-anchor", "middle")
                .text("Total time");



            // y-axis
            chart.append("g")
                .attr("class", "y-axis")
                .call(yAxis);
            chart.append("text")
                .attr("transform", "rotate(-90)")
                .attr("y", 0)
                .attr("x", 0 - (height / 2))
                .attr("dy", "2em")
                .style("text-anchor", "middle")
                .text("Athlete Ranking");


            // drow scatterplot
            chart.selectAll(".dot")
                .data(data)
                .enter().append("circle")
                .attr("class", "dot")
                .attr("r", 5)
                .attr("cx", d => x(ToSeconds(d.Time)))
                .attr("cy", d => y(d.Place))
                .style("fill", (d) => d.Doping ? "red" : "blue")
                .on("mouseover", function() {
                    d3.select('#tooltip').style("visibility", "visible")
                })
                .on("mousemove", function(d, i) {
                    d3.select('#tooltip').style("top", ((1 / 4) * height) + "px").style("left", 20 + margin.left + "px");

                    d3.select("#AthleteInfo1").text(d.Name + ', ' + d.Nationality);

                    d3.select("#AthleteInfo2").text("Year: " + d.Year + ", Time: " + d.Time);

                    d3.select("#DopingInfo").text("Doping Allegations: " + (d.Doping ? d.Doping : "No Allegations"));
                })
                .on("mouseout", function() {
                    d3.select('#tooltip').style("visibility", "hidden");
                });


            chart.selectAll(".label")
                .data(data)
                .enter().append("text")
                .attr("class", "label")
                .attr("x", d => x(ToSeconds(d.Time)))
                .attr("y", d => y(d.Place))
                .attr("dx", ".71em")
                .attr("dy", ".35em")
                .text(d => d.Name);



        });
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>

style.css

         body {
            font: 11px sans-serif;
        }

        .axis path {
            fill: none;
            stroke: #000;
            shape-rendering: crispEdges;
        }

        .dot {
            stroke: #000;
        }

        .tooltip {
            position: absolute;
            width: 150px;
            height: 60px;
            pointer-events: none;
            color: black;
            padding: 6px;
            background-color: #DCBB11;
            font-family: sans-serif;
            font-size: 80%;
            visibility: hidden;
            z-index: 10;
            display: flex;
            flex-flow: column;
            align-items: center;
            align-content: center;
            text-align: center;
        }
        .tooltip > span{
            margin-top: 3%;
        }
 

visualize-data-with-a-scatterplot.markdown

Visualize Data with a ScatterPlot

A Pen by christos on CodePen.

License.