📷 instagram.com/nestor2509
linea = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, width])
const path = d3.geoPath(projection)
const h_ = svg.selectAll('.legend_h').data(horas).join('g').attr('class', 'legend_h').attr('transform', (d,i) => `translate(${i*131 + 155} 30)`)
h_.append('text').text(d=>d+':00').attr('text-anchor', 'middle')
const m_ = svg.selectAll('.legend_m').data(str_meses).join('g').attr('class', 'legend_m').attr('transform', (d,i) => `translate(50 ${i*75 + 75})`)
m_.append('text').text(d=>d).attr('text-anchor', 'middle')
meses.map(m => {
horas.map((h,i) => {
const night = d3.geoCircle()
.radius(90)
.center(antipode(sun(1,m,h)))
()
const paises = svg.append('g').attr('transform', `scale(.1) translate(${1300*i + 1100} ${m*750 + 500})`)
paises.selectAll('path')
.data(mundo.features)
.join('path')
.attr('fill', '#999')
.attr('stroke', '#333')
.attr('d',d3.geoPath(projection))
paises.append('path').attr('d', d=>path(sphere))
.attr('fill', 'none')
.attr('stroke', '#333')
.attr('stroke-width', 3)
paises.append('path').attr('d', d=>path(night))
.attr('fill', 'rgba(0,0,0,0.3)')
.attr('stroke', '#333')
.attr('stroke-width', 3)
})
})
return svg.node()
}
str_meses = ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre']
horas = Array.from({length: 6}, (x,i) => i*4)
meses = Array.from({length: 12}, (x,i) => i)
mundo = d3.json('https://gist.githubusercontent.com/nestorandrespe/ac4c33022872c39d55da9b645527de2b/raw/7d848fb5faa553e9b8f6dfcf0279c3852c3dc0d4/World%2520contours%2520low.json')
sphere = ({type: "Sphere"})
antipode = ([longitude, latitude]) => [longitude + 180, -latitude]
projection = d3.geoBertin1953()
solar = require("solar-calculator@0.3/dist/solar-calculator.min.js")
sun(1,1,2)
sun = (d,m,h=0) => {
const now = new Date(2020,m,d,h,0,0,0);
// console.log(new Date())
const day = new Date(2020,m,d).setUTCHours(0, 0, 0, 0);
const t = solar.century(day);
const longitude = (day - now) / 864e5 * 360 - 180;
return [longitude - solar.equationOfTime(t) / 4, solar.declination(t)];
}
import { renderTextArray, renderTextPaths } from '@meetamit/hershey-fonts'
html`<style>
.legend_h, .legend_m {font-family: 'Lato', sans-serif;
}
</style>`
html`<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap" rel="stylesheet">`
d3 = require('d3@6',"d3-geo@2", "d3-geo-projection@3")
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.
