dhoboy · March 26, 2020 03:57
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!doctype html>
 <head>
  <meta charset="utf-8">
  <title>Japan COVID19</title>
  <link rel="stylesheet" href="./styles.css">
 </head>
 <body>
  <div id="main"></div>
  <div id="key"></div>
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <script src="./index.js"></script>
 </body>
diff --git a/index.js b/index.js
 const margin = {top: 30, right: 30, bottom: 50, left: 70};
 const width = 1000 - margin.left - margin.right;
 const height = 500 - margin.top - margin.bottom;

 const x = d3.scaleBand()
  .range([0, width])
  .padding(0.2)

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

 const yAxis = d3.axisLeft(y)
  .ticks(10);

 const xAxis = d3.axisBottom(x);

 const svg = d3.select("#main").append("svg")
  .attr("viewBox", `0 0 ${width + margin.left + margin.right} ${height + margin.top + margin.bottom}`)
  .attr("width", "100%")
  .attr("height", "100%")
  .append("g")
  .attr("transform", `translate(${margin.left},${margin.top})`);

 const tooltip = d3.select("body")
  .append("div")
  .attr("id", "tooltip")
  .style("position", "absolute")
  .style("z-index", "10")
  .style("visibility", "hidden");

 d3.csv("Japan-Data-3-25-2020.csv").then(data => {  
  const statuses = [
    "Unspecified", 
    "Hospitalized", 
    "Recovered", 
    "Discharged", 
    "Deceased",
  ];

  let nestedAgeAndStatus = d3.nest()
    .key(d => d["Age Bracket"])
    .key(d => d["Status"])
    .entries(data.map(d => {
      d['Age Bracket'] = +d['Age Bracket'];
      isNaN(d['Age Bracket']) ? d['Age Bracket'] = "Unspecified" : d['Age Bracket'] = d['Age Bracket'];
      return d;
    }));

  nestedAgeAndStatus = nestedAgeAndStatus.map(raw => {
    let groups = raw.values.map(d => {
      if (d.key === "") {
        d.key = "Unspecified";
      }
      return d;
    }).reduce((prev, next) => {
      prev[next.key] = {
        key: next.key,
        data: next.values,
      };
      return prev;
    }, {});

    return {
      "AgeRange": raw.key,
      "Unspecified": groups["Unspecified"] ? groups["Unspecified"].data.length : 0,
      "Hospitalized": groups["Hospitalized"] ? groups["Hospitalized"].data.length : 0,
      "Recovered": groups["Recovered"] ? groups["Recovered"].data.length : 0,
      "Discharged": groups["Discharged"] ? groups["Discharged"].data.length : 0,
      "Deceased": groups["Deceased"] ? groups["Deceased"].data.length : 0,
    };
  });

  const stack = d3.stack()
    .keys(statuses)
    .order(d3.stackOrderNone)
    .offset(d3.stackOffsetNone);
  
  const series = stack(nestedAgeAndStatus);

  x.domain(nestedAgeAndStatus.sort((a, b) => { 
    if (a.AgeRange === "Unspecified") return 1; // push "Unspecified" to the back of the array
    if (b.AgeRange === "Unspecified") return -1;
    if (+a.AgeRange < +b.AgeRange) return -1;
    if (+a.AgeRange > +b.AgeRange) return 1;
    return 0;
  }).map(d => d.AgeRange));

  y.domain([0, d3.max(nestedAgeAndStatus.map(d => {
    return Object.keys(d).reduce((prev, next) => {
      if (next !== "AgeRange") {
        prev += d[next];
        return prev;
      }
      return 0;
    }, 0);
  }))]);

  const color = d3.scaleOrdinal()
    .domain(series.map(d => { return d.key; }))
    .range(["#737373", "#fed976", "#abdda4", "#2b83ba", "#bd0026"])
    .unknown("#ccc")

  // bars
  svg.append("g")
    .selectAll("g")
    .data(series)
    .join("g")
      .attr("fill", d => color(d.key))
    .selectAll("rect")
    .data(d => d)
    .join("rect")
      .attr("x", (d, i) => x(d.data.AgeRange))
      .attr("y", d => y(d[1]))
      .attr("height", d => y(d[0]) - y(d[1]))
      .attr("width", x.bandwidth())
      .on("mouseover", d => {     
        tooltip.html("");
        tooltip.append("p").attr("class", "header");
        tooltip.append("p").attr("class", "sub-header");
        tooltip.append("p").attr("class", "body");

        tooltip.select(".header").text(`Age Range: ${d.data.AgeRange}`);
        tooltip.select(".sub-header").text(`Status`);

        const body = tooltip.select(".body").selectAll('.status')
          .data(statuses)
          .enter()
          .append("div")
          .attr("class", "status");
        
        body.append("div")
          .attr("class", "color")
          .style("background-color", d => color(d));

        body.append("div").text(v => `${v}: ${d.data[v]}`);
        
        return tooltip.style("visibility", "visible");
      })
      .on("mousemove", function(d) {
        let { pageX, pageY } = d3.event;
        let left = pageX + 10;
        let top = pageY - 10;
        
        if (d.data.AgeRange === "90") {
          left = pageX - 200;
          top = pageY - 80;
        } else if (d.data.AgeRange === "Unspecified") {
          left = pageX - 250;
          top = pageY - 80;
        }

        return tooltip.style("top", `${top}px`).style("left", `${left}px`);
      })
      .on("mouseout", function() {
        return tooltip.style("visibility", "hidden");
      });
  
  // axes
  svg.append("g")
    .attr("class", "x axis")
    .attr("transform", `translate(0, ${height})`)
    .call(xAxis)
    .append("g")
    .attr("class", "label")
    .append("text")
    .attr("transform", `translate(${width}, 0)`)
    .attr("y", 42)
    .attr("x", 20)
    .text("Age Range");
  
  svg.append("g")
    .attr("class", "y axis")
    .call(yAxis)
    .append("g")
    .attr("class", "label")
    .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", -46)
    .attr("x", 10)
    .text("Confirmed Cases");

  // key
  const key = d3.select("#key").selectAll(".entries")
    .data(statuses)
    .enter()
    .append("div")
    .attr("class", "entry");
  
  key.append("div")
    .attr("class", "color")
    .style("background-color", d => color(d));

  key.append("div").text(d => d);

 }); 
diff --git a/Japan-Data-3-25-2020.csv b/Japan-Data-3-25-2020.csv
diff --git a/styles.css b/styles.css
 .axis text {
  font-size: 1.2rem;
  fill: #333;
 }

 .axis .label text {
  text-anchor: end;
  font-size: 1rem;
 }

 #key, #key .entry {
  display: flex;
  flex-direction: row;
 }

 #key {
  font-size: 0.8rem;
  font-family: sans-serif;
  justify-content: space-around; 
 }

 #key .entry .color {
  height: 14px;
  width: 14px;
  margin-right: 3px;
 }

 #tooltip {
  background-color: #f7f7f7;
  padding: 3px 12px;
  font-size: 1rem;
  font-family: sans-serif;
  border: 1px solid #bbbbbb;
  border-radius: 5px;
  box-shadow: 1px 1px 4px #bbbbbb;
 }

 #tooltip .body .status {
  display: flex;
  flex-direction: row;
 }

 #tooltip .body .status .color {
  height: 10px;
  width: 10px;
  margin: auto 3px auto 0;
 }

 #tooltip p {
  font-weight: normal;
  font-family: monospace;
  margin: 5px 0;
 }

 #tooltip p.header {
  margin-bottom: 10px;
 }

 #tooltip p.sub-header {
  border-bottom: 1px solid;
 }

 #tooltip p.body { 
  margin-top: -3px;
 }

 /* tablet */
 @media (min-width: 768px) {
  #key, .axis text {
    font-size: 1rem;
  }
  .axis .label text {
    font-size: 0.9rem;
  }
  #tooltip {
    font-size: 1.2rem;
  }
  #key .entry .color {
    height: 16px;
    width: 16px;
    margin-right: 5px;
  }
 } 

 /* large desktop */
 @media (min-width: 1200px) {
  #key {
    font-size: 1.2rem;
  }
  #tooltip {
    font-size: 1.4rem;
  }
  .axis .label text {
    font-size: 0.7rem;
  }
  #key .entry .color {
    height: 21px;
    width: 21px;
    margin-right: 8px;
  }
 }
diff --git a/thumbnail.png b/thumbnail.png
	<!doctype html>
	<head>
	<meta charset="utf-8">
	<title>Japan COVID19</title>
	<link rel="stylesheet" href="./styles.css">
	</head>
	<body>
	<div id="main"></div>
	<div id="key"></div>
	<script src="https://d3js.org/d3.v5.min.js"></script>
	<script src="./index.js"></script>
	</body>
	const margin = {top: 30, right: 30, bottom: 50, left: 70};
	const width = 1000 - margin.left - margin.right;
	const height = 500 - margin.top - margin.bottom;

	const x = d3.scaleBand()
	.range([0, width])
	.padding(0.2)

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

	const yAxis = d3.axisLeft(y)
	.ticks(10);

	const xAxis = d3.axisBottom(x);

	const svg = d3.select("#main").append("svg")
	.attr("viewBox", `0 0 ${width + margin.left + margin.right} ${height + margin.top + margin.bottom}`)
	.attr("width", "100%")
	.attr("height", "100%")
	.append("g")
	.attr("transform", `translate(${margin.left},${margin.top})`);

	const tooltip = d3.select("body")
	.append("div")
	.attr("id", "tooltip")
	.style("position", "absolute")
	.style("z-index", "10")
	.style("visibility", "hidden");

	d3.csv("Japan-Data-3-25-2020.csv").then(data => {
	const statuses = [
	"Unspecified",
	"Hospitalized",
	"Recovered",
	"Discharged",
	"Deceased",
	];

	let nestedAgeAndStatus = d3.nest()
	.key(d => d["Age Bracket"])
	.key(d => d["Status"])
	.entries(data.map(d => {
	d['Age Bracket'] = +d['Age Bracket'];
	isNaN(d['Age Bracket']) ? d['Age Bracket'] = "Unspecified" : d['Age Bracket'] = d['Age Bracket'];
	return d;
	}));

	nestedAgeAndStatus = nestedAgeAndStatus.map(raw => {
	let groups = raw.values.map(d => {
	if (d.key === "") {
	d.key = "Unspecified";
	}
	return d;
	}).reduce((prev, next) => {
	prev[next.key] = {
	key: next.key,
	data: next.values,
	};
	return prev;
	}, {});

	return {
	"AgeRange": raw.key,
	"Unspecified": groups["Unspecified"] ? groups["Unspecified"].data.length : 0,
	"Hospitalized": groups["Hospitalized"] ? groups["Hospitalized"].data.length : 0,
	"Recovered": groups["Recovered"] ? groups["Recovered"].data.length : 0,
	"Discharged": groups["Discharged"] ? groups["Discharged"].data.length : 0,
	"Deceased": groups["Deceased"] ? groups["Deceased"].data.length : 0,
	};
	});

	const stack = d3.stack()
	.keys(statuses)
	.order(d3.stackOrderNone)
	.offset(d3.stackOffsetNone);

	const series = stack(nestedAgeAndStatus);

	x.domain(nestedAgeAndStatus.sort((a, b) => {
	if (a.AgeRange === "Unspecified") return 1; // push "Unspecified" to the back of the array
	if (b.AgeRange === "Unspecified") return -1;
	if (+a.AgeRange < +b.AgeRange) return -1;
	if (+a.AgeRange > +b.AgeRange) return 1;
	return 0;
	}).map(d => d.AgeRange));

	y.domain([0, d3.max(nestedAgeAndStatus.map(d => {
	return Object.keys(d).reduce((prev, next) => {
	if (next !== "AgeRange") {
	prev += d[next];
	return prev;
	}
	return 0;
	}, 0);
	}))]);

	const color = d3.scaleOrdinal()
	.domain(series.map(d => { return d.key; }))
	.range(["#737373", "#fed976", "#abdda4", "#2b83ba", "#bd0026"])
	.unknown("#ccc")

	// bars
	svg.append("g")
	.selectAll("g")
	.data(series)
	.join("g")
	.attr("fill", d => color(d.key))
	.selectAll("rect")
	.data(d => d)
	.join("rect")
	.attr("x", (d, i) => x(d.data.AgeRange))
	.attr("y", d => y(d[1]))
	.attr("height", d => y(d[0]) - y(d[1]))
	.attr("width", x.bandwidth())
	.on("mouseover", d => {
	tooltip.html("");
	tooltip.append("p").attr("class", "header");
	tooltip.append("p").attr("class", "sub-header");
	tooltip.append("p").attr("class", "body");

	tooltip.select(".header").text(`Age Range: ${d.data.AgeRange}`);
	tooltip.select(".sub-header").text(`Status`);

	const body = tooltip.select(".body").selectAll('.status')
	.data(statuses)
	.enter()
	.append("div")
	.attr("class", "status");

	body.append("div")
	.attr("class", "color")
	.style("background-color", d => color(d));

	body.append("div").text(v => `${v}: ${d.data[v]}`);

	return tooltip.style("visibility", "visible");
	})
	.on("mousemove", function(d) {
	let { pageX, pageY } = d3.event;
	let left = pageX + 10;
	let top = pageY - 10;

	if (d.data.AgeRange === "90") {
	left = pageX - 200;
	top = pageY - 80;
	} else if (d.data.AgeRange === "Unspecified") {
	left = pageX - 250;
	top = pageY - 80;
	}

	return tooltip.style("top", `${top}px`).style("left", `${left}px`);
	})
	.on("mouseout", function() {
	return tooltip.style("visibility", "hidden");
	});

	// axes
	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", `translate(0, ${height})`)
	.call(xAxis)
	.append("g")
	.attr("class", "label")
	.append("text")
	.attr("transform", `translate(${width}, 0)`)
	.attr("y", 42)
	.attr("x", 20)
	.text("Age Range");

	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis)
	.append("g")
	.attr("class", "label")
	.append("text")
	.attr("transform", "rotate(-90)")
	.attr("y", -46)
	.attr("x", 10)
	.text("Confirmed Cases");

	// key
	const key = d3.select("#key").selectAll(".entries")
	.data(statuses)
	.enter()
	.append("div")
	.attr("class", "entry");

	key.append("div")
	.attr("class", "color")
	.style("background-color", d => color(d));

	key.append("div").text(d => d);

	});
	.axis text {
	font-size: 1.2rem;
	fill: #333;
	}

	.axis .label text {
	text-anchor: end;
	font-size: 1rem;
	}

	#key, #key .entry {
	display: flex;
	flex-direction: row;
	}

	#key {
	font-size: 0.8rem;
	font-family: sans-serif;
	justify-content: space-around;
	}

	#key .entry .color {
	height: 14px;
	width: 14px;
	margin-right: 3px;
	}

	#tooltip {
	background-color: #f7f7f7;
	padding: 3px 12px;
	font-size: 1rem;
	font-family: sans-serif;
	border: 1px solid #bbbbbb;
	border-radius: 5px;
	box-shadow: 1px 1px 4px #bbbbbb;
	}

	#tooltip .body .status {
	display: flex;
	flex-direction: row;
	}

	#tooltip .body .status .color {
	height: 10px;
	width: 10px;
	margin: auto 3px auto 0;
	}

	#tooltip p {
	font-weight: normal;
	font-family: monospace;
	margin: 5px 0;
	}

	#tooltip p.header {
	margin-bottom: 10px;
	}

	#tooltip p.sub-header {
	border-bottom: 1px solid;
	}

	#tooltip p.body {
	margin-top: -3px;
	}

	/* tablet */
	@media (min-width: 768px) {
	#key, .axis text {
	font-size: 1rem;
	}
	.axis .label text {
	font-size: 0.9rem;
	}
	#tooltip {
	font-size: 1.2rem;
	}
	#key .entry .color {
	height: 16px;
	width: 16px;
	margin-right: 5px;
	}
	}

	/* large desktop */
	@media (min-width: 1200px) {
	#key {
	font-size: 1.2rem;
	}
	#tooltip {
	font-size: 1.4rem;
	}
	.axis .label text {
	font-size: 0.7rem;
	}
	#key .entry .color {
	height: 21px;
	width: 21px;
	margin-right: 8px;
	}
	}