md`# Météograme test`
chart = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
svg.append("g").call(xAxis);
svg.append("g").call(yAxis);
svg
.append("path")
.datum(meteo.data.wind_direction.wind_direction_value)
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", 1.5)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.attr("d", line);
return svg.node();
}
meteo = ({
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]
},
gust_speed: {
gust_speed_unit: "Bft",
gust_speed_value: [4.7, 5.4, 5.8, 6.5, 6.8, 7.5, 6.7, 7.3]
},
air_temperature: {
air_temperature_unit: "deg C",
air_temperature_value: [7.6, 6.8, 9.2, 9.4, 8.9, 6.7, 7, 6.2]
},
apparent_temperature: {
apparent_temperature_unit: "deg C",
apparent_temperature_value: [null, 3.7, 5.2, 6.7, 5.4, 0.3, 2.4, 0.9]
},
surface_pressure: {
surface_pressure_unit: "hPa",
surface_pressure_value: [
1021.7,
1021.8,
1022,
1020.2,
1019.2,
1018,
1018.1,
1018.5
]
},
relative_humidity: {
relative_humidity_unit: "%",
relative_humidity_value: [95, 94.4, 74.8, 74.8, 74.6, 80.3, 86.1, 75.9]
},
cloud_cover: {
cloud_cover_unit: "%",
cloud_cover_value: [null, 97.9, 95.3, 89.5, 95.1, 79.8, 88.6, 100]
},
sun_radiation: {
sun_radiation_unit: "w/m^2",
sun_radiation_value: [null, 0, 82, 293, 227, 39, 20, 0]
},
total_precipitation: {
total_precipitation_unit: "mm",
total_precipitation_value: [null, 0, 0, 0, 0.1, 0, 0, 0.1]
},
convective_precipitation: {
convective_precipitation_unit: "mm",
convective_precipitation_value: [null, 0, 0, 0, 0, 0, 0, 0]
},
ice_pellets: {
ice_pellets_unit: "-",
ice_pellets_value: [null, 0, 0, 0, 0, 0, 0, 0]
},
snow: {
snow_unit: "-",
snow_value: [null, 0, 0, 0, 0, 0, 0, 0]
},
freezing_rain: {
freezing_rain_unit: "-",
freezing_rain_value: [null, 0, 0, 0, 0, 0, 0, 0]
}
}
})
//probably i have too take the datetime_forecast_start and add 3 hours x time the length of the array of the data_value to make a new array full of date with 3 hours steps ...so lets look in d3js time functions ...
datedep = "2020-03-03 12:00 UTC"
day = d3.timeDay(new Date())
timeD3.utcMinutes(datedep)
line = d3
.line()
.defined(d => !isNaN(d))
.x((d, i) => x(i * 3))
.y(d => y(d))
y = d3
.scaleLinear()
.domain([0, d3.max(meteo.data.wind_direction.wind_direction_value)])
.range([height - margin.bottom, margin.top])
x = d3
.scaleLinear()
.domain([0, 24])
.range([margin.left, width - margin.right])
height = 500
margin = ({ top: 20, right: 30, bottom: 30, left: 40 })
xAxis = g =>
g.attr("transform", `translate(0,${height - margin.bottom})`).call(
d3
.axisBottom(x)
.ticks(width / 80)
.tickSizeOuter(0)
)
yAxis = g =>
g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y))
.call(g => g.select(".domain").remove())
.call(g =>
g
.select(".tick:last-of-type text")
.clone()
.attr("x", 3)
.attr("text-anchor", "start")
.attr("font-weight", "bold")
.text(meteo.data.wind_direction.wind_direction_unit)
)
d3 = require("d3@5")
timeD3 = require("d3-time")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
