SadafNaseem

@SadafNaseem·5 public vizzes

Map with D3.js!

This example shows an interactive world map rendered with D3.js, displaying country boundaries and names using SVG. It uses `d3.geoNaturalEarth1` for the projection and `d3.geoPath` to generate the geography from TopoJSON world-atlas data (110m resolution) with country names joined from a TSV file. Countries highlight red on hover, and `d3.zoom` enables pan and zoom interactions on the map.

Oct 5, 2021

Loading thumbnail…

Fork of Customizing Axes

This bar chart displays the top 10 most populous countries, with population values sourced from the United Nations World Population Prospects 2017. It demonstrates D3 axis customization, using `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and `d3.axisBottom` to render formatted tick labels. The SVG chart is styled via CSS, with grid lines and custom fonts. Data is loaded from a CSV file and scaled by 1000.

Oct 5, 2021

Loading thumbnail…

Scatter Plot

This scatter plot demonstrates animated transitions of fruit-shaped circles, updating as fruits are added, removed, or change type. The visualization uses D3 v5’s data join pattern with key functions, merging enter and update selections, while applying ordinal color and radius scales. A 1000-millisecond transition animates circle positions and radii when the dataset changes. The code imports `scaleOrdinal`, `select`, and `range` from D3, rendering SVG circles inside a 960×500 viewport, with transitions triggered by timed `setTimeout` modifications to the fruit array.

Sep 22, 2021

Loading thumbnail…

Fork of Let's make a face with D3.js!

This visualization demonstrates a yellow smiley face built with D3.js, featuring two eyes and a curved mouth created using an SVG path with the d3.arc() API. The face’s eyebrows, rendered as rectangles, move vertically through a chained transition that animates their transform attribute up and down over two-second intervals. The code uses d3.select and d3.arc from the D3 v5 library to construct the SVG elements, with eyebrows shifting smoothly via transition.duration, while the static face parts remain fixed on a 960×500 canvas.

Aug 15, 2021

Loading thumbnail…

Fork of Let's make a face with D3.js!

This fork of “Let's make a face with D3.js!” displays a yellow smiley face with eyes, eyebrows, and a mouth drawn as SVG shapes. The eyebrows animate upward and then back down over four seconds using chained `transition` calls on a group element. The code constructs the face with D3 selections, `arc` for the mouth path, and transitions that modify the `transform` attribute of the eyebrow group.

Aug 10, 2021