Infovis Assignment 5

<head>
    <meta charset="utf-8">
    <title>D3 Cryptocurrency Visualization</title>
    <script src="https://d3js.org/d3.v4.js"></script>
</head>

<body>
        <div class="post-content post-indent">
                <p>After a week that saw legacy Bitcoin (BTC) hit the $9,000 mark, the cryptocurrency market experienced a slow decline over the weekend with every currency again in the red and some also dropping to lows not seen since early February. In fact BTC dropped almost 10% from its intra week high to touch the $8,300 mark although at press time it was trading closer to the <a href="https://coingeek.com/cryptocurrency-market-commences-recovery-btc-back-8500-level/">$8,500 position</a>.</p>
<p>Another big loser over the weekend was Ethereum Classic which saw its value slump to well below the $18 mark and was trading at $17.60 at press time. It seems that the cryptocurrency has dropped considerably from its highs of $40 registered just over a month ago with the slow decline affecting it quite badly overall. The same could be said for its bigger brother Ethereum, which saw its price decline to just over $510 and if the $500 line is breached, this could mean a complete collapse to the $400 position and further lower.</p>
<p>Ripple also lost another 7% overall and is once again trading close to the psychologically significant $0.60 mark which may indicate another steep fall soon. Ripple has lost well over 300% in the past two months and even the $1 mark looks very far away now. Of the other currencies with larger market cap, Bitcoin Cash fell to well below the $1,000 mark and was trading at around $965 at press time. It seems that even here, the days of the $4,000 values are well behind us and it could take many more months to reach that value again. Litecoin was perhaps the only stable currency since it did not lose all that much and was trading at around $158 at press time with the possibility of testing the $150 support line, although that still seems rather far off.</p>
<p>It was another disappointing weekend for the currencies with smaller market caps such as Stellar and NEO. The former registered a small decrease at least and was trading at around $0.24 at press time also indicating that it might breach further upward movement with a small increase over the past 24 hours. NEO however was considerably down by around 10% and was trading at around $0.65 with no seeming end in sight to the decline.</p>
<h6><em>Note: Tokens in the SegWit chain are referred to as SegWit1X (BTC) and SegWit Gold (SWG) and are no longer Bitcoin. Bitcoin Cash (BCH) is the only true <a href="https://coingeek.com/about-bitcoin/">Bitcoin</a> as intended by the original Satoshi white paper.  Bitcoin BCH is the only public block chain that offers safe and cheap microtransactions.<br />
</em></h6>
</p>

//Following code for the bar graph is based off of: https://bl.ocks.org/d3noob/8952219 and https://bl.ocks.org/d3noob/23e42c8f67210ac6c678db2cd07a747e and https://bl.ocks.org/d3noob/257c360b3650b9f0a52dd8257d7a2d73

var margin = {top: 20, right: 20, bottom: 70, left: 60},
        width = 600 - margin.left - margin.right,
        height = 300 - margin.top - margin.bottom;

var x = d3.scaleLinear().range([0, width], .05);

var y = d3.scaleLinear().range([height, 0]);

var sampleSVG = d3.select("body").append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
        .append("g")
            .attr("transform", 
                "translate(" + margin.left + "," + margin.top + ")");

var div = d3.select("body").append("div")
            .attr("class", "tooltip")
            .style("opacity", 0);

x.domain([min, max]);
            y.domain([minVal, maxVal]);

sampleSVG.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(" + width/(count*2) + "," + height + ")")
                .call(d3.axisBottom(x).ticks(count))
                .selectAll("text")
                .style("text-anchor", "end")
                .attr("dx", "-.8em")
                .attr("dy", "-.55em")
                .attr("transform", "rotate(-90)" );

sampleSVG.append("g")
                .attr("class", "y axis")
                .call(d3.axisLeft(y))
                .append("text")
                .attr("transform", "rotate(-90)")
                .attr("dy", ".71em")
                .style("text-anchor", "end")
                .text("Value ($)");

sampleSVG.selectAll("bar")
                .data(yearD)
                .enter().append("rect")
                .style("fill", "steelblue")
                .attr("x", function(d) { return x(d.year); })
                .attr("width", width/count)
                .attr("y", function(d) { return y(d.value); })
                .attr("height", function(d) { return height - y(d.value); })
                .on("mouseover", function(d) {
                    div.transition()
                        .duration(100)
                        .style("opacity", 1);
                    div.html("<b>" + d.value + "</b>" + "<br/>")
                    
                    })
                    .on("mouseout", function(d) {
                    div.transition()
                        .duration(300)
                        .style("opacity", 0);
                });

});

sampleSVG.append("text")             
                .attr("transform", "translate(" + (width/2) + " ," + (height + margin.top + 35) + ")")
                .style("text-anchor", "middle")
                .text("Year");

sampleSVG.append("text")
                .attr("transform", "rotate(-90)")
                .attr("y", 0 - margin.left)
                .attr("x",0 - (height / 2))
                .attr("dy", "1em")
                .style("text-anchor", "middle")
                .text("Average Close"); 
        }
        loadCrypto("Bitcoin");
    
        //readInData1('data/crypto-markets.csv');
    </script>
    <div id="aa">
            <input name="bitcoin" 
                   type="button" 
                   value="Bitcoin" 
                   onclick='loadCrypto("Bitcoin")' />
            <input name="litecoin" 
                   type="button" 
                   value="Litecoin" 
                   onclick='loadCrypto("Litecoin")' />
            <input name="ripple" 
                   type="button" 
                   value="Ripple" 
                   onclick='loadCrypto("Ripple")' />
            <input name="ethereum" 
                   type="button" 
                   value="Ethereum" 
                   onclick='loadCrypto("Ethereum")' />
    </div>
</body>

</html>

https://d3js.org/d3.v4.js