Advent of Code, Day 4: Responsive D3 Chart in an Ember Component

Day 4!

Today’s progress

Sorted vegetables by start date

Updated the data model to calculate the harvest date by the days to maturity

Changed the scale to start 15 days before the first planting and end 15 days after the last harvest to save space on screen. This also allows things to start before January and end after December.

Made the chart responsive

Making the chart responsive took me down a weird rabbit hole. I tried using a computed property and then a bunch of different addons, but none of that worked. So I went the old-school route and wrapped the chart drawing in a function and then added an event listener to remove the chart and redraw it. There is probably a more elegant way to handle it, but I don’t know what it is.

window.addEventListener('resize', function() { selectAll('svg').remove(); drawChart(); });

Today’s commits:

change tick format to months and sort data

move to relative scales

responsive chart

Tomorrow’s goal:

Add a form to add new elements and update the chart