Skip to main content
Log in
B

bigstonecompany

@bigstonecompany·9 public vizzes

Loading thumbnail…

Fork of Working with Time

This example shows a scatter plot of temperature readings over time from the Data Canvas Sense Your City dataset. Each circle represents a temperature measurement, with the x-axis displaying days and the y-axis showing temperature values, using tooltips for precise day information. The visualization is built with React components that render SVG elements, using D3’s `scaleTime`, `scaleLinear`, `extent`, and `csv` for data loading and scaling. The code defines reusable axis and mark components, with axis labels and tick formatting applied via React props.

Jan 2, 2022
Loading thumbnail…

Fork of Sized Points on a Map

A world map displays cities with populations over 50,000 as semi-transparent circles, sized by population using a square-root scale. The visualization uses React to render SVG marks, with d3.geoNaturalEarth1 and d3.geoPath for the map projection and country boundaries. City data comes from the Simplemaps World Cities Database, and the map includes graticules and interior borders from World Atlas TopoJSON, styled with light gray fills and strokes.

Jan 2, 2022
Loading thumbnail…

Fork of Polished World Map

A stylized world map renders country boundaries from World Atlas TopoJSON data, with landmasses filled in teal and internal borders drawn as thin strokes. The visualization uses the d3.geoNaturalEarth1 projection, d3.geoPath, and d3.geoGraticule to draw the sphere, graticules, and country features, while React manages the component structure and SVG output. The map presents a polished, clean aesthetic suitable for geographic reference.

Jan 1, 2022
Loading thumbnail…

a

This visualization combines a world bubble map with a time-series bar chart to explore missing migrant incidents by location and date. Circles sized proportionally to the total dead and missing count are projected using `d3.geoNaturalEarth1` and `d3.geoPath`, overlaid on land features and graticules from TopoJSON. A linked brush on the histogram, built with `d3.brushX`, filters the map’s data by reported date. React’s `useMemo` optimizes rendering, and the data originates from the Missing Migrants Project CSV.

Jan 1, 2022
Loading thumbnail…

Fork of Migrant Deaths Linked Views with Fast Brushing

This interactive visualization combines a world map and a time-series histogram to explore migrant deaths. The map displays circles sized by the number of dead and missing migrants, while the histogram shows monthly totals. Users can brush over the histogram to filter the map’s circles dynamically. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` for geographic rendering, while the histogram employs `d3.brushX` and `d3.bin` for aggregation. React’s `useMemo` optimizes rendering performance. Data comes from the Missing Migrants Project CSV.

Jan 1, 2022
Loading thumbnail…

Fork of Fork of Multiple Views Cleanup

This visualization combines a bubble map with a date histogram to explore migration incidents. The map uses a Natural Earth projection to plot circles scaled by the square root of the total dead and missing, with landmasses and graticules rendered via `d3.geoPath` and `d3.geoGraticule`. The histogram below aggregates the same data by month, using `d3.histogram` and `d3.timeMonths` for binning. Both views are built with React and SVG, drawing from the Missing Migrants dataset.

Jan 1, 2022
Loading thumbnail…

Fork of Multiple Views Cleanup

This example overlays a bubble map with a date histogram to show the geographic distribution and monthly totals of dead and missing migrants. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` to render land, graticules, and interiors, with circles scaled by `d3.scaleSqrt`. The histogram, created with `d3.histogram` and `d3.timeMonths`, sums values per month. Both views are built with React, rendered as SVG, and styled with a teal color scheme. Data comes from the Missing Migrants Project CSV.

Jan 1, 2022
Loading thumbnail…

Fork of Working with Time

This example shows a scatter plot of temperature readings over time from the Data Canvas Sense Your City dataset. Each circle represents a temperature measurement, with the x-axis displaying days and the y-axis showing temperature values, using tooltips for precise day information. The visualization is built with React components that render SVG elements, using D3’s `scaleTime`, `scaleLinear`, `extent`, and `csv` for data loading and scaling. The code defines reusable axis and mark components, with axis labels and tick formatting applied via React props.

Jan 1, 2022
Loading thumbnail…

my_HTML_Starter

This example displays a static “Hello World!” message centered on a blank page, demonstrating the foundational structure of an HTML document with embedded CSS styling and JavaScript. The page uses a CSS class to set the font size and text alignment of the message, while the HTML body contains the content. No external libraries are used; the example relies solely on core web technologies—HTML for markup, CSS for presentation, and JavaScript for potential interactivity. It serves as a minimal template for building more complex visualizations from scratch.

Dec 24, 2021