sghanapuram

@sghanapuram·2 public vizzes

Text Wrap

This bar chart displays the percentage of people leaving Facebook, with each bar labeled by a humorous reason, such as "Family in feud with Zuckerbergs" and "Discovered how to 'like' things mentally." The chart uses React for the user interface and D3.js (v4) for rendering SVG graphics. The code employs `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the numeric y-axis, and a custom `wrap` function that utilizes SVG text manipulation to split long labels across multiple lines, ensuring they fit within each bar’s width.

Mar 19, 2020

Loading thumbnail…

HTML Starter

This example uses D3.js v5 and React to render a simple SVG smiley face on a 960x500 canvas. The code draws a yellow circle for the face, two black circles for eyes, and a curved path for the smile. It uses D3’s `select` to target the SVG element and the `arc` generator to create the smile’s arc shape. The rendering approach relies entirely on static SVG attributes, with no data binding or interactivity.

Feb 20, 2020