China tile grid map

100%

China tile grid map

✓ Published0🌍 Public

Last edited Aug 6, 2018

Created on Aug 6, 2018

A tile grid map of China displays provincial electricity consumption for 2015, with each province flattened into a square positioned on a grid and colored by a quantile scale from light yellow to dark red. A toggle button triggers an animated transition between the original geographic layout and the gridded arrangement. The visualization combines D3 v4, the geo2rect library for polygon-to-rectangle conversion, and Turf.js for geometric calculations. Province boundaries and values come from a China GeoJSON file and a CSV dataset.

AI-generated description

Inspired by Maarten Lambrecht's Europe example, using geo2rect by Sebastian Meier. Geojson data for China map is from china-geojson.

forked from <a href='http://bl.ocks.org/officeofjane/'>officeofjane</a>'s block: <a href='http://bl.ocks.org/officeofjane/d33d6ef783993b60b15a3fe0f8da1481'>China tile grid map</a>

forked from <a href='http://bl.ocks.org/EndNight95/'>EndNight95</a>'s block: <a href='http://bl.ocks.org/EndNight95/150d009d8741bf17beadd6c9975b6671'>China tile grid map</a>

forked from <a href='http://bl.ocks.org/EndNight95/'>EndNight95</a>'s block: <a href='http://bl.ocks.org/EndNight95/4b50ae1cd529c54ab745a6a1f8cceb24'>China tile grid map</a>

mit Licensed

Similar vizzes

Loading thumbnail…

China tile grid map

This interactive map of China displays electricity consumption data by province, color-coded using a quantile scale. Users can toggle between a standard geographic projection and a simplified tile grid layout, with animated transitions between the two states. The visualization uses the geo2rect library to transform geojson polygons into rectangular tiles, while d3.v4 handles SVG rendering, data loading via d3.queue, and the color encoding based on the electricity2015.csv dataset.

EEndNight95

96% match

Loading thumbnail…

China tile grid map

This example shows a tile grid map of China, where each province is represented as a rectangle colored by its electricity consumption in 2015. A toggle button switches between the grid layout and the original geographic map, animating the shape change. The code uses the geo2rect library to convert GeoJSON polygons into rectangles, with D3 v4 (d3.geoMercator, d3.scaleQuantile) for rendering and coloring, and Turf.js for geographic calculations. Province positions in the grid are manually specified in the config, and the electricity data comes from a CSV file.

EEndNight95

96% match

Loading thumbnail…

China tile grid map

This tile grid map visualizes electricity consumption across Chinese provinces, with each province represented by a colored rectangle. The map uses a quantile color scale ranging from light yellow to dark red, showing the varying electricity values per province. Built with D3 v4 and the geo2rect library by Sebastian Meier, the visualization transforms geographic polygon data into a rectangular grid layout. Users can toggle between the standard geographic view and the tile grid representation, with both views rendered as SVG paths and animated transitions.

EEndNight95

96% match

Loading thumbnail…

China tile grid map

This example shows a tile grid map of China, where each province is rendered as a rectangular cell colored by its electricity consumption in 2015. The view toggles between a traditional geographic map and the grid layout. It uses `d3.geoMercator` for projection, the `geo2rect` library to convert polygons to rectangles, and `d3.scaleQuantile` to map electricity values to colors. Province positions are manually defined in a configuration object, and the animation is triggered by clicking the toggle button.

EEndNight95

95% match

Loading thumbnail…

China tile grid map

This example shows a tile grid map of China where each province is drawn as a rectangle instead of its actual geographic shape. The map is colored by electricity consumption per province from a 2015 CSV dataset, using a quantile color scale. The visualization uses `d3.geoMercator()` for projection, `geo2rect` to convert polygon geometries into rectangular tiles, and SVG paths for rendering. A toggle button animates between the tile grid and the original geographic map layout using `g2r.toggle()` and redraws with `g2r.draw()`.

EEndNight95

93% match

Loading thumbnail…

Chinese Map Template

This map of China displays province-level data with a proportional symbol overlay, where circle size encodes a numeric value from a local CSV joined to TopoJSON geographic features. Each province is colored with a categorical scale and shows its name on hover. The visualization uses d3.geoMercator for projection, d3.geoPath for rendering SVG paths, d3.geoCentroid for positioning circles, and a custom legend component built with d3.scaleSqrt.

Iinroadings

74% match

Loading thumbnail…

Chinese Map Template

This map of China displays province-level case counts using a bubble chart overlay. Each province is colored with a categorical scheme, and red circles sized by a square-root scale represent the number of cases per region. The visualization uses D3’s geoMercator projection, geoPath for drawing boundaries, and geoCentroid to position circles. Data comes from a local CSV joined with TopoJSON province geometries, with an interactive hover effect highlighting provinces.

LLex

73% match

Loading thumbnail…

中国地图

A choropleth map of China renders each province as an SVG path using a Mercator projection centered on the country. The D3.js code loads GeoJSON map data and applies a categorical color scale, with provinces highlighted yellow on mouseover. Province names are positioned using projected centroid coordinates, with a vertical offset applied to prevent overlap between Macau and Hong Kong labels. The visualization demonstrates D3’s geographic path generator (`d3.geoPath`) and projection utilities.

Zzhuomo-maker

72% match