Fahimeh Saleh

@fahimeh-saleh·5 public vizzes

D3 SVG Primitives

This example demonstrates basic SVG shape primitives rendered with D3.js in a React environment. It displays rectangles, circles, ellipses, and lines with static styling, showcasing fundamental SVG element creation. The code uses D3 version 4 selections to append shapes directly to an SVG canvas, loading data from a CSV file for positioning. A second version uses `d3.scaleLinear` and `d3.interpolateBlues` to map data values to circle radii and fill colors, with mouseover and mouseout events controlling opacity to highlight individual circles.

Oct 20, 2020

Loading thumbnail…

MouseMover

This example demonstrates a React application that loads a CSV dataset and displays a message about the number of rows it contains. The application uses the `d3.csv` API to fetch data from a remote gist URL, and the React `useState` hook to manage the loading state. A large, centered message shows either "Still Loading" while data is being fetched, or the row count once the CSV is parsed. The visualization is minimal, focusing on the data-loading workflow rather than graphical rendering, with a large 13em font size for the text output.

Oct 20, 2020

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the ten most populous countries, using a horizontal bar layout where country names appear on the y-axis and population values extend along the x-axis. The visualization loads its data from the United Nations World Population Prospects 2019 via a CSV file, processed by D3’s `csv` function. Built with React and SVG, the code uses D3’s `scaleBand` for the categorical y-axis, `scaleLinear` for the population scale, and `format('.2s')` to abbreviate large numbers. Tooltips showing formatted population values appear on hover, styled with a Poppins font.

May 25, 2020

Loading thumbnail…

Making a bar chart

This example demonstrates how to build a simple bar chart from a CSV dataset of country populations, initially rendering all rectangles with fixed dimensions. The code uses D3 v5’s `scaleLinear` to later map population values to bar widths, while the `csv` method parses the data file and converts population strings to numbers. SVG elements are created via a data join with `selectAll('rect').data().enter()`, though the current implementation only appends static rectangles without encoding data values.

May 25, 2020

Loading thumbnail…

Smiley Face with D3.js

This example uses D3.js to render a simple SVG smiley face on a red background. The code selects the SVG element and applies a red fill via `svg.style`, while CSS styles define yellow strokes for the face’s lines and paths. It is built with React and D3 v5, using the `select` API from the `d3` module. The visualization is minimal, focusing on basic SVG styling and D3’s selection method rather than data binding.

May 25, 2020