Public
Edited
May 17, 2023
1 fork
{
// const date = vl.param('date').value(1).bind(vl.slider(1, 365, 1)).name(Date(new Date(2023, 0).setDate('date')));
// const months = vl.param("months").value("January").bind(vl.menu(['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']).name("Month: "));
// const day = vl.param("day").value(1).bind(vl.menu([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31]).name("Day: "));
const latitude = vl.param('lat').value(25.00).bind(vl.slider(25.00, 50.00, 0.0001).name("Latitude (Degrees N): "));
// const t = [put equation calculations here];
const solar = vl.param("sol").value(-23.45 * Math.cos((360 / 365) * (date + 10)));
// const t = vl.param("calc").value((2 * Math.acos(-1 * Math.tan(vl.fieldQ('lat')) * Math.tan({expr: 'sol'}))) / 15);
return vl.markSquare() // sample data has a bunch of US county coordinates
.data(sampleData)
.params([latitude, solar])
.title({ text: {expr : 'sol'} })
.encode(
vl.longitude().fieldQ('lng'),
vl.latitude().fieldQ('lat'),
// currently using latitude to determine color; will change to equation answer later
// vl.color().fieldQ((2 * Math.acos(-1 * Math.tan(vl.fieldQ("lat")) * Math.tan({expr : 'sol'}))) / 15).scale({ scheme: "viridis" })
vl.color().fieldQ('lat').scale({ scheme: "viridis" }).title("change color to t results later")
)
.render()
}
sampleData = FileAttachment("uscounties.csv").csv({typed: true})
import {vl} from "@vega/vega-lite-api-v5"
import {us} from "@observablehq/us-geographic-data"
import {nation} from "@observablehq/plot-us-map"
import {counties} from "@observablehq/plot-us-map"
import {states} from "@observablehq/plot-us-map"
vl.markSquare({size: 2, opacity: 1})
.data('data/zipcodes.csv')
.project(
vl.projection('albersUsa')
)
.encode(
vl.longitude(),
vl.latitude(),
vl.color().fieldN('digit')
)
.width(width)
.height(Math.floor(width / 1.75))
.autosize({type: 'fit-x', contains: 'padding'})
.config({view: {stroke: null}})
.render()
var mapCoords = this.geoCoordsToMapCoords(latitude, longitude);
x = mapCoords.x;
y = mapCoords.y;
self.countries.append('svg:circle')
.attr("r", 5)
.style("fill", "steelblue")
.attr("cx", x)
.attr("cy", y);
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.
