treemap/index.html

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="https://www.thetimes.co.uk/d/styles/main.min-1de427e813.css">
        <link rel="stylesheet" href="../style.css">
        <link rel="stylesheet" href="../page.css">
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href="https://fonts.timesdev.tools/fonts/GillSansW01-Medium.css" />
        <link rel="stylesheet" href="https://fonts.timesdev.tools/fonts/TimesDigital-Regular.css" />
        <link rel="stylesheet" href="https://fonts.timesdev.tools/fonts/TimesModern-Bold.css" />
        <link rel="stylesheet" href="https://fonts.timesdev.tools/fonts/TimesModern-Regular.css" />

    </head>
    <body>
        <div class="sidebar">
            <img src="../dual-masthead.svg" width="250" />
            <div class="Byline"><a href="../index.html">Back to the Catalogue</a></div>
        </div>
        
        <div class="wrapper">
            <div class="Headline">Treemap</div>
            <div class="Standfirst">Where do the Premier League transfer bought during the January 2017 transfer window come from</div>

            <div class="Article-content">
                <p>Displays hierarchical data ordered by importance (in this case, geographical origin and price), as we used in <a href="https://www.thetimes.co.uk/article/january-transfer-window-s9br65rj6?shareToken=3f26f398a4f6ca2be241b85201714816">our January 2017 transfer window microsite</a>
                </p>
            </div>

            <!--
                 SVG container for d3 chart
            -->
            <svg id="times-treemap"></svg>

            <div class="links">
                <ul>
                    <li>
                        <p><a href="http://blockbuilder.org/basilesimon/7802f6498ca5904c92041312876ace3e">Click to edit live in Blockbuilder</a></p>
                    </li>
                    
                    <li>
                        <p><a href="https://github.com/times/dataviz-catalogue/blob/master/treemap/script.js">See on Github</a></p>
                    </li>

                </ul>
            </div>

            <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
            <script type="text/javascript" src="https://unpkg.com/d3-jetpack"></script>
            <script type="text/javascript" src="script.js"></script>
    </body>
</html>