bootshine2

US States Heatmap of Bee Colony Loss

This interactive map visualizes annual bee colony loss across US states, with a dropdown to switch between percent loss, colony count, and beekeeper count metrics. The choropleth uses a blue sequential color scale applied through `d3.scaleThreshold`, mapping each state’s value to its fill. States are drawn as SVG paths generated by `d3.geoPath` with a `d3.geoAlbersUsa` projection from TopoJSON data, while hover effects and a tooltip (via `d3-tip`) highlight individual states. The data comes from a CSV file loaded with `d3.csv`, and the interface is built using React components.

Oct 30, 2019

Steve's Scatter Plot with Color, Legend, and Dropdown

This interactive scatter plot from a React and D3 v5 codebase visualizes bee colony loss data. The x-axis is selectable via an HTML dropdown, allowing users to compare percent loss, colony count, or beekeeper count per year. Each state is represented by a colored circle using `d3.scaleOrdinal`, with a corresponding legend. The chart uses SVG rendering and incorporates custom axes built with `d3.scaleLinear` for positioning, sourced from a CSV file.

Oct 30, 2019

D3 v5 Zoomable Sunburst of Bee Colony Statistics in the US

A zoomable sunburst chart displays US bee colony statistics, breaking down each state by year and further by loss, beekeepers, and colony counts. The interactive visualization allows users to click on segments to drill down into the hierarchy, with animated transitions smoothly rescaling the arcs. Built with D3 v5, it uses the `d3.hierarchy` and `d3.partition` layouts, renders via SVG, and animates with `transition.attrTween`. Data comes from a generated `flare.json` file, ported from an Observable notebook, with colors assigned per top-level state category.

Oct 30, 2019

Treemap of Bee Colonies, Beekeepers, and Bee Colony Loss Numbers by State

This treemap visualizes bee colony loss numbers, beekeepers, and colony counts across US states from 2010 to 2016. The hierarchy nests each state by year, with leaf nodes representing the three metrics. Users can toggle between summing by colony size or counting each statistic, triggering a smooth animated transition. The visualization uses d3.treemap with d3.treemapResquarify, d3.hierarchy, and d3.scaleOrdinal for coloring, rendering SVG cells with clip-paths and labels. Data comes from a generated flare.json file based on USDA survey data.

Oct 24, 2019

Bee Colony Loss Data JSON File String Maker

This example demonstrates how to convert the bee colony loss dataset from CSV format into a hierarchical JSON string suitable for visualization. It uses React with D3 v5 to parse the data file via `d3.csv`, then manually constructs the string by iterating through rows and tracking state and year transitions. The resulting JSON structure nests data by state, year, and metric categories like loss, beekeepers, and colonies, as output to the console for copy-paste use.

Oct 24, 2019

Steve's Scatter Plot with Color and Legend

This scatter plot visualizes bee colony loss percentages across years, with each circle representing a state and color encoding the state name. The visualization uses d3.scaleLinear for the x and y axes, d3.scaleOrdinal for the color mapping, and React components for rendering SVG axes, marks, and a color legend. Data is loaded as CSV via d3.csv from a GitHub gist, with tooltips showing loss values on hover through SVG title elements.

Oct 24, 2019

Treemap from bl.ocks.org

A treemap visualization displays the hierarchical structure of the flare.json dataset, with nested rectangles sized by either node size or leaf count. The interactive chart allows toggling between these two aggregation modes via radio buttons, triggering a smooth animated transition. Built with D3 v4, the visualization uses `d3.treemap`, `d3.hierarchy`, and `d3.scaleOrdinal` for coloring, rendering SVG cells with clipped text labels and tooltips.

Oct 23, 2019

Fixed projection for US States

This example displays a choropleth map of US states, with most states colored gray, a subset of states highlighted in orange, and one state (likely Alaska) highlighted in yellow. The map is rendered as SVG using d3.geoPath with no explicit projection, leaving the raw coordinates intact. It loads data from the us-10m.v1.json TopoJSON file and converts it to GeoJSON using topojson.feature. The visualization uses d3.select and d3.json to fetch and bind the data, and d3.set to identify selected state IDs.

Oct 17, 2019

My USA Map

This example displays a map of the United States rendered with a light blue sphere background and dark landmasses, using the `geoAlbersUsa` projection and `d3.geoPath` to draw geographic features. It loads US topology data from `us-atlas@1` via `useData`, which fetches a JSON file and processes it with `topojson.feature` and `topojson.mesh` to extract land and interior boundaries. The React component renders SVG paths for the sphere, land polygons, and interior borders, with styling applied through CSS classes in a Poppins-font page.

Oct 17, 2019

Untitled

This is a radial tree visualization of a hierarchical dataset of world countries, organized by continent and subregion. The visualization uses d3.cluster to compute the radial layout and d3.zoom with SVG transforms for panning and zooming. Text labels are rotated and positioned based on depth within the hierarchy, with leaf nodes placed along the outer edge. The data is loaded from a local JSON file using d3.json.

Oct 17, 2019

Steve's Scatter Plot of State Lats and Longs

A scatter plot maps longitude and latitude coordinates for U.S. states, with each state colored categorically via a d3.scaleOrdinal legend. Built with React and D3 v5, the visualization uses scaleLinear axes, SVG circles for marks, and a tooltip formatted with d3.format. The data is loaded as CSV from a GitHub gist, and axes and legends are rendered as reusable React components.

Points on My World Map

This example displays a world map using a spherical projection with landmasses, graticules, and city points plotted as circles. The map is rendered as an SVG using React, with the D3 library's `geoEqualEarth` projection and `geoPath` for geographic shapes. City coordinates are loaded from a CSV file via D3's `csv` function, while geographic data comes from the world-atlas TopoJSON. Each city is positioned by projecting its longitude and latitude through the D3 projection, creating a global scatterplot overlay.

My World Map

This example displays a world map using the geoEqualEarth projection, with landmasses, country borders, graticules, and a surrounding sphere. The visualization is built with React and D3 v5, using d3.geoPath to render geographic features from the world-atlas TopoJSON dataset. Land areas are filled in brown, interiors are stroked with a neutral color, and graticules appear in blue. The map is rendered as SVG, with data loaded and processed through d3.json and TopoJSON's feature and mesh methods.

Sized Points on a Map

This example shows a world map with cities represented as sized points, where circle radius encodes each city’s population using a square-root scale. It uses d3.geoNaturalEarth1 and d3.geoPath to render land, graticules, and interiors from World Atlas TopoJSON, while city data comes from a Simplemaps CSV loaded via d3.csv. The React component passes a d3.scaleSqrt to SVG circles, with rendering handled in React and styling via CSS.

Steve's Interactive Scatter Plot with Color and Legend

This interactive scatter plot visualizes the Iris dataset, mapping petal length against sepal width for individual flowers. Using React and D3 v5, the SVG-based visualization employs `d3.scaleLinear` for both axes and `d3.scaleOrdinal` for species-based coloring. Hovering over the color legend highlights the corresponding species by fading other points to 30% opacity, while native SVG `<title>` elements provide basic tooltips. The chart includes labeled axes and a species legend, with data loaded asynchronously via D3’s `csv` parser.

Steve's Scatter Plot with Color and Legend

This scatter plot visualizes the Iris dataset, showing petal length on the x-axis and sepal width on the y-axis, with each point colored by species. The visualization uses React components to render SVG elements, with d3.scaleLinear for positional axes and d3.scaleOrdinal for categorical coloring. A color legend identifies the three species, and hovering over points reveals tooltips. The chart is built with d3.v5 and React, using axes created from reusable React components.

Oct 9, 2019

Sized Points on a Map

Oct 9, 2019

Bee Colony Statistics by State and Year

A grid of colored rectangles maps bee colony loss percentages across U.S. states and years, revealing a random pattern with no clear geographic or temporal hotspots. Each cell encodes loss severity through a red color scale, with tooltips showing state, year, and percent loss for individual data points. The visualization is built using Vega-Lite API, React, and D3, loading data from a CSV of Bee Colony Loss statistics. The vega-lite-api `markRect` function encodes state on the x-axis and year on the y-axis, with color intensity representing the percentage loss.

Oct 3, 2019

Steve's Scatter Plot with Menus

A scatter plot of the Iris dataset, featuring interactive dropdown menus to select which numerical attribute (sepal length, sepal width, petal length, petal width) maps to the x- and y-axes. The visualization is built with React and D3 v5, using d3.scaleLinear for axes and d3.extent for data domains. Each point is an SVG circle with a tooltip showing the x-value, and axis labels update dynamically based on menu selections. The dataset is loaded via d3.csv from a remote URL.

Oct 3, 2019

Steve's Menus with React Example

This example demonstrates a pet selector interface built with React, showing how a dropdown menu updates a displayed value through component state. The App component uses the useState hook to track the selected pet, initially set to "hamster," and passes the options array and change handler to a custom Dropdown component. The Dropdown renders a native select element, mapping each option to an item and triggering the onSelectedValueChange callback on user input. The example uses React 16.9.0 and ReactDOM to render the interface, with inline styles for large label and select text.

Oct 3, 2019

Steve's React Starter

This example demonstrates a minimal React application that renders a "Hello React!" message to the page. It uses React 16.9.0 and ReactDOM to mount a single `App` component into a `#root` element. The code imports React and ReactDOM directly, defines the component as a simple function, and calls `ReactDOM.render` to display it. This starter serves as a baseline for building more complex React-based visualizations, with styling set to remove default body margins and hide overflow.

Oct 2, 2019

Fireworks on Canvas

This visualization displays a dynamic field of colorful dots that radiate outward and pulse in a circular pattern, evoking the effect of a fireworks display against a fading black backdrop. The animation is driven by a generative mathematical formula based on a grid of parameters, where each dot’s position is calculated from trigonometric functions of time, and its hue shifts through a rainbow spectrum. The code utilizes the Canvas `getContext('2d')` API for all drawing, with `fillStyle`, `fillRect`, and `arc` methods to render the fading trails and circles, and `requestAnimationFrame` for the continuous animation loop.

Sep 26, 2019

My World Map

Sep 26, 2019

Stylized Scatter Plot

A stylized scatter plot uses the classic Iris Dataset to visualize the relationship between petal length and sepal width. The code loads data with `d3.csv`, scales the x and y values using `d3.scaleLinear`, and renders the plot as SVG circles within a React component. Custom axis components built with React and D3 format tick labels, while the `Poppins` font and teal-colored marks give the visualization a modern, styled appearance.

Stylized Scatter Plot

This example visualizes the Iris Dataset as a scatter plot, mapping petal length on the x-axis and sepal width on the y-axis. Each flower is rendered as a circular mark, with a native SVG tooltip showing the x-value on hover. The visualization uses React components to structure the axes and marks, while D3 scaleLinear and extent functions handle the data scaling. Axes are drawn with custom D3 ticks and gridlines, styled with a Poppins font and teal color scheme, with source text shown while data loads.

Steve's stylized barchart

This example displays the top 10 most populous countries as a horizontal bar chart, with country names on the y-axis and population counts on the x-axis. The React app loads United Nations World Population Prospects 2019 data via `csv`, then uses `scaleBand` and `scaleLinear` to position bars. SVG rectangles render the marks with tooltips, while custom `AxisBottom` and `AxisLeft` components draw tick lines and labels using D3's scale methods.

Steve's refactored barchart

This interactive bar chart displays the top 10 most populous countries, using horizontal bars whose lengths represent population figures from the United Nations World Population Prospects 2019 dataset. Built with React and D3 v5, it renders axes and marks as SVG elements, leveraging `scaleBand`, `scaleLinear`, and custom components for the bottom axis, left axis, and rectangular bars. Data is loaded asynchronously via D3’s `csv` function, then sorted and sliced before being passed to the scales. The visualization includes axis lines, tick labels, and country names for clarity.

Loading and Parsing CSV Data for Bee Colony Census Data by County

This example loads a CSV file of bee colony census data by county and displays a summary of its size in the browser, showing the file’s kilobyte count, number of rows, and number of columns in large text. It demonstrates both `d3.csv` for parsing and an alternative async/await approach with `fetch` and `d3.csvParse`. The data, sourced from Data World via a GitHub gist, contains agricultural district and colony value columns, but no chart is rendered—only the dataset’s structural metrics are presented.

Loading and Parsing CSV Data for Bee Colony Loss Data

This example demonstrates loading and parsing a CSV dataset of bee colony loss statistics, displaying the file size, row count, and column count in large text. It uses D3 v5’s `d3.csv` method to fetch and parse the data from a GitHub gist, while commented alternatives show the same workflow with the Fetch API, `d3.csvParse`, and async/await. The original data originates from a Data World spreadsheet covering U.S. state-level colony and beekeeper figures.

Loading and Parsing CSV Data for Bee Colony Census Data by State

This example demonstrates how to load and parse a CSV file containing bee colony census data by US state, displaying summary statistics about the dataset. The program uses the `d3.csv` API to fetch the remote CSV file and `d3.csvFormat` to calculate its size, then presents the file size in kilobytes, the number of rows, and the number of columns as text output. The code relies on D3 version 5 and retrieves data from a Gist-hosted CSV file originally sourced from Data World.

Percent Bee Colony Loss by State and Year - a Vega-Lite MarkSquare Heatmap

This heatmap displays the percentage of bee colony loss across US states and years, with each square colored by the magnitude of loss. The visualization reveals no clear geographic or temporal patterns, suggesting colony loss is random and consistent nationwide. Built with Vega-Lite API using the `markSquare` function, it encodes state on the x-axis, year on the y-axis, and loss percentage as color. Data comes from a CSV loaded via d3.csv, with rendering handled by Vega and vega-tooltip for interactive inspection.

Agricultural District Prominence of Bee Colony Population by State - Hue Variation of Ag District by State (X axis) and Year (Y axis)

This visualization uses circles to show the prominence of bee colony populations across agricultural districts in each state over time. The X-axis represents the state, the Y-axis represents the year of the census, and the color hue indicates the specific agricultural district. Built with the Vega-Lite API, it uses `markCircle` to encode data from the Bee Colony Census Data by County CSV file, with `fieldN` and `fieldT` mappings for categorical and temporal axes. The visualization is rendered using D3.js and Vega-Lite, with a custom tooltip revealing district details.

Bee Colonies by State as Surveyed Across Time

This visualization displays a point for each U.S. state, with the size of each point encoding the number of bee colonies surveyed in that state for a given year, and the x-axis showing states sorted alphabetically while the y-axis represents the survey year. The chart is rendered using the Vega-Lite API, leveraging the `markPoint` function and the separation of data by color. It loads survey data from a CSV file using d3’s `csv` function, and applies custom configuration for axis styling and label readability.