31:T8e3,viewof catted = { // const sharedConfig = { // axis: { labelFont: "Jost", titleFont: "Jost" }, // legend: { labelFont: "Jost", titleFont: "Jost" }, // title: { labelFont: "Jost", titleFont: "Jost" }, // text: { font: "Jost" } // }; const defaultFont = { labelFont: "Jost", titleFont: "Jost" }; const sharedConfig = { style: { // "guide-label": defaultFont, // "guide-title": defaultFont, // "group-title": defaultFont }, axis: { labelFont: "Jost", titleFont: "Jost" // domain: false // domainColor: 'white' }, text: { font: "Jost" } }; const x = vl .x() .fieldT('timestamp') .axis({ labelAngle: 45, tickCount: { interval: "date", step: 3 }, format: " %a %b %d, %H %p" // type: "time" }); // const y = vl.y().fieldQ("flipper_length_mm").scale({ zero: false }); // const color = vl.color().fieldN("species").scale({ scheme: "set2" }); const temp = vl .data(observations) .config(sharedConfig) .transform( { calculate: "datum.temperature * (9/5) + 32 ", as: "tempC" }, { calculate: "datum.dewpoint * (9/5) + 32", as: "dewpointC" } ) .encode(x) .layer( vl.markLine().encode(vl.y().fieldQ('tempC')), vl.markLine({ stroke: 'red' }).encode(vl.y().fieldQ('dewpointC')) ); const windSpeed = vl .data(observations) .config(sharedConfig) // .transform( // vl.filter({ field: 'timestamp', lte: { year: 2020, month: 9, date: 19 } }) // ) // .title("Wind Speed and Direction") .encode( x, vl .y() .title("Wind Speed (mph)") .fieldQ('windSpeed') .axis({ format: ".1f" }) ) .layer( vl.markLine({ stroke: 'gray', opacity: .2 }), vl .markPoint({ shape: 'wedge' }) .encode(vl.angle().fieldQ('windDirection')) // vl // .markText({ align: 'center', dy: 12 }) // .encode(vl.text().fieldQ('windSpeed')) ); return ( vl .vconcat(temp, windSpeed) .config(sharedConfig) // .data(vizdata2) .transform( vl.filter({ field: 'timestamp', lte: { year: 2020, month: 9, date: 19 } }) ) .render() ); }32:[] 2f:{"title":"NWS Hourly Forecast in Vega-Lite","cells":[{"id":0,"value":"md`# NWS Hourly Forecast in Vega-Lite\n\nThis is a rough recreation of the NWS Hourly Forecast data plots using Vega-Lite.\n\n- [NWS API Docs](https://weather-gov.github.io/api/general-faqs\n) \n- [NWS example](https://forecast.weather.gov/MapClick.php?lat=40.80145500000003&lon=-73.93745499999994#.X2pF8y9h1TY\n)\n\n### Vega-Lite resources\n- [Intro to Vega-Lite](https://observablehq.com/@observablehq/vega-lite)\n- [Facets/Layers in Vega-Lite](https://observablehq.com/@observablehq/layers-facets-concat?collection=@observablehq/observable-for-vega-lite)\n\n- [Repeat + Layer VL Pattern](https://vega.github.io/vega-lite/examples/repeat_layer.html)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"viewof config = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"chart = vl\n .markLine()\n .title(`Historical observations for ${config.station}`)\n .data(forecast)\n .encode(\n vl\n .x()\n .fieldT('startTime')\n .axis({\n labelAngle: 45\n }),\n vl.y().fieldQ('temperature')\n )\n .render()","pinned":false,"hidden":false,"mode":"ojs"},{"id":187,"value":"md` # Historical observations\n\n[Previous weather observations](https://forecast.weather.gov/MapClick.php?lat=40.8015&lon=-73.9375&unit=0&lg=english&FcstType=graphical)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":340,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":651,"value":"forecast = fetch(\n `https://api.weather.gov/gridpoints/${config.station}/forecast/hourly`\n)\n .then(resp => resp.json())\n .then(data => data.properties.periods)\n .then(data =>\n data.map(d => ({\n temperature: d.temperature,\n windSpeed: d.windSpeed.split(\" \")[0],\n windDirection: d.windDirection,\n shortForecast: d.shortForecast,\n isDaytime: d.isDaytime,\n startTime: d3.isoParse(d.startTime)\n }))\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":753,"value":"d3.extent(forecast.map(d => d.startTime))","pinned":true,"hidden":false,"mode":"ojs"},{"id":163,"value":"observations = await fetch(\"https://api.weather.gov/stations/KNYC/observations\")\n .then(resp => resp.json())\n .then(data => {\n return jp.query(data, \"$.features[*].properties\").map(d => ({\n timestamp: d3.isoParse(d.timestamp),\n temperature: d.temperature.value,\n dewpoint: d.dewpoint.value,\n heatIndex: d.heatIndex.value,\n windSpeed: d.windSpeed.value,\n windDirection: d.windDirection.value,\n skyCover: d.visibility.value,\n relativeHumidity: d.relativeHumidity.value\n }));\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":756,"value":"d3.extent(observations.map(d => d.timestamp))","pinned":true,"hidden":false,"mode":"ojs"},{"id":571,"value":"luxon = require(\"https://moment.github.io/luxon/amd/luxon.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":383,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":380,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":467,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":473,"value":"// Parsing date time\n//\"2020-09-25T21:51:00+00:00\n{\n var ft = d3.utcFormat(\"%Y-%m-%dT%H:%M:%S.%LZ\");\n return d3.isoParse(\"2020-09-25T21:51:00+00:00\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":698,"value":"import { form } from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"jp = require('jsonpath')","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"import { vl } from \"@vega/vega-lite-api\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}