bgeffrault

@bgeffrault·5 public vizzes

Fork of Missing Migrants Date Histogram

A histogram visualizes the monthly sum of dead and missing migrants from the Missing Migrants Dataset, with time on the x-axis and total fatalities on the y-axis. Built with React and D3 v5, it uses `d3.bin` to group reported dates into monthly thresholds and `d3.sum` to aggregate the "Total Dead and Missing" values for each bin. The SVG chart includes custom axis components, a tooltip via SVG `<title>`, and a Poppins-styled interface.

Nov 20, 2021

Loading thumbnail…

Fork of Polished World Map

This map visualization displays global city populations as proportional circles overlaid on a world map with country boundaries, graticules, and interior borders. The map uses a Natural Earth projection, with data sourced from the World Atlas TopoJSON and a clean CSV of world cities. Built with React and D3 v5, the code leverages `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.geoGraticule` for the geographic elements, while `d3.scaleSqrt` maps population values to circle radii. The SVG rendering is styled with a cohesive gray and teal palette.

Nov 19, 2021

Loading thumbnail…

Styles bar chart

This scatter plot visualizes the Iris dataset, showing sepal length versus sepal width for three flower species. The chart uses React for component structure and renders as SVG. D3’s `scaleLinear` handles the axes, while `csv` from d3 loads the dataset. Data points are colored by species—purple for setosa and versicolor, green for virginica—and each circle includes a native SVG `<title>` tooltip. Axis labels and ticks are styled with CSS, and the layout applies fixed margins.

Nov 12, 2021

Loading thumbnail…

Fork of Styles bar chart

This bar chart displays the top 10 most populous countries, using data from the United Nations World Population Prospects 2019. It renders React components that generate SVG, with d3.scaleBand for the categorical y-axis and d3.scaleLinear for the population x-axis. The chart includes formatted tick labels, axis lines, and tooltips via SVG `<title>` elements, while d3.csv loads the dataset.

Nov 12, 2021

Loading thumbnail…

Fork of Hello HTML

A yellow smiley face rendered in SVG, composed of a circle for the head, two eyes, and an arc for the mouth. It uses React to create the SVG elements and d3.arc to draw the mouth path. The code imports React, ReactDOM, and the arc function from d3, then renders the face within a React component using JSX, with d3.v7 and React 17 loaded via CDN.

Oct 24, 2021