1920 × 1080 Seen as a design The artboard itself, drawn live — sharp at any zoom Structure, margins and columns overlaid
1920 × 1080 Seen as a design The artboard itself, drawn live — sharp at any zoom Structure, margins and columns overlaid
Copy and paste, or save a file and hand it over. For a machine with no network, one “Everything” file is enough.
Everything in this panel, including the contents behind each URL, in one Markdown file — Large, so it goes as a file (copy is for 32 KB and under)
Produce one slide to the following specification. - Canvas 1920 × 1080 - Margin top 100 right 140 bottom 100 left 140 ## Type (px against a 1920px canvas) title 46px / 700 / tracking 0.01em subtitle 22px / 500 axisTitle 22px / 700 tick 20px / 500 axisLabel 20px / 500 gene 20px / 500 legend 20px / 500 takeaway 28px / 500 note 20px / 400 ## Colour Ground #FFFFFF / Surface #F4F6F9 / Ink #131820 / Muted #667183 / Accent #1F5FA8 / Rule #DBE1E9 ## Constraints — dropping these breaks it - Plot log₂ fold change on x and −log₁₀(p) on y; points higher up have stronger statistical significance. - Threshold lines separate significant changes that also pass the effect-size cutoff into increases and decreases. - Use this to screen tested changes by direction, not to interpret a generic correlation between two variables. - Twelve fictional genes; real analyses also require multiple-testing correction and experimental context. Replace the content with [your content]. Keep the measurements and colours as given. For an exact reproduction, use the verbatim HTML at https://design-vault.pages.dev/designs/volcano-plot-differential-expression/pattern.html.
/ai/designs/volcano-plot-differential-expression.json
format: slide-16x9
density: medium
layout:
kind: axis
canvas:
w: 1920
h: 1080
margin:
top: 100
right: 140
bottom: 100
left: 140
type:
title:
size: 46
weight: 700
tracking: 0.01em
subtitle:
size: 22
weight: 500
axisTitle:
size: 22
weight: 700
tick:
size: 20
weight: 500
axisLabel:
size: 20
weight: 500
gene:
size: 20
weight: 500
legend:
size: 20
weight: 500
takeaway:
size: 28
weight: 500
note:
size: 20
weight: 400
colors:
ground: "#FFFFFF"
surface: "#F4F6F9"
ink: "#131820"
muted: "#667183"
accent: "#1F5FA8"
rule: "#DBE1E9"
rules:
- Plot log₂ fold change on x and −log₁₀(p) on y; points higher up have stronger statistical significance.
- Threshold lines separate significant changes that also pass the effect-size cutoff into increases and decreases.
- Use this to screen tested changes by direction, not to interpret a generic correlation between two variables.
- Twelve fictional genes; real analyses also require multiple-testing correction and experimental context.{
"format": "slide-16x9",
"density": "medium",
"layout": {
"kind": "axis",
"canvas": {
"w": 1920,
"h": 1080
},
"margin": {
"top": 100,
"right": 140,
"bottom": 100,
"left": 140
}
},
"type": {
"title": {
"size": 46,
"weight": 700,
"tracking": "0.01em"
},
"subtitle": {
"size": 22,
"weight": 500
},
"axisTitle": {
"size": 22,
"weight": 700
},
"tick": {
"size": 20,
"weight": 500
},
"axisLabel": {
"size": 20,
"weight": 500
},
"gene": {
"size": 20,
"weight": 500
},
"legend": {
"size": 20,
"weight": 500
},
"takeaway": {
"size": 28,
"weight": 500
},
"note": {
"size": 20,
"weight": 400
}
},
"colors": {
"ground": "#FFFFFF",
"surface": "#F4F6F9",
"ink": "#131820",
"muted": "#667183",
"accent": "#1F5FA8",
"rule": "#DBE1E9"
},
"rules": [
"Plot log₂ fold change on x and −log₁₀(p) on y; points higher up have stronger statistical significance.",
"Threshold lines separate significant changes that also pass the effect-size cutoff into increases and decreases.",
"Use this to screen tested changes by direction, not to interpret a generic correlation between two variables.",
"Twelve fictional genes; real analyses also require multiple-testing correction and experimental context."
]
} /designs/volcano-plot-differential-expression/pattern.html — The artboard itself, font subset included — open it and this picture draws.
<!doctype html>
<meta charset="utf-8">
<title>処置後の遺伝子発現 — 上昇4、下降3が基準超え</title>
<meta name="dv-font" content="Zen Kaku Gothic New:400;500;700">
<link rel="stylesheet" href="./font.css">
<style>
:root{--ground:#FFFFFF;--surface:#F4F6F9;--ink:#131820;--muted:#667183;--accent:#1F5FA8;--rule:#DBE1E9;
--plot-color-1: #C16A24;
--plot-color-2: #8792A1;
}
*{box-sizing:border-box;margin:0}html,body{width:1920px;height:1080px}body{font-family:"Zen Kaku Gothic New","Hiragino Sans",sans-serif}
.artboard{width:1920px;height:1080px;padding:100px 140px;background:var(--ground);color:var(--ink)}.content{width:100%;height:100%;position:relative}.figure{position:absolute;left:-140px;top:-100px;width:1920px;height:1080px}
</style>
<div class="artboard" data-artboard><div class="content" data-content>
<svg class="figure" width="1920" height="1080" viewBox="0 0 1920 1080" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="架空の12遺伝子の差次発現volcano plot。横軸はlog2 fold change、縦軸はマイナスlog10 p値。効果量±1かつp値0.05未満の基準を超えた7遺伝子を上昇4、下降3に分類。">
<style>
.figure{font-family:"Zen Kaku Gothic New","Hiragino Sans",sans-serif}.ground{fill:var(--ground)}.ink{fill:var(--ink)}.muted{fill:var(--muted)}.rule{stroke:var(--rule)}
.title{font-size:46px;font-weight:700;letter-spacing:.01em}.subtitle{font-size:22px;font-weight:500}.axis-title{font-size:22px;font-weight:700}.tick{font-size:20px;font-weight:500}.legend{font-size:20px;font-weight:500}.gene{font-size:20px;font-weight:500}.takeaway{font-size:28px;font-weight:500}.note{font-size:20px;font-weight:400}
.sig-up{fill:var(--accent);stroke:var(--ground);stroke-width:3}.sig-down{fill:var(--plot-color-1);stroke:var(--ground);stroke-width:3}.other{fill:var(--plot-color-2);stroke:var(--ground);stroke-width:3}.threshold{stroke:var(--muted);stroke-width:2;stroke-dasharray:10 8}
</style>
<rect class="ground" width="1920" height="1080"/>
<text class="ink title" data-type="title" x="140" y="153">処置後の遺伝子発現 — 上昇4、下降3が基準超え</text>
<text class="muted subtitle" data-type="subtitle" x="140" y="201">架空の12遺伝子 / 閾値: |log₂ fold change| ≥ 1、p値 < 0.05</text>
<line class="rule" x1="140" y1="238" x2="1780" y2="238" stroke-width="2"/>
<text class="ink axis-title" data-type="axisTitle" x="960" y="294" text-anchor="middle">効果量と統計的な有意性を合わせ、候補の方向を分類</text>
<text class="muted legend" x="140" y="330">−log₁₀(p)</text>
<g class="rule" fill="none" stroke-width="1.5">
<line x1="505" y1="360" x2="1425" y2="360"/><line x1="505" y1="434" x2="1425" y2="434"/><line x1="505" y1="508" x2="1425" y2="508"/><line x1="505" y1="582" x2="1425" y2="582"/><line x1="505" y1="656" x2="1425" y2="656"/><line x1="505" y1="730" x2="1425" y2="730"/>
<line x1="505" y1="360" x2="505" y2="730"/><line x1="735" y1="360" x2="735" y2="730"/><line x1="965" y1="360" x2="965" y2="730"/><line x1="1195" y1="360" x2="1195" y2="730"/><line x1="1425" y1="360" x2="1425" y2="730"/>
</g>
<line class="threshold" x1="850" y1="360" x2="850" y2="730"/><line class="threshold" x1="1080" y1="360" x2="1080" y2="730"/><line class="threshold" x1="505" y1="634" x2="1425" y2="634"/>
<text class="muted tick" data-type="tick" x="1438" y="634" dominant-baseline="central">p=.05</text>
<g class="muted tick" text-anchor="end" dominant-baseline="central"><text data-type="tick" x="475" y="730">0</text><text x="475" y="656">1</text><text x="475" y="582">2</text><text x="475" y="508">3</text><text x="475" y="434">4</text><text x="475" y="360">5</text></g>
<g class="muted tick" text-anchor="middle" dominant-baseline="central"><text data-type="tick" x="505" y="760">−4</text><text x="735" y="760">−2</text><text x="850" y="760">−1</text><text x="965" y="760">0</text><text x="1080" y="760">+1</text><text x="1195" y="760">2</text><text x="1425" y="760">4</text></g>
<!-- Significant: Alpha(2.4,3.2), Beta(1.5,2.4), Theta(3.2,1.6), Mu(2.6,2.7),
Delta(-2.1,3.4), Epsilon(-1.4,2.1), Lambda(-3.0,4.4). -->
<g class="other"><circle cx="1023" cy="449" r="9"/><circle cx="643" cy="656" r="9"/><circle cx="977" cy="597" r="9"/><circle cx="758" cy="671" r="9"/><circle cx="1069" cy="693" r="9"/></g>
<g class="sig-up"><circle cx="1241" cy="493" r="11"/><circle cx="1138" cy="552" r="11"/><circle cx="1333" cy="612" r="11"/><circle cx="1264" cy="530" r="11"/></g>
<g class="sig-down"><circle cx="724" cy="478" r="11"/><circle cx="804" cy="575" r="11"/><circle cx="620" cy="404" r="11"/></g>
<g class="ink gene"><text data-type="gene" x="1260" y="488">Alpha</text><text x="1156" y="547">Beta</text><text x="1352" y="608">Theta</text><text x="1282" y="525">Mu</text><text x="744" y="473">Delta</text><text x="823" y="570">Epsilon</text><text x="640" y="399">Lambda</text></g>
<text class="ink legend" data-type="axisLabel" x="965" y="802" text-anchor="middle">log₂ fold change（負:発現低下 / 正:発現上昇）</text>
<g dominant-baseline="central"><circle class="sig-up" cx="615" cy="855" r="10"/><text class="ink legend" data-type="legend" x="638" y="855">有意な上昇</text><circle class="sig-down" cx="885" cy="855" r="10"/><text class="ink legend" x="908" y="855">有意な下降</text><circle class="other" cx="1155" cy="855" r="10"/><text class="ink legend" x="1178" y="855">両閾値未達</text></g>
<text class="ink takeaway" data-type="takeaway" x="960" y="930" text-anchor="middle">12候補中7遺伝子が両基準を超過 — 上昇4、下降3</text>
<line class="rule" x1="140" y1="974" x2="1780" y2="974" stroke-width="1"/><text class="muted note" data-type="note" x="140" y="1013">閾値は説明用。多重検定補正、実験計画、効果量の実用性を確認し、生物学的結論と同一視しない。</text>
</svg></div></div>
/designs/volcano-plot-differential-expression/font.css — Not in Everything
/* dv-subset v2 — generated by scripts/subset-font.mjs. Do not edit.
* font Zen Kaku Gothic New 400;500;700
* chars 124 (46cad173ffc8ed5b)
*
* pattern.html の文字だけを含む部分集合。描画時に外部へ取りに行かないよう同梱する。
* 版の文字を変えたら取り直すこと — 忘れると足りない字が豆腐になる。
* その取り忘れは pattern-entries.test.ts が上の指紋で検出する。
*/
@font-face {
font-family: 'Zen Kaku Gothic New';
font-style: normal;
font-weight: 400;
font-display: block;
src: url(./font-0.woff2) format('woff2');
unicode-range: U+28-29, U+2b, U+2e-35, U+37, U+3a, U+3c-3d, U+41-42, U+44-45, U+4c-4d, U+54, U+61-69, U+6c-70, U+73-75, U+7c, U+2014, U+2080-2082, U+2212, U+2265, U+3001-3002, U+3044, U+3048, U+304b-304c, U+3057-3058, U+305b-305c, U+3068-306a, U+306e-3070, U+308f, U+3092, U+3099, U+4e00, U+4e0a-4e0b, U+4e21, U+4e2d, U+4f1d, U+4f4e, U+5019, U+5024, U+51e6, U+5206, U+52b9, U+5408, U+540c, U+5411, U+57fa, U+591a, U+5b50, U+5b66, U+5b9a, U+5b9f, U+5f8c, U+6027, U+610f, U+65b9, U+6607, U+660e, U+6709, U+672a, U+679c, U+67b6, U+691c, U+6b63, U+6e96, U+7269, U+73fe, U+751f, U+7528, U+753b, U+767a, U+7684, U+78ba, U+7a7a, U+7d50, U+7d71, U+7f6e, U+88dc, U+8996, U+8a08, U+8a8d, U+8aac, U+8ad6, U+8ca0, U+8d85, U+904e, U+9054, U+907a, U+91cd, U+91cf, U+95be, U+964d, U+985e, U+9a13, U+ff08-ff09;
}
@font-face {
font-family: 'Zen Kaku Gothic New';
font-style: normal;
font-weight: 500;
font-display: block;
src: url(./font-1.woff2) format('woff2');
unicode-range: U+28-29, U+2b, U+2e-35, U+37, U+3a, U+3c-3d, U+41-42, U+44-45, U+4c-4d, U+54, U+61-69, U+6c-70, U+73-75, U+7c, U+2014, U+2080-2082, U+2212, U+2265, U+3001-3002, U+3044, U+3048, U+304b-304c, U+3057-3058, U+305b-305c, U+3068-306a, U+306e-3070, U+308f, U+3092, U+3099, U+4e00, U+4e0a-4e0b, U+4e21, U+4e2d, U+4f1d, U+4f4e, U+5019, U+5024, U+51e6, U+5206, U+52b9, U+5408, U+540c, U+5411, U+57fa, U+591a, U+5b50, U+5b66, U+5b9a, U+5b9f, U+5f8c, U+6027, U+610f, U+65b9, U+6607, U+660e, U+6709, U+672a, U+679c, U+67b6, U+691c, U+6b63, U+6e96, U+7269, U+73fe, U+751f, U+7528, U+753b, U+767a, U+7684, U+78ba, U+7a7a, U+7d50, U+7d71, U+7f6e, U+88dc, U+8996, U+8a08, U+8a8d, U+8aac, U+8ad6, U+8ca0, U+8d85, U+904e, U+9054, U+907a, U+91cd, U+91cf, U+95be, U+964d, U+985e, U+9a13, U+ff08-ff09;
}
@font-face {
font-family: 'Zen Kaku Gothic New';
font-style: normal;
font-weight: 700;
font-display: block;
src: url(./font-2.woff2) format('woff2');
unicode-range: U+28-29, U+2b, U+2e-35, U+37, U+3a, U+3c-3d, U+41-42, U+44-45, U+4c-4d, U+54, U+61-69, U+6c-70, U+73-75, U+7c, U+2014, U+2080-2082, U+2212, U+2265, U+3001-3002, U+3044, U+3048, U+304b-304c, U+3057-3058, U+305b-305c, U+3068-306a, U+306e-3070, U+308f, U+3092, U+3099, U+4e00, U+4e0a-4e0b, U+4e21, U+4e2d, U+4f1d, U+4f4e, U+5019, U+5024, U+51e6, U+5206, U+52b9, U+5408, U+540c, U+5411, U+57fa, U+591a, U+5b50, U+5b66, U+5b9a, U+5b9f, U+5f8c, U+6027, U+610f, U+65b9, U+6607, U+660e, U+6709, U+672a, U+679c, U+67b6, U+691c, U+6b63, U+6e96, U+7269, U+73fe, U+751f, U+7528, U+753b, U+767a, U+7684, U+78ba, U+7a7a, U+7d50, U+7d71, U+7f6e, U+88dc, U+8996, U+8a08, U+8a8d, U+8aac, U+8ad6, U+8ca0, U+8d85, U+904e, U+9054, U+907a, U+91cd, U+91cf, U+95be, U+964d, U+985e, U+9a13, U+ff08-ff09;
}
処置後に発現が大きく変化し、統計的な基準も満たす遺伝子候補はどれか。上昇・下降の方向は何か。
横軸はlog₂ fold change、縦軸は−log₁₀(p値)。縦の2本線が効果量の閾値±1、横線がp値0.05に相当する1.3を 示す。両条件を満たす点を上昇（右・青）と下降（左・橙）に分け、基準未達は灰色にする。この架空例では12候補中 7候補が基準を超え、内訳は上昇4・下降3。
一般的な散布図は2変数の関係を見るが、volcano plotは実験条件間の変化量と検定結果で候補を選ぶ。p値は例示上 未補正であり、実際の遺伝子発現分析では多重検定補正、反復数、実験設計と効果量の実用性を合わせて評価する。