muwu16

@muwu16·12 public vizzes

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a simple bar chart with no axes or labels, leaving the bars visually raw and unadorned. It loads United Nations population data from a CSV file, parses the 2020 values, and sorts the dataset before rendering. The visualization is built with React, using the `useState` and `useEffect` hooks to manage data loading, while D3’s `scaleBand` and `scaleLinear` map country names and population counts to SVG rectangles. The bars fill the full width and height of the SVG canvas, with no styling or annotations.

Aug 18, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This example renders a yellow smiley face that fills the browser window, using React to generate an SVG graphic. The face is centered, with the head, two eyes, and a mouth positioned relative to the viewport's center and dimensions, while the stroke width and offsets are defined as constants. The code relies on React's `ReactDOM.render` and JSX to create the SVG elements, and the HTML file loads React from a CDN. The initial hardcoded SVG markup is hidden in the HTML, showing the shift to a dynamic, computed approach.

Aug 18, 2021

Loading thumbnail…

Fork of Migrant Deaths Linked Views with Fast Brushing

This interactive visualization links a world map of migrant deaths with a time-series histogram, filtering the map’s bubbles by brushing over dates. Built with React and D3 v5, it uses `geoNaturalEarth1` and `geoPath` for the map, `scaleSqrt` for bubble sizes, and `brushX` to select date ranges. The scatterplot-like map marks cities with circles whose radii reflect total dead and missing, while the histogram bars aggregate monthly totals. Data comes from the Missing Migrants Project subset, with country boundaries from World Atlas TopoJSON, and rendering uses SVG with `useMemo` for performance.

Aug 15, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote URL, displaying the file size, row count, and column count in a large text area. It uses two parallel approaches: the D3.js `d3.csv` method for fetching and parsing, and the native JavaScript `fetch` API combined with `async`/`await` and `d3.csvParse`. The data source is the CSS Named Colors dataset from a GitHub Gist. The visualization itself is minimal, focusing on the process of data ingestion rather than visual encoding.

Aug 6, 2021

Loading thumbnail…

Fork of Multiple Views with Brushing

This interactive visualization combines a world map and a time-series histogram to explore migration incidents. A bubble map plots reported locations, with circle area scaled by the square root of the total dead and missing count. Below, a date histogram shows the same metric aggregated by month. Users can brush a time range on the histogram, which filters the map's displayed circles based on the selected date range. The map uses `d3.geoNaturalEarth1` projections, `d3.geoPath`, and `d3.geoGraticule` to render sphere, graticules, and land features from World Atlas TopoJSON. React manages state and rendering, while D3 v5 handles scales, binning (`d3.histogram`), time formatting, and the brushing interaction (`d3.brushX`). Data comes from the Missing Migrants Project subset.

Aug 4, 2021

Loading thumbnail…

Fork of Missing Migrants Date Histogram

This visualization displays the monthly total of dead and missing migrants as a date histogram, drawn with SVG in a React application using D3 v5. It uses `d3.bin` to group data into monthly time bins and `d3.sum` to aggregate the reported values per bin. The axes are generated with `d3.scaleTime` and `d3.scaleLinear`, with data sourced from the Missing Migrants Dataset.

Aug 3, 2021

Loading thumbnail…

Fork of Polished World Map

This example displays a world map with country boundaries and graticules, rendered as an SVG using React and D3. It loads TopoJSON data from the World Atlas, projecting landmasses with `geoNaturalEarth1` and drawing paths with `geoPath`. The visualization distinguishes land, interiors, and sphere with custom strokes and fills, presenting a polished cartographic view.

Aug 3, 2021

Loading thumbnail…

Fork of Axes with React & D3

This example uses React with D3 to render a horizontal bar chart of the top 10 most populous countries, based on United Nations World Population Prospects 2019 data. The visualization shows the population values as bars with x and y axes, where the x-axis displays tick marks generated by `d3.scaleLinear` and the y-axis lists country names using `d3.scaleBand`. The chart is drawn as an SVG within a React component, utilizing `useState` and `useEffect` to fetch and process the CSV data via `d3.csv`.

Aug 1, 2021

Loading thumbnail…

Fork of Rendering Data with React & D3

This example renders a radial burst of CSS named colors as SVG paths, loading the data from a CSV via `d3.csv`. React manages the component state, using `useState` and `useEffect` to fetch the data, then maps each color to a wedge. The arcs are computed manually by dividing the circle into equal angles, with `d3.arc` generating the path geometry and the fill set to each color’s hex value. The visualization updates as data loads, showing a loading message initially.

Aug 1, 2021

Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This visualization displays a scatter plot of automobile data from the UCI Auto MPG dataset, mapping fuel efficiency (mpg) against horsepower. Each point’s size encodes vehicle weight, while color distinguishes the country of origin. The chart uses the vega-lite-api DSL to construct the specification, with vega, vega-lite, and d3.csv handling data loading and rendering. Custom axis styles and tooltips are applied via vega-tooltip, and the view auto-fits to the window using vega’s autosize configuration.

Jul 30, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot explores the relationship between fuel efficiency (mpg) and horsepower across vehicles from different origins, with point size encoding weight and color indicating country of origin. Built using the Vega-Lite API on top of D3, the visualization leverages `vl.markCircle`, `vl.x().fieldQ()`, `vl.y().fieldQ()`, `vl.color().fieldN()`, and `vl.size().fieldQ()` to map the Auto MPG dataset from the UCI Machine Learning Repository. The code registers Vega-Lite specifications, applies a custom dark-themed configuration for readability, and renders to an SVG canvas with tooltips for inspecting data points.

Jul 30, 2021

Loading thumbnail…

Fork of HTML Starter

This example presents a minimal HTML page that uses CSS and JavaScript to render a single SVG circle. The SVG element contains a circle with a radius of 100 units, while the accompanying script logs a message to the browser’s developer console. The code leverages the React library via `index.js`, which calls `console.log(React)` to confirm the library is loaded. The page serves as a bare-bones starter template, demonstrating basic SVG rendering and JavaScript execution without additional data or interactive behavior.

Jul 29, 2021