trentjhn

@trentjhn·5 public vizzes

Fork of Rendering Data with React & D3

This visualization displays Caribbean island data loaded from a CSV file as colorful elements in an SVG canvas. React manages the application state and renders the SVG output, while D3 utilities handle data loading and coordinate calculations. The code imports `csv` for fetching the dataset, `arc` and `pie` for computing arc paths, and `scaleBand` for potential scaling operations. When data loads, the app maps each row to a `<rect>` element, though the commented-out code reveals the intended radial burst layout using computed start and end angles formatted as SVG path data.

Oct 29, 2022

Loading thumbnail…

Fork of Loading Data with React & D3

This example demonstrates how to load and summarize a CSV dataset of CSS named colors within a React application. It uses D3’s `csv` function to fetch the data asynchronously, then displays a text summary of file size, row count, and column count using React state and hooks. The visualization itself is plain text rendered in a `<pre>` element, with React’s `useEffect` and `useState` managing the loading state and data. The code highlights the integration of D3 data loading utilities with React’s component lifecycle.

Oct 29, 2022

Loading thumbnail…

Fork of React + D3 Viz Starter

This dashboard presents a multi-view analysis of user data, where a master-detail layout links filtered demographics to individual profiles. It uses React components with Ant Design’s `Layout` for the sidebar and content areas, while D3 v6 handles visual encodings. The app filters users by age and gender through interactive controls, updating a shared data array across all views. Selection of a specific user in one chart propagates to the other views, demonstrating coordinated state management. The rendering is fully SVG-based, with custom margins handled by a reusable `VizContainer` component per the margin convention.

Oct 29, 2022

Loading thumbnail…

Fork of Violations

This visualization presents a categorical bar chart of documented violations in Syria, showing the count aggregated by province and date. The chart uses a dark color scheme for readability. It loads a CSV file from a GitHub repository and processes it with d3.csv retrieval. The visualization is built using Vega-Lite API via the vl module, with tooltips enabled through the vega-tooltip Handler, and the chart dimensions are set to fit the browser window.

Oct 29, 2022

Loading thumbnail…

Test Interactive Covid 19 Fork

This interactive visualization compares earthquake deaths across regions using a bar chart and maps earthquake locations with seismic intensity on a world map. Users select start and end years from drop-down menus to filter the displayed time range. The bar chart uses D3 scales, axes, and bands, while the world map employs D3’s geoMercator projection, geoPath, and JSON-loaded GeoJSON data. Circle radii on the map linearly scale with Richter magnitude, tooltips reveal country names, and the map legend clarifies magnitude values.

Oct 29, 2022