MingboPeng

@MingboPeng·6 public vizzes

LoadBigJson

This example generates a minimal SVG visualization using D3 v4, displaying a static text message centered in a 960 by 500 pixel canvas. The code selects the body element, appends an SVG, and writes the string “Edit the code below to change me!” with a monospace font. It serves as a basic template for D3 projects, with the text position and styling set manually via SVG attributes rather than through data binding or scales.

Jan 23, 2019

Loading thumbnail…

ECM Explorer

This example loads an external HTML report generated by OpenStudio, extracts a specific data value from a table in that report, and displays it as a large text label on an SVG canvas. It uses D3 v4 methods such as `d3.html` and `d3.text` to fetch remote files, along with jQuery and Bootstrap for additional DOM manipulation. The visualization is minimal, presenting a single extracted metric rather than a chart or graph.

Jul 27, 2018

Loading thumbnail…

Chord Diagram2

A chord diagram visualizes directed relationships among groups, here showing material-system connections in construction trades such as Occupants, Flooring, and Structure. Each group appears as an arc segment, with ribbons linking entities proportionally to the matrix values. The example uses D3 v5’s `d3.chord`, `d3.arc`, and `d3.ribbon` to compute and render the layout in SVG, with a custom `groupTicks` function and a pre-defined color scale. Data is embedded as a JavaScript object, and the diagram is rotated 75 degrees with labeled tick marks.

Apr 24, 2018

Loading thumbnail…

Stacked Bar Chart

This stacked bar chart displays energy consumption across different building system types for three cases, with each bar segmented and color-coded by category. The visualization uses D3 v3’s `d3.scale.ordinal` for the x-axis and color encoding, `d3.scale.linear` for the y-axis, and `d3.svg.axis` for tick labels formatted with `d3.format`. Data is loaded from a CSV via `d3.csv`, and the bars are drawn as SVG `rect` elements grouped by case. A custom legend maps colors to system names, and y-domains are computed using `d3.max`.

Feb 15, 2018

Loading thumbnail…

Sized Donut Multiples

Sized Donut Multiples uses d3.pie and d3.arc to render three donut charts, one per case in a CSV dataset, with each donut’s radius scaled by the square root of its total energy consumption via d3.scaleSqrt. The code uses d3-selection’s `.each()` to bind parent and child data, filtering and ordering arcs according to a predefined category list. Arcs are colored by category via a hardcoded palette, with labels showing the case name, total value, and unit. The SVG output is a technical demonstration, not recommended for comparing distributions across cases.

Feb 15, 2018

Loading thumbnail…

RainEvents

This visualization groups hourly precipitation records into distinct rain events, displaying each event as a red entry in a scrollable list with its start date and total rainfall. It parses CSV station data using `d3.csvParse` and `d3.timeParse`, then applies conditional logic based on time gaps between consecutive readings to separate events. Users can load their own file via an input element and export the aggregated event list as a CSV file.

Oct 27, 2017