Film Director Filmography Profile Block for React

Edit FILMS in the Ark file: each film has a title, a year, a genre, its length in minutes, its budget and box office in tenths of a million (42 is $4.2M), its awards as text and its crew as [role, name] pairs. The axis top is rounded up from the biggest box office, the bar heights, the counts in the person badge and the "earned back" multiple are worked out from the data. A film with no awards simply has an empty list.

The bars are a few spans on a fixed axis with the same numbers printed in text, so the chart needs no chart code, ports to every framework unchanged, and every bar can be a real radio with a spoken name ("Night Ledger, 2017, box office $14.0M, 1 award"). Nothing is hidden behind a hover: the figure is above each bar and the film's details are in the rows below it.

It dims the films of other genres to a faint tint and takes them out of the tab order; it never removes them, so the axis, the bars and the height of the panel stay exactly where they were. The status line says how many films are lit ("2 of 8 films lit, the rest dimmed."). If the film you had picked is dimmed by the new filter, the first film that is lit is picked instead.

The bars are native radios in one group named "Films by box office, in release order", so Tab enters at the picked film and the arrow keys move to the next and previous lit film, picking each. Dimmed films are disabled and are skipped. The star is decoration repeated in each bar's name as the number of awards, and the figures above the bars are hidden from screen readers because the names already say them.

The chart's axis and bars always run left to right (they are a time axis), and the numbers inside them keep their order; everything around the chart follows the page's direction, with names isolated. The picked bar is full weight and the others a mid tint, and the picked year is bold, so no meaning rests on shade alone. The status line is a polite live region present from the start and the entrance is a CSS fade that stops under reduced motion.

Everything is typed sample data: picking a film or a genre only changes the page and the status line, and the awards, festivals and collaborators are invented. To wire it up, pass your films into FILMS (a server component can do it), keep the helpers that scale the bars and sum the awards, and add links from the collaborators to their own pages in your app.