title: D3.js: Data grouping/calculations/conversions, custom shapes, custom X-axis
body: <p>I got a task here where I'm stuck on various levels. Hope I can get some help here, at least with some basic hints and pointers where to look.</p>
  <ol>
  <li>Changing bars and axes according to radio or range input: That part already works (I used this example as a starting point: <a href="https://bl.ocks.org/martinjc/8a2a545d5c48ef1ff65b747554332e3d" rel="nofollow noreferrer">https://bl.ocks.org/martinjc/8a2a545d5c48ef1ff65b747554332e3d</a>)</li>
  <li>Raw data (CSV) holds each day of each year, but the bars are supposed to be grouped by week.</li>
  <li>X-axis labels should be months, not weeks or days. I guess that's where <a href="https://github.com/d3/d3-axis/blob/v3.0.0/README.md#axis_tickArguments" rel="nofollow noreferrer">https://github.com/d3/d3-axis/blob/v3.0.0/README.md#axis_tickArguments</a> come into place.</li>
  <li>Y axis: The amount of days with snow (not just a scale of snow in centimeters)</li>
  <li>For each year, I have to insert a custom shape/text in the right position (highest amount
  of snow - can be between week-bars) -&gt; &quot;Optimales Datum!&quot; in the
  attached screen.</li>
  <li>For certain dates (bank holidays) I have to show another custom shape/text, with some calculation -&gt; &quot;Fasnacht&quot; in the attached screen.</li>
  </ol>
  <p>The raw data looks just like:
  weather_station,date,snow_cm
  SMA,20210116,40</p>
  <p>Can D3 somehow help with grouping / aggregating data by week? Is it better to do some calculations before D3 calls it?</p>
  <p>How can I put some custom shapes and text exactly where I want, i.e. get the correct X and Y position, draw a vertical line, and place shape and text above it? If we take this code as an example, the max value item is identified already: <a href="https://bl.ocks.org/martinjc/8a2a545d5c48ef1ff65b747554332e3d" rel="nofollow noreferrer">https://bl.ocks.org/martinjc/8a2a545d5c48ef1ff65b747554332e3d</a></p>
  <pre><code>var max_value = d3.max(csv_data, function(d) {
    return d.value;
  });
  </code></pre>
  <p>Is it at all possible to put stuff underneath the SVG?</p>
  <p>It's the first time I'm trying to do something custom with D3. I do have some experience with HighCharts, but I was thinking D3 would serve me better here.</p>
  <p>All help is highly appreciated.</p>
  <p>Design of what is expected to turn out:
  <img src="https://i.stack.imgur.com/rPV2H.png" alt="Design of what is expected to turn out" /></p>