beca8675

@beca8675·13 public vizzes

Choropleth Map

This choropleth map visualizes the "Lack of Coping Capacity" index across countries, using a green color scale to represent varying levels of vulnerability. The map is rendered as an SVG using d3.v4, with the d3.geoMercator projection and d3.geoPath to draw country boundaries. Country data is loaded from a CSV file and joined to the GeoJSON features by ISO3 code, with colors assigned via d3.scaleThreshold and the d3.schemeGreens color scheme.

May 6, 2020

Loading thumbnail…

Choropleth Map

A choropleth map visualizes epidemic risk class by country, using color to indicate risk levels from low to very high. Drawn with d3.geoPath and a natural Earth projection, the map supports pan and zoom, with hover tooltips displaying country, risk class, and rank. Data comes from a CSV file joined with world-atlas TopoJSON. A legend uses d3.scaleOrdinal and the RdPu color scheme to explain the ordinal classes.

May 6, 2020

Loading thumbnail…

Untitled

This visualization shows global country risk levels using a choropleth map, with each country colored according to its risk score from the provided CSV data. It renders the map using D3’s `d3.geoPath` and `d3.geoNaturalEarth1` projections, while the color scale maps numerical risk values to a sequential color scheme. The page loads country boundaries from an external GeoJSON source and draws them onto an SVG canvas, with the title left blank.

May 6, 2020

Loading thumbnail…

hierarchical

A hierarchical tree diagram displays risk factors for epidemics, branching from a central root into categories such as hazard, vulnerability, and coping capacity. The visualization uses D3.js v5 with the `tree` and `hierarchy` layouts to compute node positions, and renders SVG paths via `linkHorizontal` for the connecting lines. Pan and zoom functionality is enabled through `d3.zoom`, while text labels are positioned directly on the nodes. The data originates from a local JSON file, and styled with red strokes and a serif font.

May 6, 2020

Loading thumbnail…

World Countries Tree

This visualization displays the hierarchical structure of world countries, organized by continent and subregion. It uses a horizontal tree layout, with each country name rendered as a leaf node and connections drawn as curved links. The code employs D3 v5’s `tree()` layout, `hierarchy()`, and `linkHorizontal()` path generator to position nodes and draw edges in SVG. Data comes from a local `data.json` file containing the nested geographic grouping.

May 6, 2020

Loading thumbnail…

Choropleth Map

This choropleth map visualizes the INFORM epidemic risk index by country, using a five-class orange color scale. Darker shades indicate higher risk. The map is rendered as an SVG using D3.js v4, with the `d3.geoMercator` projection and `d3.geoPath` to draw country boundaries from a world GeoJSON file. Data values from the `informrisk.csv` file are joined to the map features by ISO3 code, with the `d3.scaleThreshold` function mapping risk scores to colors.

May 6, 2020

Loading thumbnail…

Choropleth Map

A choropleth map visualizes epidemic risk across countries, using color intensity to show the P2P risk index and a legend with ordinal color swatches. The map is rendered with SVG paths generated by `d3.geoPath` and a `geoNaturalEarth1` projection, with TopoJSON data from the World Atlas and risk data from a CSV file. Hovering highlights a country, and missing data appears gray. Users can zoom and pan the map via `d3.zoom`, while `scaleOrdinal` and `schemeRdPu` drive the color encoding.

May 6, 2020

Loading thumbnail…

Choropleth map

This choropleth map displays world economies by color, with a legend that filters countries by clicking a color category, dimming non-matching regions. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, while the legend is built with D3 scales and `d3.schemeSpectral`. Country data comes from the World Atlas TopoJSON and TSV files, rendered as SVG paths with zoom support via `d3.zoom`.

May 6, 2020

Loading thumbnail…

Treemap from bl.ocks.org

A treemap visualizes the hierarchical structure of the Flare data set, with nested rectangles representing leaves sized by their numeric value. The visualization renders using SVG elements and includes an animated transition between two aggregation modes: "Size" and "Count". Built with D3 v4, the code uses `d3.treemap` with the `d3.treemapResquarify` tiling algorithm, `d3.hierarchy`, `d3.scaleOrdinal` for color, and `d3.interpolateRgb` for fading. A 2-second timer automatically triggers the mode change.

Apr 30, 2020

Loading thumbnail…

D3 v5 Zoomable Sunburst

This D3 v5 zoomable sunburst visualizes hierarchical data from the Observable @observablehq/flare dataset. Users click arcs to zoom into a category, triggering animated transitions that recompute arc angles and radii via `d3.partition` and `d3.hierarchy`. The code uses `d3.arc`, `d3.scaleOrdinal`, and `d3.interpolateRainbow` for coloring, with SVG paths and text labels rendering the radial layout. `transition.attrTween` animates the shape and position of arcs and labels over 750 milliseconds, while `d3.format` displays numeric values.

Apr 30, 2020

Loading thumbnail…

Line Chart with Multiple Lines

This line chart shows the annual CO2 emissions per capita for the top ten countries from 1987 to 2017, with each country represented by a distinct colored line and a corresponding legend. The visualization uses D3 v5 APIs such as `scaleTime`, `scaleLinear`, `scaleOrdinal`, `line`, and `curveBasis` to render smooth paths in SVG. Data is loaded from a CSV file, and the chart includes axes, grid lines, and a title.

Apr 30, 2020

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays population estimates for four animal groups—birds, cats, dogs, and fish—across multiple countries, using a multi-line layout to compare trends by country. The visualization renders as an SVG and uses D3 v5 APIs including `d3.csv`, `scaleLinear`, `scaleOrdinal`, `axisBottom`, `axisLeft`, and `nest` to structure the data. Color encodes animal type via `schemeCategory10`, while the axes show country and population values. The chart is built from `data.csv` and styled with external CSS.

Apr 20, 2020

Loading thumbnail…

Bowl of Fruit - Click to Select

Five apples are rendered as red circles in an SVG bowl. A black outline highlights the currently selected fruit, which changes when a user clicks a circle. Built with React and D3 v5, the visualization uses `scaleOrdinal` for color and radius mappings and handles the click interaction through React state, `setSelectedFruit`.

Apr 20, 2020