Untitled

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

<html>

    <head>
        <title> CIS 468 Homework 3 </title>
    </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> Homework 3 </h1>
        <h2> Christian Barboza </h2>
        <h2> #01420751 </h2>
        <h2> CIS 468 Data Visualization </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.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( "#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" );

            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/soccer-teammates-men.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>

        <!--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>