Designer, Artist, Researcher, Educator @sugi2000lab .
co-translator for Japanese edition of “Generative Design” and “Code as Creative Medium”.
Chinese Cities are Suffering from More Extreme Hot DaysWinner: Team Data Whale 🐳 -What Happens when El Niño Comes to Vietnam?Runner-Up, Team Periscopic - Building Resilience to Climate Change in South AsiaCO₂ Emissions From Burning Of Diesel: A Disasterous Journey from 1965 to 2021Asia’s Regenerative Energy FutureAquaculture As A Climate-Resilient Option For Sustainable Global Food ProductionFlowers and TracksPantry Circle for the ADB "Visualizing Climate Change & Resilience Challenge"Finalist, Team Viz - Philippines - Plastic Waste and its Sachet EconomyUntitled
Are typhoons increasing?
hemisphere = ({ year, month }, config = {}) => {
const { width = 600, height = Math.min(width, 600) } = config;
// const height = Math.min(width, 600);
const context = DOM.context2d(width, height);
const projection = d3.geoOrthographic().fitExtent(
[
[10, 10],
[width - 10, height * 2 - 20]
],
sphere
);
const path = d3.geoPath(projection, context);
function render(country, arc) {
context.clearRect(0, 0, width, height);
context.beginPath(),
context.rect(0, 0, width, height),
(context.fillStyle = "hsl(200, 50%, 44%)"),
context.fill();
context.beginPath(),
path(sphere),
// (context.fillStyle = "#fff"),
(context.fillStyle = "hsl(200, 6%, 96%)"),
context.fill();
context.beginPath(),
path(land),
(context.fillStyle = "#ccc"),
context.fill();
// context.beginPath(),
// path(country),
// (context.fillStyle = "#f00"),
// context.fill();
// context.beginPath(),
// path(borders),
// (context.strokeStyle = "#fff"),
// (context.lineWidth = 0.5),
// context.stroke();
context.beginPath(),
// path(typhoonPath),
// path(typhoonPathOfMonth(month)),
path(getTyphoonsPath(typhoonsOfDate({ year, month }))),
// (context.strokeStyle = "rgba(255,100,100,0.5)"),
(context.strokeStyle = "hsla(0, 100%, 80%, 0.5)"),
(context.lineWidth = 0.75),
context.stroke();
context.beginPath(),
path(sphere),
(context.strokeStyle = "#002"),
(context.lineWidth = 1),
context.stroke();
context.beginPath(), path(arc), context.stroke();
if (year) {
(context.font = `bold ${height * 0.25}px Arial`),
(context.fillStyle = "hsla(200, 50%, 0%, 0.5)"),
(context.textAlign = "left"),
context.fillText(year, 30, height * 0.28);
}
if (month) {
(context.font = `bold ${height * 0.25}px Arial`),
(context.fillStyle = "hsla(200, 50%, 0%, 0.5)"),
(context.textAlign = "right"),
context.fillText(monthLabels.at(month - 1), width - 30, height * 0.28);
}
return context.canvas;
}
projection.rotate([230, 0, 0]);
return render(japan);
}
sphere = ({ type: "Sphere" })
japan = countries.find((d) => d.properties.name === "Japan")
countries = topojson.feature(world, world.objects.countries).features
borders = topojson.mesh(world, world.objects.countries, (a, b) => a !== b)
land = topojson.feature(world, world.objects.land)
world = d3.json("https://cdn.jsdelivr.net/npm/world-atlas@2/countries-50m.json")
Inputs.table(data)
typhoonsOfDate({ year: 2022 })
getTyphoonsPath = (typhoons) => ({
type: "MultiLineString",
coordinates: typhoons.map((d) => d.map((e) => [e.longitude, e.latitude]))
})
typhoonsOfDate = ({ year, month }) => {
return [...typhoons.values()].filter((d) =>
year
? d.at(0).date.getFullYear() === year
: d.at(0).date.getMonth() + 1 === month
);
}
typhoonsOfMonth = (month) => {
return [...typhoons.values()].filter(
(d) => d.at(0).date.getMonth() + 1 === month
);
}
typhoonsOfMonth(9)
typhoonPathOfMonth = (month) => ({
type: "MultiLineString",
coordinates: typhoonsOfMonth(month).map((d) =>
d.map((e) => [e.longitude, e.latitude])
)
})
typhoonPath = ({
type: "MultiLineString",
coordinates: [...typhoons.values()].map((d) =>
d.map((e) => [e.longitude, e.latitude])
)
})
[...typhoons.values()].map((d) => d.map((e) => 0))
typhoonsRollup = d3
.rollups(
[...typhoons],
(v) => v.length,
([number, d]) => d.at(0).date.getMonth() + 1,
([number, d]) => d.at(0).date.getFullYear()
)
.map(([month, d]) => d.map(([year, count]) => ({ year, month, count })))
.flat()
typhoonsByMonth = d3.group(
[...typhoons],
([number, d]) => d.at(0).date.getMonth() + 1,
([number, d]) => d.at(0).date.getFullYear()
)
_data = getData(uris.at(0))
years = d3.range(2022, 2000, -1)
d3.csv(proxy + uris.at(-1))
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.