rayhindman

@rayhindman·6 public vizzes

Fork of Canvas Force Tutorial

This example visualizes a force-directed network of people and their weighted connections. It uses D3 v5’s `d3.forceSimulation` with `forceLink`, `forceX`, `forceY`, `forceCollide`, and `forceManyBody` to position nodes, and renders the graph on a Canvas element via the 2D context’s `arc`, `moveTo`, and `lineTo` methods. Data is loaded from a CSV file specifying source, target, and weight. The simulation updates the drawing on each tick, producing an animated, interactive layout.

Jul 13, 2021

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal web page that renders the text “Hello HTML” at a very large font size, centered on the screen. It uses inline CSS to set the body’s text alignment and font size, and a small JavaScript snippet that logs “Hello JavaScript!” to the browser’s developer console. The page itself contains no external libraries or data sources, relying solely on standard HTML, CSS, and JavaScript. The code highlights the basic structure for combining markup, styling, and scripting in a single file.

Jul 13, 2021

Loading thumbnail…

FlogoDiffer_D3Starter

This example demonstrates how to combine D3 version 6 with React and DataTables to create an interactive data table. It loads COVID-19 bed status data from a remote CSV file, parses it with `d3.csvParseRows`, and renders a sortable, searchable table using the jQuery DataTables plugin. The page also includes React-managed dropdown selectors for choosing a car and a component, though these are not wired to any data operations. The code uses D3's `d3.text` for fetching data and React's `ReactDOM.render` to mount the application.

Jul 10, 2021

Loading thumbnail…

FDiff00

An interactive animated chart visualizes median family wealth in the US from 1983 to 2016, segmented by race, with data from Urban Institute and US Census via TidyTuesday. Users select a race from a menu to update both a scatter plot of points and a bar chart of lines. The visualization reveals stark wealth disparities, showing White families' median wealth nearly eight times that of Black and Hispanic families, and highlights the sharp decline following the 2007-08 housing crash. The rendering uses D3.js 6.7.0 with `scaleLinear` and `transition` for smooth updates, and SVG animations with circle and line elements.

Jul 4, 2021

Loading thumbnail…

Sample-Flogo-Bar-Chart

This bar chart displays the top 10 most populous countries for 2020, ordered by population size, with a tooltip showing the formatted value for each bar. The chart is rendered as an SVG using React, with D3 v5 for data processing (CSV parsing), scales, and axis formatting (scaleBand, scaleLinear, format). The code also includes a separate, commented-out dataset and function for loading Flogo import statistics, suggesting an alternative view of TIBCO Flogo project components. Population data originates from the United Nations World Population Prospects 2019.

Jun 28, 2021

Loading thumbnail…

fm

This bar chart displays the population of the 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. The chart is rendered using D3 v5 and SVG, with length-encoded bars representing each country's population in thousands. The visualization employs D3's `scaleLinear` and `scaleBand` for scales, along with `axisLeft` and `axisBottom` for axes, and includes a title. The data is loaded from a CSV file, and the bars are styled with a steelblue fill.

Jun 28, 2021