A mobile layout adapts a user interface or visualization to a phone’s smaller screen, portrait orientation, and touch-based interaction. Responsive charts may reduce labels, change orientation, expose values directly, or provide scrolling instead of forcing a desktop design into limited space. section 9.3.3 section 9.4
A practical responsive chart can distinguish layouts and update only the parts that need to change:
- Define a desktop layout when the window is at least 700 pixels wide; otherwise use the mobile layout. section 9.2.2
- Reduce the y-axis from 10 ticks on desktop to 5 ticks on mobile, making larger phone labels less crowded. section 9.2.2
- During resizing, detect when the window crosses the 700-pixel boundary, update the axis generator, and transition the existing y-axis. section 9.2.2
- For a cramped bar chart, render a mobile component with horizontal bars, framework names on the y-axis, and rounded percentages at bar tips. section 9.3.3
let isDesktopLayout = windowWidth >= 700 ? true : false;
Use a layout flag to switch responsive behavior at the 700-pixel breakpoint. section 9.2.2
leftAxis = d3.axisLeft(yScale) .ticks(isDesktopLayout ? 10 : 5);
Select the number of y-axis ticks from the current layout state. section 9.2.2
Reorienting a bar chart
A desktop bar chart places framework names along the x-axis, but those names become cramped on a phone. A mobile version uses horizontal bars, moves names to the y-axis, and displays awareness percentages at the ends of the bars. section 9.3.3
Not every visualization should be squeezed into a mobile layout. Intricate radial charts may need a different chart type; large datasets may need a static image; maps and networks may need zooming and panning; interactive charts need comfortable touch targets. When orientation must stay unchanged, horizontal scrolling can preserve room for exploration. section 9.4
