D3 Examples - Day 4

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Day 4 Colour Scale and circles</title>
        <h2 style="padding-left:60px;">Day Four | Block 4 Colour Analysis </h2>
        
        <p style="padding-left:60px;">Ordered Colours in Grace Cossignton Smith's "Landscape at Pentecost" (c 1932) </p>
    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
        <style type="text/css">
​
​
        body {
                font: 16px Futura;
                color: white;
                background-color: grey;
            }
​
            svg {
                
                background-color: white;
            }
            
            svg circle {
                fill-opacity: 0.75;
            }
​
            </style>
        </head>
​
        <body>
            <script type="text/javascript">
​
        //Width and height
        
        var w = 1500;
        var h = 300;
        var padding = 100;
​
​
        var svg =   d3.select("body")
                    .append("svg")
                    .attr("width", w)
                    .attr("height", h);
​
        d3.csv("GCS_2.csv", function (error, data) {
            var dataset = data.map (function (d){
                return {
                    Count: d["Count"],
                    Hex: d["Hex"]};
                
            });
            console.log("Inital Data", data); 
​
            var rScale = d3.scale.linear()
            .domain([0, d3.max(dataset, function(d) { return d.Count; })])
                         .range([1, 100]);
​
​
​
​
            var circles = svg.selectAll("circle")
            .data (dataset)
            .enter()
            .append("circle");
​
            circles.attr("cx", function(d,i){
                return(i*10) + padding-20;
            })
            .attr("cy", h/2)
            .attr("r", function(d){
                return rScale(d.Count/5)
            })
            .style("fill", function(d){
                return d.Hex
            });
​
​
        })
​
​
                     </script>
    </body>
</html>
​
    