Makeover Monday slopechart

forked from tomshanley's block: Makeover Monday draft

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;top:0;right:0;bottom:0;left:0;font-family: Georgia, serif; }
    path { display: none}
    line { stroke: lightGrey }
    rect { shape-rendering: crispEdges; stroke: white; stroke-width: 2px; }
   
  </style>
</head>

<body>
  <script>
    var data = [
 {
   "industry": "Wholesale and retail trade",
   "employmentShare": 0.15,
   "jobAutomation": 0.44
 },
 {
   "industry": "Manufacturing",
   "employmentShare": 0.08,
   "jobAutomation": 0.46
 },
 {
   "industry": "Administrative and support services",
   "employmentShare": 0.08,
   "jobAutomation": 0.37
 },
 {
   "industry": "Transportation and storage",
   "employmentShare": 0.05,
   "jobAutomation": 0.56
 },
 {
   "industry": "Professional, scientific and technical",
   "employmentShare": 0.09,
   "jobAutomation": 0.26
 },
 {
   "industry": "Human health and social work",
   "employmentShare": 0.12,
   "jobAutomation": 0.17
 },
 {
   "industry": "Accommodation and food services",
   "employmentShare": 0.07,
   "jobAutomation": 0.26
 },
 {
   "industry": "Construction",
   "employmentShare": 0.064,
   "jobAutomation": 0.24
 },
 {
   "industry": "Public administration and defence",
   "employmentShare": 0.043,
   "jobAutomation": 0.32
 },
 {
   "industry": "Information and communication",
   "employmentShare": 0.041,
   "jobAutomation": 0.27
 },
 {
   "industry": "Financial and insurance",
   "employmentShare": 0.032,
   "jobAutomation": 0.32
 },
 {
   "industry": "Education",
   "employmentShare": 0.087,
   "jobAutomation": 0.09
 },
 {
   "industry": "Arts and entertainment",
   "employmentShare": 0.029,
   "jobAutomation": 0.22
 },
 {
   "industry": "Other services",
   "employmentShare": 0.027,
   "jobAutomation": 0.19
 },
 {
   "industry": "Real estate",
   "employmentShare": 0.017,
   "jobAutomation": 0.28
 },
 {
   "industry": "Water, sewage and waste management",
   "employmentShare": 0.006,
   "jobAutomation": 0.63
 },
 {
   "industry": "Agriculture, forestry and fishing",
   "employmentShare": 0.011,
   "jobAutomation": 0.19
 },
 {
   "industry": "Electricity and gas supply",
   "employmentShare": 0.004,
   "jobAutomation": 0.32
 },
 {
   "industry": "Mining and quarrying",
   "employmentShare": 0.002,
   "jobAutomation": 0.23
 },
 {
   "industry": "Domestic personnel and self-subsistence",
   "employmentShare": 0.003,
   "jobAutomation": 0.08
 }
]
    
    const width = 200;
    const height = 700;
    const margin = {"top": 50, "left": 300, "right": 300, "bottom": 100};
    const radius = 5;
    
    var maxJobAutomation = d3.max(data, function(d) { return d.jobAutomation; });
    var maxTotal = d3.max(data, function(d) { return d.jobAutomation * d.employmentShare; })
    
		var yScaleJobAutomation = d3.scaleLinear()
    .range([height,0])
    .domain([0,maxJobAutomation]);
    
    var yScaleTotal = d3.scaleLinear()
    .range([height,0])
    .domain([0,maxTotal]);
    
    
    var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)

var chart = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    
    var industries = chart.selectAll(".industry")
    .data(data)
    .enter()
    .append("g")
    .attr("class", "industry")
    .attr("transform", "translate(0,0)");
    
    industries.append("line")
    .attr("x1", 0)
    .attr("y1", function(d) { return yScaleJobAutomation(d.jobAutomation); })
    .attr("x2", width)
    .attr("y2", function(d) { return yScaleTotal(d.employmentShare * d.jobAutomation); })
    .style("stroke", "black")
    .style("stroke-width", "2px")
    .style("opacity", 0.5)

industries.append("circle")
    .attr("cx", 0)
    .attr("cy", function(d) { return yScaleJobAutomation(d.jobAutomation); })
    .attr("r", radius)
    .style("fill", "black")
    .style("stroke", "white")
    .style("stroke-width", "2px");
    
    
    industries.append("circle")
    .attr("cx", width)
    .attr("cy", function(d) { return yScaleTotal(d.employmentShare * d.jobAutomation); })
    .attr("r", radius)
    .style("fill", "black")
    .style("stroke", "white")
    .style("stroke-width", "2px");
    
    industries.append("text")
    .text(function(d) { return d.jobAutomation > 0.35 ? d.industry : ""; })
    .attr("x", -5)
    .attr("y", function(d) { return (yScaleJobAutomation(d.jobAutomation)) + 5; })
    .style("text-anchor", "end");
    
    industries.append("text")
    .text(function(d) { return (d.employmentShare * d.jobAutomation) > 0.02 ? d.industry : ""; })
    .attr("x", width + 5)
    .attr("y", function(d) { return yScaleTotal(d.employmentShare * d.jobAutomation); })
    .style("text-anchor", "start");

function formatPercentage(n) {
      var roundedN = Math.round(n * 1000);
      return roundedN/10 + "%";
    };

</script>
</body>

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