MercPai

@MercPai·8 public vizzes

Fork of Let's make a face with D3.js!

This fork of “Let’s make a face with D3.js!” displays a smiley face whose eyebrows move. It demonstrates fundamental DOM manipulation by loading tabular population data via `d3.csv` from a Google Sheets URL. The code uses `d3.select`, `d3.scaleLinear`, and `d3.max` to map the data to horizontal positions, then appends rectangles to the SVG with `selection.append`, though the rendered output is not visible in the provided snippet.

Apr 22, 2021

Loading thumbnail…

Fork of Stylized Bar Chart

This example displays the top 10 most populous countries as horizontal bars, with country names on the y-axis and population counts on the x-axis. It uses React components and d3.scaleBand and d3.scaleLinear to map data from the United Nations World Population Prospects 2019 dataset. The SVG rendering includes d3.csv for data loading, custom tick formatting with d3.format, and tooltips via SVG title elements.

Apr 21, 2021

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how to construct a simple cartoon face using D3.js, with the face’s features positioned and styled through HTML and CSS. The visualization is built with a bare-bones HTML page that loads D3.js and uses JavaScript to draw the facial elements dynamically. The code displays a large, centered text label (“Hello HTML”) and logs a message to the browser console, while the face itself is rendered using D3’s drawing functions. The project runs within a React framework, though the core rendering relies on D3’s SVG or shape primitives to assemble the eyes, nose, and mouth.

Jan 6, 2021

Loading thumbnail…

Scatter Plot with Menus

This scatter plot visualizes automobile data from the UCI Machine Learning Repository's Auto MPG dataset. Two dropdown menus allow the user to select which numeric columns map to the X and Y axes, triggering a re-render of the chart. Built with D3 v5, the visualization uses `select`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct the axes and grid. The plot renders as SVG with a staggered 2-second transition animation as circles move to new positions.

Jun 9, 2019

Loading thumbnail…

Making a Bar Chart

This bar chart shows the population of the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects. The chart displays horizontal bars with country names on the y-axis and population values on the x-axis, using an SVG rendering approach. The code uses `d3.csv`, `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom` from d3 v5 to load the data, scale the values, and draw the axes and rectangles.

Jun 9, 2019

Loading thumbnail…

Making a bar chart

This bar chart displays median monthly rent for Berkeley ZIP codes, with horizontal bars sorted by postal code. The visualization uses d3.csv to load the data, d3.scaleBand and d3.scaleLinear to map ZIP codes and costs, and d3.axisLeft and d3.axisBottom with custom tick formatting. Rendered as SVG, the chart applies margins, removes default axis lines, and labels the x-axis as "Rent" with a title above the plot.

Jun 9, 2019

Loading thumbnail…

Chicago Crime Data First Pass

A choropleth map of Chicago crime incidents, colored by primary type, is rendered as red dots over a geographic projection of the United States using D3 v5's geoAlbersUsa projection and geoPath. Points are scaled to 0.02 radius initially, then animated via transition to a larger scale, with tooltips appearing on mouseover. The visualization loads state boundaries from the US Atlas TopoJSON and reads incident coordinates from a CSV file, with zoom interaction enabled.

Jun 9, 2019

Loading thumbnail…

Making a bar chart

This bar chart displays the median monthly rent in Berkeley, California, for eight ZIP codes, with costs scaled up by a factor of 1,000 from the original data. Using D3 v5, it maps the numeric Cost values to a linear scale for the x-axis and the categorical ZIP codes to a band scale for the y-axis, rendering SVG rectangles. The code employs `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, and customizes tick formatting with `d3.format`.

Jun 9, 2019