chengfengmf

@murphymeng·4 public vizzes

Fork of Pie chart in React & D3 - 1st attempt

This example demonstrates a four-slice pie chart created with React and D3.js v6, rendered as SVG elements. The chart divides a circle into colored arcs, with each slice’s color interpolated between two RGB values using D3’s `interpolateRgb` API. The pie geometry is computed via D3’s `pie` and `arc` functions, while React components (`SimplePieChart`, `Slice`) manage the rendering. An unused `Check` component shows a color ramp test using a five-item array.

May 5, 2021

Loading thumbnail…

Fork of HTML Starter

This example shows a single empty SVG canvas with a rectangle that has negative height and rounded corners. The rectangle is drawn using the SVG `rect` element with an `rx` and `ry` of 15, but since the height is negative, the shape may not render as expected. The page is a minimal HTML document that uses inline CSS and JavaScript, though no scripts or styles are defined. The SVG is rendered directly in the browser, with a viewBox of 520 by 520 pixels. No external libraries or data sources are used; it is a static, self-contained visualization.

May 4, 2021

Loading thumbnail…

Fork of Missing Migrants Date Histogram

This fork visualizes the monthly total of dead and missing migrants from the Missing Migrants Dataset. The histogram uses d3.bin to group reported dates into monthly bins and d3.sum to aggregate the “Total Dead and Missing” values per bin. React renders SVG bars with axes from custom AxisBottom and AxisLeft components, while d3.scaleTime and d3.scaleLinear map the data ranges. Tooltips display the summed count for each month.

May 1, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. Each circle encodes vehicle miles per gallon, horsepower, weight, and country of origin, with tooltips displaying model names. The code registers Vega-Lite and Vega-Tooltip through the vega-lite-api module, loads data with d3.csv, and dynamically fits the plot to the window size. Custom axis and label styling from a config object improve readability across the visualization.

Apr 30, 2021