d3.timeParse() Issue with date, month & year

user_17628210 0
Viewed 72

I'm trying to create x and y scales for eur/usd (y-axis) and time (x-axis). I have tried to modify my d3.timeParse() to get this to work but i'm having issues. I have also added an image example of what the JSON data looks like. I have tried to match the timeParse() inputs to the JSON date data but no luck. Any input appreciated.

<!DOCTYPE html>
<html>

<head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.1.1/d3.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <title>D3.js</title>
    <meta charset="UTF-8">
    <style type="text/css"></style>
</head>

<body>
    <script type="text/javascript"></script>
    <script>

        $.getJSON("https://jsonblob.com/api/904557502042226688", function (data) {
            console.log(data);
            plotCurrencyData(data);
        });

        // Executed once file has downloaded
        function plotCurrencyData(data){
            // SVG
            var margin = {top:50, right: 50, bottom: 50, left: 50},
            width = 900 - margin.left - margin.right,
            height = 670 - margin.top - margin.bottom;

            // timeParse()
            // var parseDate = d3.timeParse("%d/%m/%Y");
            var parseDate = d3.timeParse("%d/%m/%Y");

            var y = d3.scaleLinear()
                .domain(d3.extent(data, function(d) {return d["GBP/EUR"]}))
                .range([height, 0]);

            var x = d3.scaleTime()
                .domain(d3.extent(data, function(d) {return parseDate(d["Date"]); }))
                .range([0, width]);
        }
    </script>
</body>

</html>

JSON Data Image Here

d3.js graph svg json javascript
1 Answers

Calculate the time range with reduce instead of using d3.extent:

const width = 300;

d3.json('https://jsonblob.com/api/904557502042226688')
  .then(d => onLoad(d));
  
const onLoad = data => {
  const range = data.reduce((r, d) => {
    const time = d3.timeParse("%d/%m/%Y")(d.Date).getTime();
    if (!r) return [time, time];
    return [Math.min(time, r[0]), Math.max(time, r[1])];
  }, null);
  
  const xScale = d3.scaleTime()
    .domain(range.map(t => new Date(t)))
    .range([0, width]);
    
  const xAxis = d3.axisBottom(xScale);

  d3.select('svg')
    .append('g')
    .attr('transform', 'translate(50, 50)')
    .call(xAxis);
}  
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

<svg width='400' height='100' />

user_107564890
Related