Full-stack data visualizer.
That means I enjoy doing everything, from raw data to revealing & pretty interactive data visualizations.
Public
Edited
Jun 23, 2023
1 star
Plot.plot({
width: 1200,
height: 330,
marginLeft: 60,
marginRight: 60,
marginTop: 80,
facet: {label: null},
color: {
type: "linear",
domain: [0, 15],
range: ["white", "gold"],
interpolate: d3.interpolateRgb.gamma(3.2),
legend: true,
label: "Sun hours"
},
y: {domain: [0, 1]},
marks: [
Plot.axisX({anchor: "top", fontSize: 18, ticks: seasons.map(d => d.middle), tickSize: 0, tickFormat: (d, i) => `${["🍂 Fall", "❄️ Winter", "🌱 Spring", "⛱️ Summer"][i]}`}),
Plot.axisX({anchor: "top", ticks: seasons.map(d => d.start), tickSize: -240, color: "lightgrey", tickFormat: []}),
Plot.axisX({anchor: "bottom", tickSize: 0, tickFormat: "%b%y"}),
//Plot.rectX(seasons, {x1: "start", x2: "end", y1: 0.7, y2:1 , fill: "fill", stroke: "season"}),
Plot.ruleY(cloudyrows, {y: 0.8, x1: "start", x2: "end", fy: "name", strokeWidth: 4, stroke: "purple"}),
Plot.textY(cloudyrows, {y: 0.8, dy: -7, x: "start", text: "count", fy: "name", textAnchor: "start"}),
Plot.ruleX(citiessun, {
x: "date",
y: 0.7,
stroke: "sun",
strokeWidth: 2,
fy: "name",
tip: true,
title: (d) => d3.timeFormat("%d %B")(d.date) + "\n" + d.sun + 'h'
}),
Plot.ruleX(citiessun, Plot.pointerX({x: "date", y: 0.7, fy: "name", stroke: "purple"}))
]
})
citiessun = FileAttachment("_citiessun.csv").csv({ typed: true })
seasonsrdata = FileAttachment("seasonSunandrain@6.csv").csv({ typed: true })
yearsun = FileAttachment("yearsunshine@7.csv").csv({ typed: true })
daylight = FileAttachment("daylight_season.csv").csv({ typed: true })
import {footnote} from "@jashkenas/markdown-style-footnotes"
I love the minimap and the file uploads replacement (updating automatically and giving the file an updated name with thef file version)
Imports are great of course. Save tons of time of copy-pasting. At the same time the author is credit and you can keep record where the code cames.
understanding the transform grouping and mapping the data to have a sum of everything was quite painful (i still calculate the text with a d3.sum function)
I tried to reduce data by data period an take first and last alue and I couldn't. I tried with Plot.map and d3.rollup
I'd rather go back to R to modify the data instead of playing with it inside observable
Help community is geretr. Fil @ mike answer within hours very complete answer (link al observable.) When looking for a solution, Observable Community is the place where to go. I was a little lost when googling my questions and find them betwwen onserbable and observable plot documentation. hope to find more answers to my questions. Documentation is clear but I find it short in specific examples. eg how to format monthly from yearly in the axis). Once I moved to obsebable community i found complete and dedicated answers by Fil and Mike. i am new here, I expect to get used to it.
I din't find working answers on the documentation or the cumminity (eg: custom facets sort, custom axis tick labels) i might not understand well ho w everything works anyway
yearly data hasn't to start on 1st january necesarily. i move the beggining to the autumn start, as we are talking about weather, a find the seasons a more natural way of dividing the year. Aitumn is the beginning of the end, but is the return from holidays, liye a new year for us who always started school, college and university in september :)
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.
