Tungurahua

@Tungurahua·6 public vizzes

fresh block

This example displays a single static line of text, “Edit the code below to change me!,” centered on a blank 960-by-500 SVG canvas. Built with D3 v4, it appends an SVG `text` element to the body and sets its position, font size, and monospace font family. The code serves as a minimal starting point for editing, with no data or interactive behavior present.

Jul 15, 2018

Loading thumbnail…

Dummy Data

This visualization maps population and area data for municipalities in the Freising district of Bavaria, sourced from a CSV file (DummyDataFS.csv). It renders each municipality as a bubble positioned on a blank canvas, with bubble size encoding population and color representing land area. The code uses D3’s `d3.forceSimulation` to arrange the bubbles without overlap, while a custom `d3.scaleLinear` maps the quantitative fields to visual variables. The rendering relies on SVG circles and text labels, with no geographic boundaries drawn, as the data contains no shapefiles. The visualization highlights relative differences in population density among the listed communes.

Jul 13, 2018

Loading thumbnail…

GeoJson map of Colombia

This map of Colombia visualizes GeoJSON data using D3.js and SVG. Each department is color-coded by the length of its name in Spanish. Hovering over a department applies text effects, and a new font is randomly selected each time the hover target changes. Clicking a department zooms in on it; clicking elsewhere zooms out. The map is rendered with an animated transition during zoom interactions, and the choropleth coloring provides an at-a-glance comparison of department name lengths.

Jul 10, 2018

Loading thumbnail…

Gist 304bbd6a0e8104f89b3b4e365324555a

This visualization shows municipalities in the Freising district of Bavaria, Germany, rendered as polygons on a map. The author uses a simplified GeoJSON dataset derived from official BKG data and enriched with demographic and Wikipedia information. Each polygon is likely colored or styled to represent attributes such as population density or administrative classification. The map provides a clear, interactive way to explore municipal boundaries and associated metadata within the region.

Jul 10, 2018

Loading thumbnail…

d3js001

This example displays a bar chart of letter frequencies in English text, using the data.tsv file which assigns a proportion value to each letter from A to Z. The chart renders in SVG, with steel-blue bars plotted against an ordinal x-axis and a linear y-axis. The code uses d3.v3, employing `d3.scale.ordinal` with `rangeRoundBands` for bar positioning, `d3.scale.linear` for the value scale, and `d3.svg.axis` to create the axes. Bars are appended as `rect` elements, with heights derived from the y-scale and widths from `x.rangeBand()`.

Jul 9, 2018

Loading thumbnail…

US States Map - Choropleth plus Bar

This example combines a choropleth map of the United States with a horizontal bar chart. The map colors each state according to its value for a selected metric (obese adults number), using a light-to-dark blue sequential color scale with nine bins. A bar chart on the right lists all states sorted by the same metric, with Washington highlighted in red and labeled as the main category, and a computed national average included for comparison. Tooltips show the state name and its obesity value when hovering over either the map or the bars. The visualization is built with D3 and TopoJSON, rendered as SVG, and uses a custom color interpolation to create the choropleth palette.

Jun 22, 2015