The avatar for @faisalbsl21
Durbar Bagerhat
Hi, I'm Faisal! I'm a digital content creator who loves to create content for the web. I specialize in creating content for social media platforms, such as Facebook, Instagram, and Twitter. My goal is to create content that engages and entertains, while i
Public
Durbar Bagerhat
Edited
Jan 19, 2023
Fork of Raster Mark / Observable Plot
6
Durbar Bagerhat
CSS gradient generatorCSS gradient generatorRaster Mark / Observable PlotBagerhat PortalBagerhat Portal
Raster Mark / Observable Plot
GitHub API Starter
Insert cell
Insert cell
ca55-south.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
iris.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
iris.csv
Type SQL, then Shift-Enter. Ctrl-space for more options.

Insert cell
ca55
Type SQL, then Shift-Enter. Ctrl-space for more options.

Insert cell
volcano1 = FileAttachment("ষাট_গম্বুজ_মসজিদ,_বাগেরহাটের_সম্মুখ_দৃশ্য (1).jpg").json()
Insert cell
volcano2 = FileAttachment("volcano.json").json()
Insert cell
sheikhTonmoyMp = FileAttachment("Sheikh Tonmoy Mp.png").image()
Insert cell
vivaMagentaLeavesPattern = FileAttachment("Viva Magenta-leaves-pattern.png").image()
Insert cell
Insert cell
Insert cell
volcano = FileAttachment("ষাট_গম্বুজ_মসজিদ,_বাগেরহাটের_সম্মুখ_দৃশ্য (1).jpg").json()
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Plot.raster(volcano.values, {width: volcano.width, height: volcano.height}).plot()
Insert cell
Insert cell
Insert cell
ca55 = FileAttachment("ca55-south.csv").csv({typed: true})
Insert cell
Plot.raster(ca55, {x: "LONGITUDE", y: "LATITUDE", fill: "MAG_IGRF90"}).plot()
Insert cell
Insert cell
Insert cell
Insert cell
projection = ({
type: "mercator",
domain: {
type: "MultiPoint",
coordinates: ca55.map((d) => [d.LONGITUDE, d.LATITUDE])
}
})
Insert cell
Plot.plot({
projection,
inset: 10,
height: 500,
color: { type: "diverging" },
marks: [
Plot.line(ca55, {
x: "LONGITUDE",
y: "LATITUDE",
z: "LINE_NUMB-SEG",
markerEnd: "arrow",
strokeOpacity: 0.3,
strokeWidth: 1
}),
Plot.raster(ca55, {
x: "LONGITUDE",
y: "LATITUDE",
fill: "MAG_IGRF90",
pixelSize: 5,
imageRendering: "pixelated"
})
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
plotca = Plot.plot({
projection,
inset: 10,
height: 500,
marginBottom: 2,
color: { type: "diverging" },
marks: [
Plot.raster(ca55, {
x: "LONGITUDE",
y: "LATITUDE",
fill: "MAG_IGRF90",
interpolate: "nearest"
}),
Plot.frame()
]
})
Insert cell
Insert cell
Plot.plot({
projection,
inset: 10,
height: 500,
marginBottom: 2,
color: { type: "diverging" },
marks: [
Plot.raster(ca55, {
x: "LONGITUDE",
y: "LATITUDE",
fill: "MAG_IGRF90",
interpolate: "barycentric"
}),
Plot.frame()
]
})
Insert cell
Insert cell
Plot.plot({
projection,
inset: 10,
height: 500,
marginBottom: 2,
color: { type: "diverging" },
marks: [
Plot.raster(ca55, {
x: "LONGITUDE",
y: "LATITUDE",
fill: "MAG_IGRF90",
interpolate: "random-walk"
}),
Plot.frame()
]
})
Insert cell
Insert cell
Plot.plot({
projection,
inset: 10,
height: 500,
marginBottom: 2,
color: { type: "diverging" },
marks: [
Plot.raster(ca55, {
x: "LONGITUDE",
y: "LATITUDE",
fill: "MAG_IGRF90",
interpolate: "random-walk",
blur: 5
}),
Plot.frame()
]
})
Insert cell
Insert cell
Insert cell
iris = FileAttachment("iris.csv").csv({typed: true})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
projection,
inset: 10,
height: 500,
opacity: { transform: Math.abs },
marks: [
Plot.line(ca55, {
x: "LONGITUDE",
y: "LATITUDE",
z: "LINE_NUMB-SEG",
strokeWidth: 1,
markerEnd: "arrow"
}),
Plot.raster(ca55, {
x: "LONGITUDE",
y: "LATITUDE",
fill: "steelblue",
fillOpacity: "MAG_IGRF90",
interpolate: "nearest"
})
]
})
Insert cell
Insert cell
function mandelbrot(x, y) {
for (let n = 0, zr = 0, zi = 0; n < 80; ++n) {
[zr, zi] = [zr * zr - zi * zi + x, 2 * zr * zi + y];
if (zr * zr + zi * zi > 4) return n;
}
// undefined if it has converged, for a transparent pixel
}
Insert cell
Plot.plot({
height: 500,
marks: [
Plot.raster({
fill: mandelbrot,
pixelSize: 1 / devicePixelRatio,
x1: -2,
x2: 1,
y1: -1.164,
y2: 1.164
})
]
})
Insert cell
Insert cell
{
const lin = (x) => x / (4 * Math.PI);
const { sin, cos } = Math;
return Plot.plot({
width: 450,
height: 420,
color: { type: "diverging" },
fx: { tickFormat: (f) => f?.name },
fy: { tickFormat: (f) => f?.name },
marks: [
Plot.raster({
fill: (x, y, { fx, fy }) => fx(x) * fy(y),
fx: [sin, sin, lin, lin],
fy: [cos, lin, lin, cos],
x1: 0,
y1: 0,
x2: 4 * Math.PI,
y2: 4 * Math.PI,
interval: 0.2
}),
Plot.frame()
]
});
}
Insert cell
Insert cell
Insert cell
iriscolor = {
const color = irisChart.scale("color");
return (species) => textcolor(species, color.apply(species));
}
Insert cell
function textcolor(content, style = {}) {
const {
background,
color = d3.lab(background).l >= 60 ? "#111" : "white",
padding = "0 5px",
borderRadius = "4px",
fontWeight = 800,
...rest
} = typeof style === "string" ? {background: style} : style;
return htl.html`<span style=${{
background,
color,
padding,
borderRadius,
fontWeight,
...rest
}}>${content}</span>`;
}
Insert cell

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.
Learn more