Untitled

<!--
    Christian Barboza
    01420751
    CIS 468 Data Visualization
    Professor Koop
    Assignment #3
-->

<html>

    <head>
        <script src="http://www.cis.umassd.edu/~dkoop/cis468-2017sp/a3/fifa-17-women.json"></script>
        <script src="http://www.cis.umassd.edu/~dkoop/cis468-2017sp/a3/guardian-16-men.json" type="text/javascript"></script>
        <script src="http://www.cis.umassd.edu/~dkoop/cis468-2017sp/a3/soccer-teammates-men.json"></script>
        <script src="https://cdn.rawgit.com/johan/world.geo.json/master/countries.geo.json" type="text/javascript"></script>
    </head>

    <style>
        body {
          background: #fcfcfa;
        }

        .stroke {
          fill: none;
          stroke: black;
          stroke-width: 1px;
        }

        .fill {
          fill: #fff;
        }

        .graticule {
          fill: none;
          stroke: black;
          stroke-width: 1px;
        }

        .land {
          fill: black;
        }

        .country {
            fill: white;
            stroke: black;
            stroke-width: 1px;
        }

        .boundary {
          fill: none;
          stroke: black;
          stroke-width: 1px;
        }
    </style>

    <body>
        <script src='https://cdnjs.cloudflare.com/ajax/libs/d3/4.7.3/d3.min.js'></script>
        <script src='https://cdnjs.cloudflare.com/ajax/libs/topojson/2.2.0/topojson.min.js'></script>

        <h1> Assignment 3 </h1>
        <h2> Brennan Clark </h2>
        <h2> #01420751 </h2>
        <h2> Data Visualization (CIS468) </h2>
        <label><em> This assignment is all my own work. I did not copy the code from any other source. </em></label>

        <h1>Women Soccer Players- Choropleth </h1>
        <div id="women"></div>

        <h1>Men Soccer Players- Choropleth </h1>
        <div id="men"></div>

        <h1> Force-Directed Graph </h1>
        <div id="force"></div>

        <!--Women's Choropleth -->
        <div id = "women">
        </div>
        <script>
            var width = 960, height = 580;

            var color = d3.scaleSequential(function (d) {
                return d3.interpolateReds(d/12);
            });

            var projection = d3.geoMercator()
                .scale( 100 )
                .translate( [ width / 2, height / 2 ] )
                .precision( .1 );

            var path = d3.geoPath()
                .projection( projection );

            var svg = d3.select( "#women" ).append( "svg" )
                .attr( "width", width )
                .attr( "height", height );

            svg.append( "defs" ).append( "path" )
                .datum( { type: "Sphere" } )
                .attr( "id", "sphere" )
                .attr( "d", path );

            svg.append( "use" )
                .attr( "class", "stroke" )
                .attr( "xlink:href", "#sphere" );

            svg.append( "use" )
                .attr( "class", "fill" )
                .attr( "xlink:href", "#sphere" );

            d3.queue()
                    .defer(d3.json, "https://cdn.rawgit.com/johan/world.geo.json/master/countries.geo.json")
                    .defer(d3.json, "http://www.cis.umassd.edu/~dkoop/cis468-2017sp/a3/fifa-17-women.json")
                    .await(ready);

            function ready(error, map, data)
            {
                svg.append("g")
                    .attr("class", "countries")
                    .selectAll("path")
                    .data(map.features)
                    .enter().append("path")
                        .attr("d", path)
                        .attr("fill", function (d) { return color(data.filter(function (i) {return d.properties.name == i['Country'];}).length);})
                        .attr("stroke","black");
            }
        </script>

        <!--Men's Choropleth -->
        <div id = "men">
        </div>

        <script>
            var width = 960, height = 580;
            var color = d3.scaleOrdinal(d3.schemeCategory10);

            var projection = d3.geoMercator()
                .scale(100) //Changing this makes the whole thing smaller, but still clips a bit of Russia out.
                .translate([width / 2, height / 2])
                .precision(.1);

            var path = d3.geoPath()
                .projection(projection);

            //Make sure it's in the men's soccer section
            var svg = d3.select("#men").append("svg")
                .attr("width", width)
                .attr("height", height);

            svg.append("defs").append("path")
                .datum({type: "Sphere"})
                .attr("id", "sphere")
                .attr("d", path);

            svg.append("use")
                .attr("class", "stroke")
                .attr("xlink:href", "#sphere");

            svg.append("use")
                .attr("class", "fill")
                .attr("xlink:href", "#sphere");


            //Different map than the given- this one had nicer values, but is slightly cut off
            d3.json("https://giottojs.org/geo/world-110m.json", function(error, world) {
              if (error) throw error;

                    var countries = topojson.feature(world, world.objects.countries).features,
                        neighbors = topojson.neighbors(world.objects.countries.geometries);

              svg.selectAll(".country")
                  .data(countries)
                .enter().insert("path", ".graticule")
                  .attr("class", "country")
                  .attr("d", path)
                  //.style("fill", function(d, i) { return color(d.color = d3.max(neighbors[i], function(n) { return countries[n].color; }) + 1 | 0); });

              svg.insert("path", ".graticule")
                  .datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
                  .attr("class", "boundary")
                  .attr("d", path);
            });
            /*
            function ready(error, map, data)
            {
                svg.append("g")
                    .attr("class", "countries")
                    .selectAll("path")
                    .data(map.features)
                    .enter().append("path")
                        .attr("d", path)
                        .attr("filll", function (d) { return color(data.filter(function (i)  { return d.properties.name == i[dataKey]; }).length;)})
                        .attr("stroke", "black")
            }*/
        </script>

        <!--Force-Directed Graph -->
        <div id = "force">
        </div>
        <meta charset="utf-8">
        <style>

        .links line {
          stroke: #999;
          stroke-opacity: 0.6;
        }

        .nodes circle {
          stroke: #fff;
          stroke-width: 1.5px;
        }

        </style>

        <!--Load the D3 library -->
        <script src="https://d3js.org/d3.v4.min.js"></script>
        <script>

        var svg = d3.select("svg"),
            width = 960,
            height = 600;

        var color = d3.scaleOrdinal(d3.schemeCategory20);

        var simulation = d3.forceSimulation()
            .force("link", d3.forceLink().id(function(d) { return d.id; }))
            .force("charge", d3.forceManyBody())
            .force("center", d3.forceCenter(width / 2, height / 2));

        d3.json("miserables.json", function(error, graph) {
          if (error) throw error;

          var link = svg.append("g")
              .attr("class", "links")
            .selectAll("line")
            .data(graph.links)
            .enter().append("line")
              .attr("stroke-width", function(d) { return Math.sqrt(d.value); });

          var node = svg.append("g")
              .attr("class", "nodes")
            .selectAll("circle")
            .data(graph.nodes)
            .enter().append("circle")
              .attr("r", 5)
              .attr("fill", function(d) { return color(d.group); })
              .call(d3.drag()
                  .on("start", dragstarted)
                  .on("drag", dragged)
                  .on("end", dragended));

          node.append("title")
              .text(function(d) { return d.id; });

          simulation
              .nodes(graph.nodes)
              .on("tick", ticked);

          simulation.force("link")
              .links(graph.links);

          function ticked() {
            link
                .attr("x1", function(d) { return d.source.x; })
                .attr("y1", function(d) { return d.source.y; })
                .attr("x2", function(d) { return d.target.x; })
                .attr("y2", function(d) { return d.target.y; });

            node
                .attr("cx", function(d) { return d.x; })
                .attr("cy", function(d) { return d.y; });
          }
        });

        function dragstarted(d) {
          if (!d3.event.active) simulation.alphaTarget(0.3).restart();
          d.fx = d.x;
          d.fy = d.y;
        }

        function dragged(d) {
          d.fx = d3.event.x;
          d.fy = d3.event.y;
        }

        function dragended(d) {
          if (!d3.event.active) simulation.alphaTarget(0);
          d.fx = null;
          d.fy = null;
        }

        </script>


    </body>

</html>