mbehiry-CW

@mbehiry-CW·4 public vizzes

Loading REF2014

This example demonstrates loading the Iris Dataset from a CSV file and displaying its full contents as a formatted JSON string in the browser. The visualization uses D3’s `csv` function to fetch the external dataset, then appends a `<pre>` element to the page and populates it with the data using `JSON.stringify`. The code is minimal, focusing on the asynchronous data-loading pattern and D3’s promise-based handling of CSV parsing, with no additional charting or rendering beyond the raw output. The dataset is sourced from a remote URL provided in the code.

Feb 21, 2020

Loading thumbnail…

[TEST] Pie Chart

This pie chart displays the distribution of credit ratings, with values ranging from 0% to 73.2%, using a static SVG rendering. The chart uses d3.pie and d3.arc to generate the segments, with d3.scaleOrdinal assigning colors from a custom palette. A legend, built with SVG rectangles and text elements, lists each rating label alongside its numeric percentage. Data is loaded from a JSON file via d3.json, with string values converted to numbers before the chart is rendered. The visualization includes a tooltip that logs data values to the console on mouseover.

Feb 20, 2020

Loading thumbnail…

Forked Stylized Bar Chart !

This stylized bar chart displays the top 10 most populous countries using data from the United Nations World Population Prospects 2019. The visualization uses D3 v5 scales and React to render an SVG, with axis components built from `scaleBand` and `scaleLinear`. The chart intentionally omits axes, instead showing only horizontal bars with tooltips that format population values using D3's `format` function. The code loads CSV data via `d3.csv`, slices it to ten rows, and renders the bars with a Poppins font and custom color scheme.

Feb 19, 2020

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart visualizes the top 10 most populous countries using United Nations World Population Prospects 2019 data, displaying population values as horizontal bars with a clean, minimal aesthetic. The React-based application loads CSV data via d3.csv, then uses d3.scaleBand and d3.scaleLinear to map countries and population counts to SVG coordinates. A d3.format with SI prefix notation converts large numbers to readable abbreviations like “1.4B,” while custom React components render the axes and marks. The chart includes a “Population” axis label and tooltips showing formatted values on hover.

Feb 19, 2020