local function create()
local imageSize=128*3
local weatherdata=require("Module:気候/data")
local projection=require("Module:地図/正射図法")({imageSize,imageSize},2500000/imageSize,{134.3,35.5})
local reader=require("Module:地図/行政区域")(projection)
local pointlist={}
for _,v in ipairs(weatherdata) do
table.insert(pointlist,{text=v.name,p=projection.convert({v.location[1],v.location[2]}),t={v.tmin,v.t,v.tmax},r=v.p})
end
local indexlist={}
for i=0,64 do
table.insert(indexlist,i)
end
return {
width=imageSize*2,
height=imageSize,
signals={
{
name="active",
init=nil,
streams={
{
type="path:mousemove",
expr="(eventX()-128*3-datum.p[0])*(eventX()-128*3-datum.p[0])+(eventY()-datum.slidey)*(eventY()-datum.slidey)<16*16?datum:shadow"
},
{
type="path:mouseout",
expr="shadow"
}
}
},
{
name="shadow",
init=nil,
streams={
{
type="path:click",
expr="active"
}
}
}
},
data={
{
name="index",
values=indexlist
},
{
name="month",
values={0,1,2,3,4,5,6,7,8,9,10,11}
},
{
name="point",
values=pointlist,
transform={
{
type="formula",
field="slidey",
expr="datum.p[1]+8"
},
{
type="voronoi",
x="p[0]",
y="slidey",
clipExtent={{0,0},{imageSize,imageSize}}
}
}
},
},
marks={
{
type="group",
properties={
enter={
x={value=imageSize},
y={value=0},
width={value=imageSize},
height={value=imageSize},
clip={value=true},
fill={value="paleturquoise"}
}
},
marks={
{
type="path",
properties={
enter={
path={value=reader.getCoast()},
fill={value="white"},
stroke={value="black"},
strokeWidth={value=0.25}
}
}
},
{
type="path",
properties={
enter={
path={value=reader.getInnerPath(1)},
stroke={value="black"},
strokeWidth={value=0.5},
strokeDash={value={10,2,2,2}}
}
}
},
{
type="symbol",
from={data="point"},
properties={
enter={
size={value=8},
fill={value="crimson"},
x={field="p[0]"},
y={field="p[1]"}
}
}
},
{
type="symbol",
from={
data="point",
transform={
{
type="filter",
test="datum==active"
}
}
},
properties={
update={
size={value=64},
fill={value="deeppink"},
stroke={value="black"},
strokeWidth={value=0.5},
x={field="p[0]"},
y={field="p[1]"}
}
}
},
{
type="path",
from={data="point"},
properties={
enter={
fill={value="transparent"},
path={field="layout_path"}
}
}
}
}
},
{
type="rect",
from={
data="index",
transform={
{
type="filter",
test="datum.data<61"
},
{
type="formula",
field="y",
expr=imageSize.."-32-datum.data*5"
}
}
},
properties={
update={
fill={
{
test="datum.data%10==0",
value="black"
},
{
test="datum.data%5==0",
value="silver"
},
{
value="whitesmoke"
}
},
x={value=32},
y={field="y"},
width={value=imageSize-32*2+1},
height={value=1}
}
}
},
{
type="rect",
from={
data="index",
transform={
{
type="filter",
test="datum.data<2"
},
{
type="formula",
field="x",
expr="32+("..imageSize.."-32*2)*datum.data"
}
}
},
properties={
update={
fill={value="black"},
x={field="x"},
y={value=imageSize-32-50*6},
width={value=1},
height={value=50*6+1}
}
}
},
{
type="text",
from={
data="index",
transform={
{
type="filter",
test="datum.data<7"
},
{
type="formula",
field="y",
expr=imageSize.."-32-datum.data*50"
},
{
type="formula",
field="t",
expr="datum.data*10-20"
}
}
},
properties={
update={
fill={value="black"},
x={value=20},
y={field="y"},
align={value="center"},
baseline={value="middle"},
fontSize={value=12},
text={field="t"}
}
}
},
{
type="text",
from={
data="index",
transform={
{
type="filter",
test="datum.data<7"
},
{
type="formula",
field="y",
expr=imageSize.."-32-datum.data*50"
},
{
type="formula",
field="t",
expr="datum.data*100"
}
}
},
properties={
update={
fill={value="black"},
x={value=imageSize-16},
y={field="y"},
align={value="center"},
baseline={value="middle"},
fontSize={value=12},
text={field="t"}
}
}
},
{
type="text",
from={
data="index",
transform={
{
type="filter",
test="datum.data<4"
},
{
type="formula",
field="x",
expr="datum.data<2?24:("..imageSize.."-32)"
},
{
type="formula",
field="y",
expr="datum.data%2==0?18:32"
},
{
type="formula",
field="text",
expr="['気温','（℃）','降水量','（mm）'][datum.data]"
}
}
},
properties={
update={
fill={value="black"},
x={field="x"},
y={field="y"},
align={value="center"},
baseline={value="middle"},
fontSize={value=12},
text={field="text"},
font={value="TakaoGothic"}
}
}
},
{
type="text",
from={
data="month",
transform={
{
type="formula",
field="x",
expr=(imageSize/2).."+(datum.data*2-11)*13"
},
{
type="formula",
field="m",
expr="datum.data+1"
}
}
},
properties={
update={
fill={value="black"},
x={field="x"},
y={value=imageSize-20},
align={value="center"},
baseline={value="middle"},
fontSize={value=12},
text={template="{{datum.m}}月"},
font={value="TakaoGothic"}
}
}
},
{
type="rect",
from={
data="index",
transform={
{
type="filter",
test="active!=null & datum.data<12"
},
{
type="formula",
field="x",
expr=(imageSize/2).."+(datum.data*2-11)*13"
},
{
type="formula",
field="y",
expr="round("..imageSize.."-32-active.r[datum.data]/100*50)"
}
}
},
properties={
update={
fill={value="royalblue"},
fillOpacity={value=0.65},
xc={field="x"},
y={field="y"},
width={value=12},
y2={value=imageSize-32}
}
}
},
{
type="group",
from={
data="index",
transform={
{
type="filter",
test="active!=null & datum.data<3"
},
{
type="formula",
field="z",
expr="active.t[datum.data]"
},
{
type="facet",
groupby={"data"},
transform={
{
type="cross",
with="index"
},
{
type="filter",
test="datum.b.data<12"
},
{
type="formula",
field="x",
expr=(imageSize/2).."+(datum.b.data*2-11)*13"
},
{
type="formula",
field="y",
expr=imageSize.."-32-(datum.a.z[datum.b.data]+20)/10*50"
},
{
type="formula",
field="color",
expr="['blue','black','red'][datum.a.data]"
}
}
}
}
},
marks={
{
type="line",
properties={
update={
stroke={field="color"},
x={field="x"},
y={field="y"}
}
}
},
{
type="symbol",
properties={
update={
fill={field="color"},
size={value=16},
x={field="x"},
y={field="y"}
}
}
},
}
},
{
type="text",
properties={
update={
fill={value="black"},
x={value=imageSize/2},
y={value=24},
align={value="center"},
baseline={value="middle"},
fontSize={value=24},
text={
{
test="active!=null",
template="{{active.text}}"
},
{
template=""
}
}
}
}
}
}
}
end
return {
_=function(frame)
return frame:extensionTag('graph',mw.text.jsonEncode(create()),{mode='interactive'})
end
}
モジュールの解説[作成]