Ananya157

@Ananya157·3 public vizzes

Google Maps Interactive

This interactive map displays world countries on a natural Earth projection, with hover effects highlighting individual nations. The visualization uses D3 v5’s geoNaturalEarth1 projection and geoPath to render SVG country boundaries from World Atlas TopoJSON data, while country names come from matching TSV metadata. A zoom behavior enables pan and zoom interactions, applied to a group element containing the map. Countries appear as light green shapes with dark strokes, turning red on hover, all rendered client-side in a React framework.

Aug 28, 2020

Loading thumbnail…

Bar Chart

This bar chart displays the top 10 most populous countries, with each country’s population represented by a horizontal bar. The visualization includes a zoom feature for exploring the data and interactive tooltips that show exact population values on hover. Built with React and D3 v5, it uses `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the SVG chart. The code employs `d3.zoom` for panning and zooming, and `transition.attr` for smooth opacity changes during mouse interactions, with data loaded from a CSV file.

Aug 28, 2020

Loading thumbnail…

Bar Chart

This example shows a stylized face constructed entirely from D3.js shapes. A yellow circle forms the head, with two black circles for eyes and an arc for the mouth. The eyebrows, rendered as rectangles, animate upward and then back down over two seconds each way. The visualization is built using D3 v5 within a React framework, utilizing SVG elements and a chained transition to create the simple motion effect.

Aug 11, 2020