Skip to main content
Log in
C

CyberZafa

@CyberZafa·6 public vizzes

Loading thumbnail…

Dynamic Simplification IV zoom to bounding box

This map of U.S. states dynamically simplifies geometry during zooming so that visible detail stays near one square pixel, using D3 v4 and topojson-simplify. Clicking any state highlights it and triggers a smooth zoom to its bounding box via `d3.zoom` and `d3.geoPath`. A hidden canvas with `getImageData` identifies the selected feature by color, while borders and fills render on a visible Canvas with animation.

Mar 17, 2017
Loading thumbnail…

fresh block

This visualization displays real-time Twitter sentiment across U.S. states on an SVG map. The map colors each state based on whether positive or negative tweets are more frequent, using pink, turquoise, or beige. It loads US state boundaries from a TopoJSON file and renders them with d3.geoPath and an Albers USA projection. Twitter data streams via the PubNub API, and sentiment is tallied per state using word lists.

Mar 16, 2017
Loading thumbnail…

Individual to stacked area charts

This interactive visualization demonstrates the transition from individual tax-rate area charts to a stacked area chart, using animated, randomly generated local, state, and federal tax data from 2000 to 2019. The SVG rendering uses D3 v4’s `d3.area`, `d3.stack`, and `d3.nest` APIs to compute and draw both the individual series and their stacked aggregate, with a monotone curve applied to each area. A looping CSS dash animation on the paths creates a dynamic, flowing visual effect.

Mar 16, 2017
Loading thumbnail…

都道府県別 人口の推移

An animated choropleth map shows population change across Japanese prefectures by year. A dropdown menu selects the year; the map transitions its color fill over two seconds to reflect the new population data. Built with D3 v3, the visualization uses `d3.geo.mercator` projection, `d3.geo.path` to render TopoJSON map features, and a linear color scale from white to blue. Population data from the Statistics Bureau is loaded from a TSV file.

Mar 16, 2017
Loading thumbnail…

都道府県別 人口の推移

An animated choropleth map shows population change across Japanese prefectures by year. A dropdown menu selects the year; the map transitions its color fill over two seconds to reflect the new population data. Built with D3 v3, the visualization uses `d3.geo.mercator` projection, `d3.geo.path` to render TopoJSON map features, and a linear color scale from white to blue. Population data from the Statistics Bureau is loaded from a TSV file.

Mar 16, 2017
Loading thumbnail…

都道府県別 人口の推移

This example visualizes Japan’s population changes by prefecture from 1920 to 2012. A choropleth map colors each prefecture according to its population for a selected year, with a dropdown menu to switch years and an animated two-second color transition between selections. Capital cities are marked with circles using projected coordinates. The code uses d3.v3, queue, topojson, and d3-legend, applying d3.geo.mercator and d3.geo.path to render the map from TopoJSON data, while population data comes from the Statistics Bureau of Japan.

Mar 15, 2017