need help with graph line

Hi
I must handle some meteo data but i am not very familiar with graph in D3js …basing on different exemple i start a new notebook to try to do it …but i am lost :frowning:

I have at base dynamic data in json with diffferents object inside …
the structure is like thismeteo = ({ meta_data: { datacollection: "meteogram_all", data_source: "National Centers for Environmental Prediction (NCEP)", forecast_model: "Global Forecast System (GFS)", unit: "metric", datetime_forecast_start: "2020-03-03 12:00 UTC", latitude: 47.61, longitude: 237.67, start_of_time_axis: 1, duration: 8, time_step: "3hr" }, data: { wind_speed: { wind_speed_unit: "Bft", wind_speed_value: [1.9, 2.1, 2.9, 3.2, 3.3, 3.8, 2.8, 3] }, wind_direction: { wind_direction_unit: "deg", wind_direction_value: [16, 12, 19, 30, 34, 22, 21, 46] }, ......

My main difficulty is how to handle the x axis who is always by 3 hours steps and those data (duration, time step start_of_time_axis) are in the meteo.meta_data…

In fine i would like to build a meteogram about like this but more nice :slight_smile:

So if somebody can show me a way/method to start to do this many thanks !

Jean Pierre

Your notebook appears to be private, please “Enable link sharing” or publish it, otherwise we cannot access it.

1 Like

oups sorry … done ! thanks

I had a brief look at your notebook. I think the first thing you may want to do is to write a helper function which transforms your data into the form that your line function expects. In particular, as you noted in the comments, your data doesn’t have an explicit array for the dates, so you’ll have to create such an array yourself.

What you have currently for line is this:

line = d3
  .line()
  .defined(d => !isNaN(d.value))
  .x(d => x(d.date)) //// <=this is not good
  .y(d => y(d.wind_direction_value))

By looking at the parameters to .defined, .x and .y, I can see that line expects to receive an array of objects with properties value, date and wind_direction_value, so you should try to write something which will take the data in meteo and return that sort of thing.

1 Like

If you want to have x correspond to the index of the data (just to get something visible), it’d be:

line = d3
  .line()
  .defined(d => !isNaN(d))
  .x((d, i) => x(i))
  .y(d => y(d))
y = d3
  .scaleLinear()
  .domain([
    0,
    d3.max(
      meteo.data.wind_direction.wind_direction_value
    )
  ])
  .range([height - margin.bottom, margin.top])

If it’s 3-hour steps, you could multiply i by three. Or you could convert it to a proper date.

1 Like

@bgchen @mbostock thanks for your time and to give me the direction to follow ! ok i see something now ! i will work with d3 time to find how to handle the time data …and try to get a nice metogram
Thanks !