David Brum Soares

@davidbsoares·5 public vizzes

Fork of Migrant Deaths Linked Views with Fast Brushing

This interactive visualization displays reported migrant deaths and missing persons globally, plotted as circles on a natural Earth projection with graticules. A linked date histogram below enables temporal brushing with `d3.brushX`, filtering the map’s circles in real time. Built with React and `d3.geoPath` for map rendering, it uses `d3.scaleSqrt` for circle sizing and `d3.histogram` for binning. Data comes from the Missing Migrants Project CSV, with world atlas TopoJSON providing country boundaries.

Aug 27, 2024

Loading thumbnail…

Fork of Missing Migrants Date Histogram

This fork of the Missing Migrants visualization displays a date histogram of the total dead and missing migrants per month. It uses React with D3 v5, leveraging `d3.bin` with `timeMonths` thresholds and `d3.sum` to aggregate data from the Missing Migrants Dataset. The SVG rendering includes custom axis components and rectangles with tooltips, demonstrating a clean React-D3 integration pattern.

Aug 24, 2024

Loading thumbnail…

Fork of Polished World Map

This example displays a world map with country boundaries rendered as SVG paths, styled with teal landmasses, graticules, and interior borders. It uses React to manage the component hierarchy and D3’s `geoNaturalEarth1` projection with `geoPath` to draw geographic features from World Atlas TopoJSON data. The `useData` hook fetches the TopoJSON file, converts it to GeoJSON via the `feature` and `mesh` functions from topojson, and renders the sphere, graticules, land areas, and interior boundaries.

Jul 26, 2024

Loading thumbnail…

Fork of Stylized Line Chart

This example uses React and D3 v7 to render a stylized line chart of weekly temperature data for San Francisco, sourced from the Data Canvas Sense Your City dataset. The visualization plots temperature over time using a smooth natural curve, generated with D3’s `line()` and `curveNatural` helper, with axes constructed from `scaleTime` and `scaleLinear`. Custom React components for the bottom and left axes render tick marks and labels, while the SVG path is drawn with a teal stroke and rounded line caps, set via CSS classes.

Jul 24, 2024

Loading thumbnail…

Fork of HTML Starter

This example displays a yellow circle with a thick black outline and two smaller unfilled circles, rendered as static SVG elements. The code uses the HTML `<svg>` element with explicit coordinates and dimensions set on each `<circle>` child. No JavaScript libraries are employed; the visualization relies solely on inline SVG and CSS for styling. The data is hardcoded within the markup, demonstrating a basic static chart without interactive behavior.

Jul 18, 2024