Startup Industries

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

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 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)
    }
    })

}

</html>

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

https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.min.js

https://unpkg.com/topojson@3