dr-rompecabezas

@dr-rompecabezas·6 public vizzes

Fork of Migrant Deaths Linked Views with Fast Brushing

A linked-view visualization combines a bubble map and a time-series histogram to explore migrant deaths. The map projects incident locations using a natural Earth projection, with bubble size scaled by the square root of total dead and missing. A brush on the histogram filters the map's bubbles in real time. The code uses `d3.geoNaturalEarth1`, `d3.geoPath`, `d3.brushX`, and React's `useMemo` for efficient recomputation. Data comes from the Missing Migrants Project, and the visualization leverages D3 v5 and React for rendering.

May 22, 2021

Loading thumbnail…

Fork of Fatal Police Shootings In the U.S. Since 2015

A map of the United States displays fatal police shootings since 2015, with each incident plotted as a colored circle based on a selected attribute such as race, gender, or flee status. A bar chart in the corner shows the count of events per category, and an interactive legend highlights the geographic distribution of a specific value on hover. The visualization uses React with D3 v5, including `geoAlbersUsa`, `geoPath`, `scaleOrdinal`, and `scaleBand`, loading data from the Washington Post’s Fatal Police Shootings database and state boundaries from a TopoJSON atlas.

May 22, 2021

Loading thumbnail…

Fork of Sized Points on a Map

A world map displays cities with populations over 50,000 as semi-transparent teal circles, sized using a square-root scale that maps population to radius. The map includes natural Earth landmasses with graticules and country interiors, styled in muted grays. The visualization is built with React, using d3's `geoNaturalEarth1` projection and `geoPath` for rendering, while city data comes from Simplemaps and country boundaries from the World Atlas TopoJSON.

May 22, 2021

Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, mapping petal length against sepal width for three iris species. Hovering over a species name in the color legend fades all non-matching data points while highlighting the selected species. Built with React and D3 v5, the visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for color mapping, and d3.csv for data loading. All marks and axes are rendered as SVG elements, with CSS transitions controlled by React state handling hover interactions.

May 21, 2021

Loading thumbnail…

Fork of Stylized Bar Chart

This bar chart displays the top 10 most populous countries, using data from the United Nations World Population Prospects 2019. Animated transitions in the two axes and bars react to user interaction. The visualization is built with React and D3 v5, using `scaleBand` for the y-axis and `scaleLinear` for the x-axis, and renders SVG elements. Hovering over a bar reveals its population value through a native SVG `<title>` tooltip.

May 21, 2021

Loading thumbnail…

Fork of Working with Time

This scatter plot visualizes temperature readings over time from the Data Canvas Sense Your City dataset, using a React-based SVG rendering with D3 scales. The x-axis employs `scaleTime` with day-of-week tick formatting, while the y-axis uses `scaleLinear` for temperature values. Circle marks represent individual data points, with native SVG `<title>` elements providing tooltips. The code leverages React hooks via `useData` to asynchronously load and parse CSV data, alongside custom `AxisBottom`, `AxisLeft`, and `Marks` components that map scales to SVG elements.

May 15, 2021