Retina Canvas

Block-a-Day #13. A quick demonstration of scaling a canvas for high-DPI (retina) displays.

What I Learned: I had forgotten that when setting width and height as styles with D3, you need to add the “px” or else it won’t take.

What I’d Do With More Time: I was considering creating an option to simulate the effect for non-high-DPI displays, but it wasn’t worth the effort, so if viewed on a 1x display, the same image will be shown on both sides.

Block-a-Day

Just what it sounds like. For fifteen days, I will make a D3.js v4 block every single day. Rules:

1. Ideas over implementation. Do something novel, don’t sweat the details.
2. No more than two hours can be spent on coding (give or take).
3. Every. Single. Day.

Previously

• Map to Force-Directed Graph
• Brushable Scatterplot/Choropleth
• Treemap Bar Chart
• Triangular Scatterplot
• Choropleth with Animated Stripes
• Collatz Conjecture
• Bouncing Logo
• Rectangular Collision Detection
• Demers Catogram
• Gooey Exploding Scatterplot
• Zoomable Choropleth
• Zoomable Treemap Bar Chart