topnep

Fork of Working With Time

This fork of “Working With Time” displays monthly totals of reported deaths and missing persons from a CSV dataset, rendered as a bar chart with a time-based x-axis. The React app uses D3 v5 functions including `scaleTime`, `scaleLinear`, `histogram` for binning, `timeMonths` for thresholds, and `sum` to aggregate values per bin. SVG bars are drawn via custom React components for axes and marks, with tooltips showing formatted dates. The chart imports data from `data.json` and applies a stylized font and teal color scheme.

Fork of Stylized Bar Chart

This example presents a horizontal bar chart of the ten most populous countries, based on United Nations World Population Prospects 2019 data. The chart uses SVG rectangles scaled by population on the x-axis, with country names on the y-axis. Built with React and D3 v5, it employs `scaleBand` and `scaleLinear` for axes, while the `csv` API loads the data. A tooltip showing the population value appears on hover. The visualization uses a Poppins font and a teal color for the bars.

Fork of Points on a Map

This interactive world map visualizes the locations of cities and missing migrant incidents using a Natural Earth projection. The view combines graticules, land masses, and country boundaries rendered as SVG paths via d3.geoPath. Circular marks are positioned by projecting longitude/latitude coordinates with d3.geoNaturalEarth1, with city data sourced from Simplemaps and incident data from a CSV file. The visualization is built with React and d3.v5, using topojson for world atlas data processing.

Fork of Testing D3 force layout

A force-directed network shows photographic collections and their creators, with nodes grouped into numbered items, catalog years, and photographer names. The visualization loads graph.json data and renders it as SVG using the D3 v3 force layout, with `d3.layout.force()` controlling node positions and link distances. Nodes display GitHub favicon images and text labels, while gray links represent connections with varying betweenness centrality values. The simulation updates positions on each tick, constraining nodes within the 960×500 viewport.

Fork of Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, displaying measurements of sepal length, width, and petal length and width as points. Dropdown menus let users select which attributes appear on the x and y axes, with axis labels updating accordingly. The React-based visualization uses D3 v5 scales and axes, with SVG circles representing data points and tooltips showing formatted values on hover.

Fork of Analysis using scatterplots

An interactive scatterplot visualizes median family wealth in the US from 1983 to 2016, split by race (White, Black, Hispanic) and normalized to 2016 rates. A dropdown menu switches between racial groups, with animated transitions updating both the scatterplot circles and vertical bar markers. Data comes from the Urban Institute and US Census via the #TidyTuesday project. The visualization uses D3.js (v6) APIs including `scaleLinear`, `axisBottom`, `axisLeft`, `transition`, and custom reusable chart functions. SVG rendering displays the plotted points and axes.

Fork of Loading Data with React & D3

This example visualizes CSS named colors as horizontal color bars, with each bar’s background set to its corresponding RGB hex value from the loaded dataset. The visualization loads the CSV data using D3’s `csv` utility, then manages the asynchronous data fetch through React’s `useState` and `useEffect` hooks. A loading message is displayed until the data arrives, after which the bars render in sequence. The code demonstrates a simple integration of D3 data-loading with React state management, using the `csv` API and ReactDOM to mount the component.

Fork of Vega-Lite API Template

This visualization uses a scatter plot to explore the relationship between miles per gallon and horsepower in classic automobiles, with points colored by country of origin and sized by vehicle weight. Built with the Vega-Lite API on top of Vega-Lite and Vega, it loads auto-mpg data from the UCI Machine Learning Repository via D3's CSV loader. The chart renders as SVG, fitting the browser window, with tooltips enabled through the Vega Tooltip handler and custom axis styling for readability.

Fork of Psuedo Spider Chart

A radial line chart displays a pseudo-spider web of concentric circles and radiating spokes, with seven orange data points connected by a semi-transparent polygon. The circular grid uses nine rings, labeled with values 5 through 45 at the top axis. Rendered as static SVG markup in a single HTML file, it uses hardcoded path and circle elements rather than a JavaScript library. The visualization relies on the Share Tech font and inline SVG styling, with no interactive behavior or data binding.

fetch data from csv

This example renders a single, extremely large number on a centered HTML page to demonstrate fetching data from a CSV file. It uses the built-in `fetch()` API to retrieve the CSV data, though the file path and processing logic are not defined. The page’s styling is minimal, relying on CSS for text alignment and font sizing, with JavaScript as the only interactive layer. The visualization is essentially a placeholder, showing how a fetched value could be displayed, but without actual data integration or parsing.