mp7090

@mp7090·10 public vizzes

Fork of Fork of Customizing Axes

This bar chart displays the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The chart customizes D3 axes using `d3.axisBottom` and `d3.axisLeft`, removing default domain lines and tick lines, and applying a custom tick format that converts large numbers to abbreviations like “B” for billion. The visualization is rendered as an SVG, with horizontal bars sized via `d3.scaleLinear` and `d3.scaleBand`, and includes custom styling for tick labels, axis labels, and the title.

Mar 2, 2021

Loading thumbnail…

Fork of Customizing Axes

This bar chart displays the populations of the top 10 most populous countries in 2018, using estimates from the United Nations World Population Prospects 2017. It demonstrates custom axes: the y-axis labels are simplified by removing tick lines and the domain, while the x-axis uses a custom tick format that abbreviates large numbers and converts 'G' to 'B'. The visualization is built with D3 v5, using `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft`, and renders as SVG.

Feb 24, 2021

Loading thumbnail…

Fork of Stylized Bar Chart

This example visualizes the top 10 most populous countries using a horizontal bar chart, based on United Nations World Population Prospects 2019 data. The chart displays country names on the y-axis and population values on the x-axis, with bars styled in a teal color and labeled axes using the Poppins font. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. It renders as SVG, with axes generated by custom `AxisBottom` and `AxisLeft` components, and includes tooltips formatted with D3's `format` function.

Feb 24, 2021

Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart of the populations of the ten most populous countries, ordered from largest to smallest. It uses D3 v5 to load data from a CSV file and render the visualization as SVG. The code explicitly calls `scaleLinear` and `scaleBand` to create the x and y scales, `axisLeft` and `axisBottom` to generate the axes, and uses `select` to target the SVG element. The bars are colored steel blue via CSS, and the population values are transformed by multiplying by 1000 before rendering.

Feb 23, 2021

Loading thumbnail…

Fork of Missing Migrants Date Histogram

This interactive bar chart displays the monthly totals of dead and missing migrants, with each bar representing one month and height proportional to the aggregate count. The visualization uses React for component structure, with D3 v5 handling data processing and scales. It demonstrates d3.bin for time-binning and d3.sum for aggregating values, rendering bars as SVG rectangles. Data comes from the Missing Migrants Dataset, loaded via d3.csv, with axes customized using scaleTime and scaleLinear.

Feb 8, 2021

Loading thumbnail…

Fork of Missing Migrants Date Histogram

Feb 7, 2021

Loading thumbnail…

Lets Make a Face

This example creates a simple, stylized face using scalable vector graphics. It draws the face directly from code, configuring the SVG canvas with a red background. The implementation relies on the d3 library, specifically using `d3.select` to target the SVG element and apply styling through the `style` method. The project loads D3 version 6 from a CDN, and its core logic is contained in a JavaScript bundle. The face itself is constructed from SVG shapes, demonstrating fundamental chart and graphic creation techniques within a web-based visualization framework.

Feb 7, 2021

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how basic SVG shapes—circles, rectangles, lines, and paths—are styled using CSS, with explicit fills, strokes, and group transformations. The SVG markup defines a 960×500 canvas, scaled by 1.5, containing shapes with hardcoded coordinates. CSS rules in `styles.css` apply stroke styling to line elements via a `.lines` class and set a round stroke-linejoin on paths, while the body’s margin and overflow are reset. No JavaScript or data is involved; the rendering relies solely on SVG’s native presentation attributes and external stylesheets.

Feb 7, 2021

Loading thumbnail…

Fork of Cars Report

This example demonstrates how to generate a text-based car report using JavaScript modules and asynchronous data loading. It defines car objects in a JSON array and uses functions to filter cars below a specified price (2000) and format them into readable lines. The code initializes a “Loading...” message, fetches data via a Promise-based `getCars` function with a two-second delay, then displays the filtered report. It relies on ES6 modules (`import`/`export`), `JSON.parse`, and DOM manipulation through `document.getElementById` and `textContent`.

Feb 7, 2021

Loading thumbnail…

Cars Report

This example demonstrates a text-based report of cars filtered by price, showing the car year, make, model, and price. It initially displays a "Loading..." message while fetching data asynchronously via a Promise from `getCars`. Once the simulated two-second delay resolves, it generates a filtered list using JavaScript array methods (`filter` and `map`), formats each car with a custom `formatCar` function, and updates the DOM's `textContent` in an HTML `<pre>` element. The report only includes cars under $2,000, selected from a hardcoded JSON array parsed with `JSON.parse`.

Feb 7, 2021