Визуализация результатов гонки с D3. js - PullRequest
Новая
       7

Визуализация результатов гонки с D3. js

0 голосов
/ 12 февраля 2020

Очевидно, я новичок в D3. js и у меня есть чувство, что мне нужно делать, но я не уверен, как это сделать, и, похоже, нигде не могу найти решения.

Итак, я хочу визуализировать результаты марафона в D3. js. У меня есть данные в формате CSV (имя, возраст, время). Результаты гонки представлены в формате времени 2:53:46 (чч: мм: сс).

У меня есть базовая c диаграмма рассеяния, которая выглядит следующим образом: 

    const margin = {top: 20, right: 30, bottom: 30, left: 60},
        width = 860 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;

    const svg = d3.select("#sofiaMarathon_2016_viz")
    .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 + ")");

    d3.csv(MALE_DATA, function(data) {

    const x = d3.scaleTime()
        .range([ 0, width ]);
    svg.append("g")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x));

    const y = d3.scaleLinear()
        .range([ height, 0]);
    svg.append("g")
        .call(d3.axisLeft(y));

    svg.append('g')
        .selectAll("dot")
        .data(data)
        .enter()
        .append("circle")
        .attr("cx", function (d) { return x(d.Age); } )
        .attr("cy", function (d) { return y(d.Time); } )
        .attr("r", 1.5)
        .style("fill", "#69b3a2")
    });

MALE_DATA подключается к CSV-файлу с данными.

Я знаю, что мне нужно проанализировать время как-то, чтобы отобразить результаты на диаграмме рассеяния, но я не знаю, как это сделать

Спасибо!

...