Skip to content

Commit

Permalink
CORS test27
Browse files Browse the repository at this point in the history
  • Loading branch information
Tim Kershaw committed Sep 28, 2023
1 parent fdde157 commit 3828ca2
Show file tree
Hide file tree
Showing 2 changed files with 62 additions and 22 deletions.
72 changes: 50 additions & 22 deletions chart-menu/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,16 @@
.li {
margin-bottom: 15px;
}
.CB{
width:30%
}/*
.CB:hover{
position: fixed;
top:0;
left:0;
width:70%;
border:1px solid black;
} */
</style>
</head>

Expand All @@ -60,14 +70,13 @@ <h5 id="accessibleSummary" class="visuallyhidden"></h5>
<h2>Step-by-step guide to getting data vis support</h2>
<h3>Objective:</h3>
<p>
By following this guide to requesting data visualisation support, you can help speed up turnaround times for
creating charts and maps, and ensure visualisations better meet user needs.
<br />
Depending on your needs, the data vis team will be able to provide simple, custom or complex support. Follow the
steps in the guide to see which level of support you need.
<br />
On occasion more complex and resource-intensive solutions will be justified. We will continue to support these
where there is a convincing business case as defined by a combination of factors:
Increase turnaround times for creating charts and maps, and ensure visualisations better meet user needs by
following this guide.
<br /><br />
The Data Visualisation (data vis) team will be able to provide simple, custom or complex support based upon your
needs. More complex and resource-intensive solutions may be justified on occasion. We will continue to support
these where there is a convincing business case. This is defined by a combination of factors, and you should now
follow our step-by-step process before requesting any visualisations.

</p>
<br>
Expand All @@ -81,49 +90,49 @@ <h3>Steps:</h3>
covering, too many charts can lead to reader fatigue and our
research shows that readers won’t reach the bottom of the page. We
recommend no more than 1 chart per 300 words.</span><br />
<span class="yes answer"> Go to <a href="#step2">step 2 </a></span>
<span class="yes answer"> Go to <a target="_blank" href="#step2">step 2 </a></span>
</li>
<!--2-->
<li class="li" id="step2">
<span class="question">
Could the data be visualised using the standard
<a href="#chartbuilder">chart-builder</a> charts?</span>
<a target="_blank" href="#chartbuilder">chart-builder</a> charts?</span>
<br />
<span class="yes answer">
&nbsp YES: Prepare the data tables in a suitable format for your
publishing officer to create the chart.</span>
<br />
<span class="no answer"> NO: Go to <a href="#step3">step 3</a> </span>
<span class="no answer"> NO: Go to <a target="_blank" href="#step3">step 3</a> </span>
</li>
<!--3-->
<li class="li" id="step3">
<span class="question">
Can charts be made from <a href="#grid">Data Vis Templates</a> with
Can charts be made from <a target="_blank" href="#grid">Data Vis Templates</a> with
only minor modification?</span>
<br />
<span class="yes answer">
&nbsp YES: Download the image for your chosen chart template and insert it into your draft, then request data
vis support from
<a href="mailto: [email protected]">[email protected]</a>.</span>
<a target="_blank" href="mailto: [email protected]">[email protected]</a>.</span>
<br />
<span class="no answer"> NO: Go to <a href="#step4">step 4</a> </span>
<span class="no answer"> NO: Go to <a target="_blank" href="#step4">step 4</a> </span>
</li>
<!--4-->
<li class="li" id="step4">
<span class="question">
Have you seen examples of charts on our website that you would like to replicate?</span>
<br />
<span class="yes answer">
&nbsp YES: Send the publication link and the figure number with your request for data vis support to <a
&nbsp YES: Send the publication link and the figure number with your request for data vis support to <a target="_blank"
href="mailto: [email protected]">[email protected]</a>.</span>
<br />
<span class="no answer"> NO: Go to <a href="#step5">step 5</a> </span>
<span class="no answer"> NO: Go to <a target="_blank" href="#step5">step 5</a> </span>
</li>
<!--5-->
<li class="li" id="step5">
<span class="question">
If none of these options meet your needs, you may need a more complex solution. In this case, request data vis
support from <a href="mailto: [email protected]">[email protected]</a> and include the
support from <a target="_blank" href="mailto: [email protected]">[email protected]</a> and include the
following information:
<ol>
<li>The ONS priority tier that the publication meets</li>
Expand All @@ -147,13 +156,32 @@ <h3>Steps:</h3>


<div id="chartbuilder">
<h2>Chartbuilder</h2>
<p>What chartbuilder can do...</p>
<h2>Chartbuilder charts</h2>
<p>These are charts that are made by Publishing Officers using a tool called Chartbuilder. Here are examples of charts
that Chartbuilder can do reasonably well. Click to open the example at full size in a new tab.</p><br>
<a target="_blank" href="./CB_images/simple_line.png"><img class="CB" src="./CB_images/simple_line.png" /></a>
<a target="_blank" href="./CB_images/area.png"><img class="CB" src="./CB_images/area.png" /> </a>
<a target="_blank" href="./CB_images/simple_hoz_bar.png"><img class="CB" src="./CB_images/simple_hoz_bar.png" /></a>
<a target="_blank" href="./CB_images/simple_hoz_bar_highlight.png"><img class="CB" src="./CB_images/simple_hoz_bar_highlight.png" /></a>
<a target="_blank" href="./CB_images/group_hoz_bar.png"> <img class="CB" src="./CB_images/group_hoz_bar.png" /></a>
<a target="_blank" href="./CB_images/stacked_hoz_bar.png"> <img class="CB" src="./CB_images/stacked_hoz_bar.png" /></a>
<a target="_blank" href="./CB_images/stacked_hoz_bar_spread.png"><img class="CB" src="./CB_images/stacked_hoz_bar_spread.png" /></a>
<a target="_blank" href="./CB_images/stacked_v_bar.png"><img class="CB" src="./CB_images/stacked_v_bar.png" /></a>
<a target="_blank" href="./CB_images/stacked_v_bar_snake.png"> <img class="CB" src="./CB_images/stacked_v_bar_snake.png" /></a>
<a target="_blank" href="./CB_images/stacked_v_bar_hundred_colour.png"> <img class="CB"
src="./CB_images/stacked_v_bar_hundred_colour.png" /> </a>
<a target="_blank" href="./CB_images/group_v_bar.png"> <img class="CB" src="./CB_images/group_v_bar.png" /> </a>
<a target="_blank" href="./CB_images/group_v_bar_spread.png"> <img class="CB" src="./CB_images/group_v_bar_spread.png" /> </a>

</div>

<hr /><br><br>
<hr />

<h2>Data vis templates</h2>
<p>These are for charts that are made by Data Visualsiation Specialists by editing code in Javascript. The templates are continuously tested, improved and added to.</p><br>
<p>Download the image for your chosen chart template by clicking "view full chart" and then "get image to insert in draft" and insert it into the draft of your publication, then request data vis support from <a target="_blank" href="mailto: [email protected]">[email protected]</a>.</p>

<ul id="list"></ul>
<br>
<div id="grid" aria-hidden="true">
<!-- <img src="fallback.png" alt="[Chart]" /> -->
Expand All @@ -166,7 +194,7 @@ <h5 id="source"></h5>
<script src="https://cdn.ons.gov.uk/vendor/pym/1.3.2/pym.js" type="text/javascript"></script>
<script src="./config.js"></script>
<script src="./script.js"></script>
<script src="./html2canvas.js"></script>
<!-- <script src="./html2canvas.js"></script> -->
</body>

</html>
12 changes: 12 additions & 0 deletions chart-menu/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,18 @@ let charts = ["Area stacked", "Area stacked small multiple", "Bar chart Split",
let urls = ["https://onsvisual.github.io/Charts/area-stacked/", "https://onsvisual.github.io/Charts/area-stacked-sm/", "https://onsvisual.github.io/Charts/bar-chart-horizontal-split/", "https://onsvisual.github.io/Charts/bar-chart-horizontal/", "https://onsvisual.github.io/Charts/bar-chart-horizontal-with-dropdown/", "https://onsvisual.github.io/Charts/bar-chart-horizontal-sm/", "https://onsvisual.github.io/Charts/bar-chart-horizontal-with-reference-sm/", "https://onsvisual.github.io/Charts/bar-chart-horizontal-sm-colour/", "https://onsvisual.github.io/Charts/bar-chart-horizontal-clustered/", "https://onsvisual.github.io/Charts/bar-chart-horizontal-stacked/", "https://onsvisual.github.io/Charts/bar-chart-horizontal-stacked-with-tooltip/", "https://onsvisual.github.io/Charts/bar-chart-horizontal-stacked-sm/", "https://onsvisual.github.io/Charts/bar-chart-horizontal-stacked-grouped/", "https://onsvisual.github.io/Charts/bar-chart-horizontal-stacked-clustered/", "https://onsvisual.github.io/Charts/bar-chart-horizontal-grouped/", "https://onsvisual.github.io/Charts/bar-chart-horizontal-grouped-clustered/", "https://onsvisual.github.io/Charts/bar-chart-horizontal-stacked-clustered-grouped/", "https://onsvisual.github.io/Charts/bubble-chart-animated/", "https://onsvisual.github.io/Charts/comet-plot/", "https://onsvisual.github.io/Charts/column-chart/", "https://onsvisual.github.io/Charts/column-chart-sm/", "https://onsvisual.github.io/Charts/column-chart-stacked/", "https://onsvisual.github.io/Charts/column-chart-stacked-with-line/", "https://onsvisual.github.io/Charts/column-chart-stacked-sm/", "https://onsvisual.github.io/Charts/dot-plot/", "https://onsvisual.github.io/Charts/dot-plot-with-ci-sm/", "https://onsvisual.github.io/Charts/heatmap/", "https://onsvisual.github.io/Charts/heatmap-per-column/", "https://onsvisual.github.io/Charts/line-chart/", "https://onsvisual.github.io/Charts/area-stacked/", "https://onsvisual.github.io/Charts/line-chart-sm/", "https://onsvisual.github.io/Charts/line-chart-with-area/", "https://onsvisual.github.io/Charts/population-pyramid-static/", "https://onsvisual.github.io/Charts/population-pyramid-with-comparison-toggle/", "https://onsvisual.github.io/Charts/population-pyramid-static-with-comparison/", "https://onsvisual.github.io/Charts/population-pyramid-with-dropdown/", "https://onsvisual.github.io/Charts/population-pyramid-with-dropdown-and-interactive-comparison/", "https://onsvisual.github.io/Charts/range-plot/", "https://onsvisual.github.io/Charts/scatter-plot/", "https://onsvisual.github.io/Charts/scatter-plot-sm/", "https://onsvisual.github.io/Charts/scatter-plot-animated/", "https://onsvisual.github.io/maptemplates/simplemap/", "https://onsvisual.github.io/maptemplates/changeovertime/", "https://onsvisual.github.io/maptemplates/multimap/", "https://onsvisual.github.io/maptemplates/multimap_simplebar/", "https://onsvisual.github.io/maptemplates/multimap_vertical-scale/", "https://onsvisual.github.io/maptemplates/simplemap_beeswarm/", "https://onsvisual.github.io/maptemplates/simplemap_stackedbar/", "https://onsvisual.github.io/maptemplates/multiple_characteristics_map/", "https://onsvisual.github.io/maptemplates/Side-by-side-map/", "https://onsvisual.github.io/maptemplates/hexmap/", "https://onsvisual.github.io/maptemplates/lsoa-small-area/houseprice/", "https://onsvisual.github.io/maptemplates/msoa/covid-death-map/", "https://onsvisual.github.io/maptemplates/msoa/simplemap/", "https://onsvisual.github.io/maptemplates/msoa/multimap/"];
let url = "https://onsvisual.github.io/Charts/";

/* SLOW SCROLL (ON SOME BROWSERS) */

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();

document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});

/*GET SCREENSHOT THUMBNAIL*/

function analyticsEvent(props) {
Expand Down

0 comments on commit 3828ca2

Please sign in to comment.