mangoJ0106

@mangoJ0106·3 public vizzes

Multiple Views Cleanup

This example combines a world map with a date histogram to visualize migrant deaths and disappearances in 2019. The map uses a natural Earth projection and scaled circles to show the geographic distribution of incidents, while the histogram displays the monthly count over time. D3’s `geoNaturalEarth1`, `geoPath`, and `scaleSqrt` handle the map and circle sizing, while `scaleTime`, `histogram`, and `timeMonths` bin the temporal data. City and country boundaries come from the World Atlas TopoJSON, and the dataset is loaded via `d3.csv`. The visualization is rendered as SVG within a React component structure.

Mar 30, 2020

Loading thumbnail…

Making a bar chart!

This example shows a horizontal bar chart of population data for nine countries, with the country names on the y-axis and population counts on the x-axis. It loads data from a CSV file, then uses d3.scaleBand for the categorical country axis and d3.scaleLinear for the continuous population axis, with d3.axisLeft and d3.axisBottom for tick labels. Bars are rendered as SVG rect elements with a steelblue fill, and the chart is drawn in an SVG canvas with margins calculated from the viewport dimensions.

Mar 21, 2020

Loading thumbnail…

Let's make a face with D3.js

A yellow face with eyes, animated eyebrows, and a wide mouth is drawn using D3.js v5. The SVG elements are positioned with `d3.select` and attribute setters, while the mouth is generated using the `d3.arc` path generator. Eyebrow rectangles animate vertically via chained `transition().duration()` calls, moving up and down over two seconds. The code imports only `select` and `arc` from D3, applies transforms to group elements, and renders entirely with SVG shapes.

Mar 19, 2020