{"size": 4264, "ext": "js", "max_stars_repo_path": "Data-Viz/Scatterplot Graph/scatterplot_graph.js", "max_stars_repo_name": "alivebao/FreeCodeCamp", "max_stars_repo_stars_event_min_datetime": "2017-03-14T01:48:39.000Z", "max_stars_repo_stars_event_max_datetime": "2019-07-26T15:09:04.000Z", "max_issues_repo_path": "Data-Viz/Scatterplot Graph/scatterplot_graph.js", "max_issues_repo_name": "alivebao/FreeCodeCamp", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "Data-Viz/Scatterplot Graph/scatterplot_graph.js", "max_forks_repo_name": "alivebao/FreeCodeCamp", "max_forks_repo_forks_event_min_datetime": "2017-03-13T08:53:49.000Z", "max_forks_repo_forks_event_max_datetime": "2020-12-23T09:56:30.000Z"}
{"max_stars_count": 4, "max_issues_count": null, "max_forks_count": 5, "avg_line_length": 38.7636363636, "max_line_length": 128, "alphanum_fraction": 0.4169793621}
$().ready(function() {
    let chartMargin = {
        top: 15,
        right: 10,
        bottom: 30,
        left: 75
    };
    let width = $(".chart").width() - chartMargin.left - chartMargin.right;
    let height = $(".chart").height() - chartMargin.bottom - chartMargin.top;
    
    $.getJSON("https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/cyclist-data.json", function(result) {
        let xMin = 999;
        let xMax = 0;
        result = result.reverse();
        $.each(result, function(i, content) {
            let tempTime = content.Time;
            xMin > parseInt(tempTime.split(":")[0]) ? xMin = parseInt(tempTime.split(":")[0]) : xMin;
            xMax < parseInt(tempTime.split(":")[0]) ? xMax = parseInt(tempTime.split(":")[0]) : xMax;
        })
        xMax++;
        let xScale = d3.scale.linear()
                        .domain([xMin, xMax])
                        .range([width, 0]);
        let xAxis = d3.svg.axis()
                        .scale(xScale)
                        .orient("bottom")
                        
        let yScale = d3.scale.linear()
                        .domain([result.length, 0])
                        .range([height, 0]);
        let yAxis = d3.svg.axis()
                        .scale(yScale)
                        .orient("left")
                        .ticks(10, "");
                        
        let svg = d3.select("body")
                    .select(".chart");
                    
        let texts = svg.selectAll("text")
            .data(result)
            .enter()
            .append("text")
            .text(function(d) {
                return d.Name;
            })
            .attr("x", function(d) {
                var arrTemp = d.Time.split(":");
                var resultTemp = parseInt(arrTemp[0]) * 60 + parseInt(arrTemp[1]);
                return xScale(resultTemp / 60) + 90;
            })
            .attr("y", function(d, i) {
                return yScale(result.length - i) + 20;
            })
              
        svg.append("g")
            .attr("class", "axis")
            .attr("transform","translate(" + chartMargin.left + "," + chartMargin.top + ")")
            .call(yAxis)
            .append('text')
            .attr('font-weight', 'bold')
            .text('Ranking');
            
        svg.append("g")
            .attr("class", "axis")
            .attr("transform","translate(" + chartMargin.left + "," + (chartMargin.top + height) + ")")
            .call(xAxis)
            .append('text')
            .attr("transform","translate(" + (width - chartMargin.left) + ", 0)")
            .attr('font-weight', 'bold')
            .text('Time');
            
        let reminderCard = d3.select(".card")
            .append("div")
            .attr("class", "tooltip")
            .style("opacity", 0);    
            
        let rects = svg.selectAll("circle")
            .data(result)
            .enter()
            .append("circle")
            .attr("transform","translate(" + chartMargin.left + "," + chartMargin.top + ")")
            .attr("cx", function(d, i){
                var arrTemp = d.Time.split(":");
                var resultTemp = parseInt(arrTemp[0]) * 60 + parseInt(arrTemp[1]);
                return xScale(resultTemp / 60);
            } )
            .attr("cy",function(d, i){
                return yScale(result.length - i);
            })
            .attr("r", 5)
            .on("mouseover", function(d) {
                reminderCard.transition()
                    .duration(200)
                    .style("opacity", 0.9);
                reminderCard.html("<p>" 
                            + d.Nationality + ":" + d.Name + "</br>"
                            + "Place:" + d.Place + ",Time:" + d.Time + "</br>"
                            + d.Doping +
                "</p>")
                    .style("left", (chartMargin.left + 200) + "px")
                    .style("top", (chartMargin.top + height / 5) + "px")
                    .style("width", width / 3);
            })
            .on("mouseout", function() {
                reminderCard.transition()
                  .duration(500)
                  .style("opacity", 0);
            });
    })
});