4eb8ce4c1204debcf7cf81f1de5af5a3dd9343d3 gperez2 Fri May 22 17:27:25 2026 -0700 The author requested updating the per-tissue colors to gradients. Updated the mouseDevTimecourse legend HTML to match the new colors and documented the data file update in the mm10 and mm39 makedocs. refs #37001 diff --git src/hg/makeDb/trackDb/mouseDevTimecourseDisplay.shared.html src/hg/makeDb/trackDb/mouseDevTimecourseDisplay.shared.html index 36160d9f45c..d92a55d3067 100644 --- src/hg/makeDb/trackDb/mouseDevTimecourseDisplay.shared.html +++ src/hg/makeDb/trackDb/mouseDevTimecourseDisplay.shared.html @@ -1,32 +1,29 @@ <h2>Display Conventions and Configuration</h2> <p> Tracks are displayed as <a href="/goldenPath/help/barChart.html" target="_blank">bigBarCharts</a>. -Bars are colored by tissue type and can be faceted by tissue and -timepoint using the track configuration controls.</p> +Bars are colored by tissue and developmental time point, with the shade darkening +as the time point advances from e10.5 through P0. Bars can be grouped and filtered +by tissue and time point using the track configuration controls.</p> -<p>Bars are colored by tissue:</p> +<p>Bars are colored by tissue, with a gradient that darkens as the time point advances through the eight developmental time points (e10.5, e11.5, e12.5, e13.5, e14.5, e15.5, e16.5, and P0). Not all tissues are available at all time points.</p> <table border="1" cellpadding="4" cellspacing="0"> - <tr><th>Color</th><th>Tissue</th></tr> - <tr><td style="background-color:#0118FA;width:30px;"> </td><td>adrenal gland</td></tr> - <tr><td style="background-color:#C0C0C0;width:30px;"> </td><td>embryonic facial prominence</td></tr> - <tr><td style="background-color:#00FFFF;width:30px;"> </td><td>forebrain</td></tr> - <tr><td style="background-color:#FF8380;width:30px;"> </td><td>heart</td></tr> - <tr><td style="background-color:#8B8A1D;width:30px;"> </td><td>hindbrain</td></tr> - <tr><td style="background-color:#CAC379;width:30px;"> </td><td>intestine</td></tr> - <tr><td style="background-color:#00FF00;width:30px;"> </td><td>kidney</td></tr> - <tr><td style="background-color:#FFFA2C;width:30px;"> </td><td>limb</td></tr> - <tr><td style="background-color:#C39CFB;width:30px;"> </td><td>liver</td></tr> - <tr><td style="background-color:#7762F0;width:30px;"> </td><td>lung</td></tr> - <tr><td style="background-color:#717E8D;width:30px;"> </td><td>midbrain</td></tr> - <tr><td style="background-color:#A71206;width:30px;"> </td><td>neural tube</td></tr> - <tr><td style="background-color:#35B5E2;width:30px;"> </td><td>skeletal muscle tissue</td></tr> - <tr><td style="background-color:#9834E7;width:30px;"> </td><td>spleen</td></tr> - <tr><td style="background-color:#995432;width:30px;"> </td><td>stomach</td></tr> - <tr><td style="background-color:#483F84;width:30px;"> </td><td>thymus</td></tr> - <tr><td style="background-color:#ff0000;width:30px;"> </td><td>urinary bladder</td></tr> +<tr><th>Tissue</th><th>Colors by time point (earliest to latest)</th></tr> +<tr><td>thymus</td><td><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#C8B400;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">P0</div></div></td></tr> +<tr><td>spleen</td><td><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#A0856C;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">P0</div></div></td></tr> +<tr><td>liver</td><td><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#e0e0e0;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">e11.5</div></div><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#cfcfcf;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">e12.5</div></div><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#b5b5b5;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">e13.5</div></div><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#9a9a9a;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">e14.5</div></div><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#7f7f7f;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">e15.5</div></div><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#666666;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">e16.5</div></div><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#4d4d4d;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">P0</div></div></td></tr> +<tr><td>heart</td><td><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#f7c6c6;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">e10.5</div></div><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#f19999;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">e11.5</div></div><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#ec6b6b;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">e12.5</div></div><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#e64545;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">e13.5</div></div><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#d93030;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">e14.5</div></div><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#b71f1f;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">e15.5</div></div><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#8f1515;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">e16.5</div></div><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#6f0f0f;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">P0</div></div></td></tr> +<tr><td>skeletal muscle tissue</td><td><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#FF6B6B;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">P0</div></div></td></tr> +<tr><td>urinary bladder</td><td><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#FF8C00;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">P0</div></div></td></tr> +<tr><td>adrenal gland</td><td><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#000000;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">P0</div></div></td></tr> +<tr><td>kidney</td><td><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#f6c38a;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">e14.5</div></div><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#f0a14d;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">e15.5</div></div><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#d17a2c;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">e16.5</div></div><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#a95c1b;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">P0</div></div></td></tr> +<tr><td>lung</td><td><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#fff59a;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">e14.5</div></div><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#fff066;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">e15.5</div></div><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#e6d84a;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">e16.5</div></div><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#bfae2f;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">P0</div></div></td></tr> +<tr><td>stomach</td><td><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#d7f7a6;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">e14.5</div></div><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#bdf06f;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">e15.5</div></div><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#8fcd3c;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">e16.5</div></div><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#5f8f1f;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">P0</div></div></td></tr> +<tr><td>intestine</td><td><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#b6f7da;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">e14.5</div></div><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#7eecc0;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">e15.5</div></div><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#44c494;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">e16.5</div></div><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#2f8f6c;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">P0</div></div></td></tr> +<tr><td>limb</td><td><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#f6c3e8;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">e10.5</div></div><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#f19cd9;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">e11.5</div></div><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#ea73c9;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">e12.5</div></div><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#e04ab8;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">e13.5</div></div><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#b92d8f;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">e14.5</div></div><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#7f1f63;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">e15.5</div></div></td></tr> +<tr><td>embryonic facial prominence</td><td><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#f2b3c8;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">e10.5</div></div><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#e979a0;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">e11.5</div></div><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#de4f7e;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">e12.5</div></div><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#c92d63;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">e13.5</div></div><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#9f1f4d;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">e14.5</div></div><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#6f1435;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">e15.5</div></div></td></tr> +<tr><td>forebrain</td><td><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#e1c6f7;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">e10.5</div></div><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#cfa1f2;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">e11.5</div></div><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#b36ae6;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">e12.5</div></div><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#8f3fd9;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">e13.5</div></div><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#6a28b8;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">e14.5</div></div><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#4b1a8f;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">e15.5</div></div><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#34105f;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">e16.5</div></div><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#22093f;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">P0</div></div></td></tr> +<tr><td>midbrain</td><td><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#c6d8ff;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">e10.5</div></div><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#9fbaff;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">e11.5</div></div><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#6f96ff;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">e12.5</div></div><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#3f70ff;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">e13.5</div></div><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#1f4de6;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">e14.5</div></div><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#1637b8;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">e15.5</div></div><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#0f267f;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">e16.5</div></div><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#08184f;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">P0</div></div></td></tr> +<tr><td>hindbrain</td><td><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#c6dbf0;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">e10.5</div></div><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#9bbce6;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">e11.5</div></div><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#6a9cd9;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">e12.5</div></div><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#3f7ec4;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">e13.5</div></div><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#285fa3;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">e14.5</div></div><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#1a457f;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">e15.5</div></div><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#0f2f5f;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">e16.5</div></div><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#081c3f;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">P0</div></div></td></tr> +<tr><td>neural tube</td><td><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#d6fbff;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">e11.5</div></div><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#a6f0ff;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">e12.5</div></div><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#6fdcff;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">e13.5</div></div><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#3fbfe6;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">e14.5</div></div><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#2a8fb8;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">e15.5</div></div><div style="display:inline-block;text-align:center;margin-right:4px;"><div style="background-color:#1a5f6f;width:36px;height:20px;border:1px solid #888;"></div><div style="font-size:0.8em;">P0</div></div></td></tr> </table> - -<p style="margin-top:1em;">Within each tissue, bars are grouped by developmental time point: -e10.5, e11.5, e12.5, e13.5, e14.5, e15.5, e16.5, and P0. Not all -tissues are available at all time points.</p>