start birth month chart

016_/index.html

@@ -131,9 +131,11 @@ <h2></h2>
           </div>
         </div>
         <!-- END OF NOBEL-VIZ  -->
+        <div id="nobel-birth-month">thing bob</div>
       </div>
     </div>
     <!-- THIRD-PARTY JAVASCRIPT LIBRARIES, MAINLY D3 BASED -->
+
     <script src="static/libs/d3.min.js"></script>
     <script src="static/libs/topojson.min.js"></script>
     <script src="static/libs/crossfilter.min.js"></script>

016_/static/js/nbviz_birth_month.mjs

@@ -0,0 +1,78 @@
+import nbviz from "./nbviz_core.mjs";
+
+let chartHolder = d3.select("#nobel-birth-month");
+
+let margin = { top: 20, right: 20, bottom: 30, left: 40 };
+
+let boundingRect = chartHolder.node().getBoundingClientRect();
+let width = boundingRect.width - margin.left - margin.right,
+  height = boundingRect.height - margin.top - margin.bottom;
+let xPaddingLeft = 20;
+
+// SCALE
+let xScale = d3.scaleBand().range([xPaddingLeft, width]).padding(0.1);
+
+let yScale = d3.scaleLinear().range([height, 0]);
+
+// AXES
+let xAxis = d3.axisBottom().scale(xScale);
+
+let yAxis = d3
+  .axisLeft()
+  .scale(yScale)
+  .ticks(10)
+  .tickFormat(function (d) {
+    if (nbviz.valuePerCapita) {
+      return d.toExponential();
+    }
+    return d;
+  });
+
+let svg = chartHolder
+  .append("svg")
+  .attr("width", width + margin.left + margin.right)
+  .attr("height", height + margin.top + margin.bottom)
+  .append("g")
+  .classed("chart", true)
+  .attr("transform", `translate(${margin.left},${margin.top})`);
+
+function updateBirthMonthBarChart(data) {
+  //   data = data.filter((d) => d.value > 0);
+  //   data = data.slice(0, 20);
+  //   xScale.domain(data.map((d) => d.code));
+  // yScale.domain([0, d3.max(data, (d) => +d.value)]);
+  //   svg
+  //     .select(".x.axis")
+  //     .call(xAxis)
+  //     .selectAll("text")
+  //     .style("text-anchor", "end")
+  //     .attr("dx", "-.8em")
+  //     .attr("dy", ".15em")
+  //     .attr("transform", "rotate(-65)");
+  //   svg.select(".y.axis").call(yAxis);
+  //   let bars = svg
+  //     .selectAll(".bar")
+  //     .data(data)
+  //     .join((enter) =>
+  //       enter.append("rect").attr("class", "bar").attr("x", xPaddingLeft)
+  //     )
+  //     .attr("x", (d) => xScale(d.code))
+  //     .attr("width", xScale.bandwidth())
+  //     .attr("y", (d) => yScale(0))
+  //     .attr("height", (d) => height - yScale(0))
+  //     .transition()
+  //     .duration(800)
+  //     .delay((d, i) => i * 10)
+  //     .attr("y", (d) => yScale(d.value))
+  //     .attr("height", (d) => height - yScale(d.value))
+  //     .attr("value", (d) => d.value);
+  //   svg.selectAll(".bar").on("mouseenter", function (e) {
+  //     console.log(this.getAttribute("value"));
+  //   });
+}
+
+nbviz.callbacks.push(() => {
+  let data = nbviz.getLaureateBirthMonth();
+  console.log(data);
+  updateBirthMonthBarChart(data);
+});

016_/static/js/nbviz_core.mjs

@@ -47,6 +47,10 @@ nbviz.makeFilterAndDimensions = (winnersData) => {
 
   nbviz.categoryDim = nbviz.filter.dimension((o) => o.category);
 
+  nbviz.dateOfBirth = nbviz.filter.dimension((o) =>
+    o.date_of_birth.slice(5, 7)
+  );
+
   // nbviz.genderDim.filter(); // reset gender dimension
   // var countryGroup = nbviz.countryDim.group();
   // countryGroup.all();
@@ -83,6 +87,10 @@ nbviz.getCountryData = function () {
   return data;
 };
 
+nbviz.getLaureateBirthMonth = function () {
+  return nbviz.dateOfBirth.group().all();
+};
+
 nbviz.callbacks = [];
 
 nbviz.onDataChange = function () {

016_/static/js/nbviz_details.mjs

@@ -62,7 +62,6 @@ let displayWinner = function (wData) {
   } else {
     nw.select("#picbox img").style("display", "none");
   }
-  console.log(wData.bio_image);
 
   nw.select("#readmore a").attr(
     "href",

016_/static/js/nbviz_main.mjs

@@ -4,6 +4,7 @@ import { initMap } from "./nbviz_map.mjs";
 import "./nbviz_bar.mjs";
 import "./nbviz_details.mjs";
 import "./nbviz_time.mjs";
+import "./nbviz_birth_month.mjs";
 
 Promise.all([
   d3.json("static/data/world-110m.json"),