D3 Examples - Startup Industries

xxxxxxxxxx
 
<!DOCTYPE html>
​
<html>
​
<head lang="en">
    <meta charset="utf-8">
    <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.min.js"></script>
  <script src="https://unpkg.com/topojson@3"></script>
    <script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
  <style>
* {
  transform-origin: inherit ;
}
​
body {
  background: white;
  font-family: "Open Sans";
  color: black;
}
​
div {
  position: relative;
}
​
h1, h2, h3, h4, p { 
  font-family: "Open Sans";
}
​
h1 {
  font-size: 28px;
}
​
h2 {
  font-size: 16px;
  font-weight: 700;
}
​
h3 {
  font-size: 14px;
  font-weight: 700;
  font-style: italic;
}
​
h4 {
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
}
​
p { 
  font-size: 16px;
  font-weight: 300;
  font-family: "Open Sans";
}
​
.progress-bar{
  background-color: grey;
}
​
.progress {
  margin: 0 auto;
  height: 5px;
  background-color: lightgrey;
  box-shadow: 0px;
  -webkit-box-shadow: 0px;
}
​
button {
  background-color:  #444;
  border: none;
  border-radius: 5px;
  font-weight: 700;
  color: white;
  font-size: 12px;
}
​
#occupations { 
  max-height: 700px;
  overflow-y: scroll;
}
​
.axis g.tick line { 
  opacity: .1;
}
​
.axis text {
  font-size: 12px;
  font-weight: 700;
  fill: #41ab5d;
}
​
.d3-tip {
  padding: 10px;
  background: rgba(0, 0, 0, 0.85);
  color: white;
  font-weight: 100;
  font-size: 12px;
  border-radius: 2px;
  z-index: 999;
}
​
.orange {
  color: #41ab5d;
}
​
.blue {
  color: steelblue;
}
​
.node {
  cursor: pointer;
}
​
.node:hover {
  stroke: #000;
  stroke-width: 1.5px;
}
​
.node--leaf {
  fill: white;
}
​
.label {
  font: 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-anchor: middle;
  text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
}
​
.label,
.node--root,
.node--leaf {
  pointer-events: none;
}
​
.floatme, svg.floatme {
  display: inline-block;
  float: left;
}
​
button {
  outline: none;
  margin: 2px 2px;
  padding: 2px 20px;
}
​
button:hover {
  background-color: #41ab5d;
}
​
#industries {
  margin-top: 20px;
}
  </style>
</head>
​
​
<body>
        <div id="buttons"></div>
        <div id= "industries"></div>
<script>
  
var f = d3.format(",");
var w = $("#industries").width(); 
​
var color = d3.scaleQuantile()
            .domain([0, 26, 76, 105, 151, 251, 600, 1000])
            .range(["#f7fcb9","#d9f0a3","#addd8e","#78c679","#41ab5d","#238443","#006837","#004529"])
​
d3.queue()
    .defer(d3.csv, "raw.csv")
    .awaitAll(function(error, results){ 
        data = results[0];
        by_industry = d3.nest()
        .key(function(d) { return d.industry})
        .entries(data);
​
        var monthsort = d3.timeFormat("%b %Y");
        
        by_month = d3.nest()
        .key(function(d) { return monthsort(new Date(d.created_at))})
        .rollup(function(leaves) { return {"number": leaves.length, "total_raised": d3.sum(leaves, function(d) {return parseFloat(d.money_raised);})} })
        .entries(data);
​
        by_industry.sort(function(a, b){
            var a1 = a.key;
            var b1 = b.key;
            if (a.key > b.key) { return 1}
            else if (a.key < b.key) { return -1}
            else {return 0}
        })
        
   var names = ["Technology", "Biotechnology", "Computers", "Environmental Services", "Energy Conservation", "Pharmaceuticals", "Telecommunications", "Business Services", "Health Insurance", "Hospitals and Physicians", "Tourism and Travel Services", "Lodging and Conventions", "Agriculture", "Airlines and Airports", "Coal Mining", "Construction", "Electric Utilities", "Manufacturing", "Residential", "Restaurants", "Retailing", "Other Energy", "Other Travel", "Other"]
        
        for (d=0; d<names.length; d++){
            var button = document.createElement("button");
            button.innerHTML = names[d];
            button.setAttribute('id', "b" + d + 1); 
            button.setAttribute('class', "button"); 
            document.getElementById("buttons").appendChild(button);
        }
​
​
            showBars("Technology");
​
        d3.selectAll(".button").on("click", function(){
            d3.selectAll(".floatme").remove();
            showBars(this.innerText)
        })
})
​
​
​
function showBars(thisname) {
    by_industry.forEach(function(industry){
    if (industry.key == thisname) {
        var thisindustry = d3.select("#industries").append("svg")
            .attr('width', w)
            .attr('height', 350)
            .attr("class", "floatme")
            .style("overflow", "visible")
​
         var tip = d3.tip()
            .attr('class', 'd3-tip')
            .offset([0, 10])
            .html(function(d) {
                if (!isNaN(d.offered_for_sale)) {
                    d.offered_for_sale = "$" + f(d.offered_for_sale);
                }
              return "<b>" + d.name + "</b><br>Money Raised: $" + f(d.money_raised) + "<br>For Sale: " + d.offered_for_sale;
            })
​
        thisindustry.call(tip);
​
        thisindustry.append("text")
            .attr("x", 10)
            .attr("y", 20)
            .text(industry.key)
            .style("font-weight", 700)
            .style("font-size", 18)
            .style("text-transform", "uppercase")
            .style("fill", "#41ab5d")
​
        thisindustry.append("text")
            .attr("x", -175)
            .attr("y", 20)
            .text("Money Raised")
            .style("text-transform", "uppercase")
            .style("text-anchor", "middle")
            .style("fill", "#41ab5d")
            .style("font-weight", 700)
            .attr("transform", "rotate(-90)")
​
        var findmax = [];
        industry.values.forEach(function(d){
            findmax.push(+d.money_raised)
        })
​
        var redgreen = d3.scaleQuantize()
                .domain([0, 7000000000])
                .range(["#a50026","#d73027","#f46d43","#fdae61","#a6d96a","#66bd63","#1a9850","#006837"]);
    
        var xScale = d3.scaleLinear()
                    .domain([new Date(2015, 4, 1), new Date()])
                    .range([70, w - 40])
​
        var yScale = d3.scalePow()
                    .exponent(.5)
                    .domain([0, d3.max(findmax)])
                    .range([300, 40])
​
        var rScale = d3.scaleLinear()
                    .domain([0, d3.max(findmax)])
                    .range([1, 5])
​
        var valueline = d3.area()
           // .curve(d3.curveBasis)
            .x(function(d) { return xScale(new Date(d.created_at)); })
            .y1(function(d) { return yScale(d.money_raised); })
            .y0(function(d) { return yScale(0); });
​
        var makek = d3.format(".1s");
        var month = d3.timeFormat("%b %Y")
        var xAxis = d3.axisBottom(xScale).tickValues([new Date('June 2015'), new Date('April 2017')]).tickFormat(function(e){ return month(e)});
        var yAxis = d3.axisLeft(yScale).ticks(3).tickFormat(function(e){ return makek(e)});
​
        thisindustry.append('g').attr('class', 'axis')
            .attr('transform', 'translate(0, 300)')
            .call(xAxis)
​
        thisindustry.append('g').attr('class', 'axis')
            .attr('transform', 'translate(70, 0)')
            .call(yAxis);
​
        thisindustry.append("path")
            .datum(industry.values)
            .style("fill", color(d3.max(findmax)))
            .style("stroke", color(d3.max(findmax)))
            .style("opacity", .5)
            //.style("stroke-width", 3)
            .attr("d", valueline)
​
        thisindustry.selectAll(".industry")
            .data(industry.values)
            .enter()
                .append("circle")
                .attr("cx", function(d){ 
                    return xScale(new Date(d.created_at))})
                .attr("cy", function(d){ return yScale(d.money_raised)})
                .attr("r", function(d){ return rScale(d.money_raised)})
                .attr("fill", "white")
                .attr("stroke", function(d){ return color(d3.max(findmax))})
                .attr("stroke-width", 1)
                .on("mouseenter", function(d){
                    tip.show(d);
                    d3.select(this)
                        .style("stroke-width", 3)
                })
                .on("mouseleave", function(d){
                    tip.hide(d);
                    d3.select(this)
                        .style("stroke-width", 1)
                })
​
        thisindustry.selectAll(".industrynames")
            .data(industry.values)
            .enter()
                .append("text")
                .attr("x", function(d){ 
                    return xScale(new Date(d.created_at)) + 7})
                .attr("y", function(d){ return yScale(d.money_raised) + 5})
                .text( function(d){ 
                    if (rScale(d.money_raised) > 2.5) {
                        return d.name;
                    }})
                .style("fill", "black")
                .style("font-size", 12)
                .call(wrapt, 150)
    }
    })
​
}
​
  
function wrapt(text, width) {
    text.each(function () {
        var text = d3.select(this),
            words = text.text().split(/\s+/).reverse(),
            word,
            line = [],
            lineNumber = 0,
            lineHeight = 1.1, // ems
            x = text.attr("x"),
            y = text.attr("y"),
            dy = 0, //parseFloat(text.attr("dy")),
            tspan = text.text(null)
                        .append("tspan")
                        .attr("x", x)
                        .attr("y", y)
                        .attr("dy", dy + "em");
        while (word = words.pop()) {
            line.push(word);
            tspan.text(line.join(" "));
            if (tspan.node().getComputedTextLength() > width) {
                line.pop();
                tspan.text(line.join(" "));
                line = [word];
                tspan = text.append("tspan")
                            .attr("x", x)
                            .attr("y", y)
                            .attr("dy", ++lineNumber * lineHeight + dy + "em")
                            .text(word);
            }
        }
    });
}
 </script>
</body>
​
</html>
​
    