edpmay

@edpmay·5 public vizzes

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries using data from the United Nations World Population Prospects 2019. Horizontal bars encode population values on a linear scale, with country names on a band scale and formatted tick labels that convert units to billions. The visualization is built with React and D3 v5, using `scaleBand`, `scaleLinear`, and `format` for axes and data transformation, while marks render as SVG rectangles with hover tooltips. The Poppins font and teal color scheme give the chart a modern, clean aesthetic.

Apr 4, 2020

Loading thumbnail…

Untitled

This example visualizes the population of ten countries as a horizontal bar chart, using D3 v5 within a React framework. The bars are rendered as SVG rectangles, with country names on the y-axis and population values on the x-axis. It uses `d3.csv` to load the data, `scaleLinear` and `scaleBand` for scaling, and `axisLeft` and `axisBottom` for axes. The x-axis tick format abbreviates large numbers, and the chart includes a title and axis label.

Mar 28, 2020

Loading thumbnail…

Untitled

This bar chart displays population estimates for nine countries, with each bar’s length proportional to population in thousands, ordered along a band scale. The visualization uses d3.csv to load data, d3.scaleLinear for the x-axis, and d3.scaleBand for the y-axis, rendering axes via d3.axisLeft and d3.axisBottom. Bars are drawn as SVG rects with a steelblue fill, within a fixed 960×500 viewport.

Mar 25, 2020

Loading thumbnail…

Lets Make a Face

This example shows an animated cartoon face built with SVG elements, centered on a 960 by 500 canvas. The face features a large orange circle for the head, two dark eyes, rectangular eyebrows, and a smile-shaped arc for the mouth. A single eyebrow animates by moving downward and back using D3’s `transition().duration()`, while the other elements remain static. The code uses D3 v5’s `select`, `arc`, and chained transitions within a React project, rendering purely through SVG attributes.

Mar 25, 2020

Loading thumbnail…

Cars Report

This example displays a text-based report of cars priced under $2,000, listing each vehicle’s year, make, model, and price after a simulated two-second data-fetching delay. It pulls from hardcoded JSON loaded asynchronously via a Promise in `getCars.js`, then uses `Array.filter` and `Array.map` in `generateReport.js` to process and format the output. The result is rendered into a `<pre>` element using plain DOM manipulation, with no external visualization libraries involved.

Mar 24, 2020