BrightPeace

@BrightPeace·5 public vizzes

SimpleChart

This chart visualizes the working set size in bytes over time, sampled every 100 milliseconds from a CSV file and converted to megabytes. The data is loaded with `d3.dsv` and a custom parser, then rendered as a bar chart using SVG `rect` elements. The implementation includes a simple responsive layout that adjusts to the browser window's dimensions, with rounded corners on the rectangles. The data source is `ExampleMemLog.csv`, and the chart updates on window resize events.

Feb 29, 2020

Loading thumbnail…

Smiley episode IV

This example renders a classic smiley face using React and SVG. It shows a yellow circular background, two black eyes, and a curved mouth, all centered on a canvas with a vertical black line. The code uses React components for each facial feature, with the mouth drawn using the d3.arc() API to create a precise arc path. The SVG is generated with React’s JSX syntax, and the d3.js library is loaded via CDN, with the visualization updating declaratively through React’s rendering.

Feb 29, 2020

Loading thumbnail…

HTML Starter

A yellow smiley face rendered with SVG sits at the center of the viewport. The example demonstrates a minimal React setup combining React 16.13 and D3 v5, using D3’s `arc` generator to draw the mouth path and plain SVG circles for the eyes and head outline. A vertical black line crosses the face, and all geometry is computed from fixed dimensions in JavaScript. This starter serves as a baseline for building interactive visualizations without external data.

Feb 29, 2020

Loading thumbnail…

Brush() & Filter()

This example demonstrates interactive brushing and filtering on a time-series area chart of stock data. The visualization renders a blue filled area with overlaid circles representing daily values, plus a red dashed line marking the average. Using D3 v5, the chart employs `d3.area()`, `d3.scaleTime()`, and `d3.axisBottom()` for SVG rendering, while mouseover tooltips display date and value details. A brush component filters data points, highlighting selected circles in green while dimming others, with CSV data loaded via `d3.csv()`. The animation and interaction rely on D3’s selection and transition APIs.

Feb 29, 2020

Loading thumbnail…

Area Chart with Brushing

This example presents an area chart of monthly price data from January 2000 through March 2010, rendered as an SVG with a main focus chart and a smaller context panel beneath it. The visualization demonstrates linked brushing: users can select a range on the context panel with a brush, which zooms the focus chart to that time period. The code uses d3’s scaleTime, scaleLinear, area, and brushX APIs, with axes generated by axisBottom and axisLeft. The interactive brushing triggers a zoom by re-computing the x-domain and redrawing the focus area and axis.

Feb 29, 2020