Skip to main content
SimilarExport ZIP
100%

都道府県別の人口

✓ Published0🌍 Public
Vvanquisher2000
Last edited Aug 9, 2021
Created on Aug 7, 2021
Forked from Stylized Bar Chart

This example displays the population of Japanese prefectures as bar charts, with options to view total, male, female, or combined gender data. For the combined view, it draws paired bars using SVG rectangles within a React component, animated via the `animate` element. Users can hover over a color legend to highlight one gender while dimming the other. Data is loaded as CSV using d3.csv, with scales built via d3.scaleBand and d3.scaleLinear, and axes rendered as custom React SVG groups.

AI-generated description

A program that shows the Japanese Population Per Perfecture as a bar chart.

Data: Japanese Population Per Perfecture Prospects 2015.

MIT Licensed

Similar vizzes

Loading thumbnail…

都道府県別の人口 <style> body { margin: 0; overflow: hidden; } pre { font-size: 7em; } </style>

This example displays Japanese population data by prefecture from a CSV file, initially showing a loading message while fetching the data. The visualization uses React with hooks like `useState` and `useEffect` to manage asynchronous data loading via the `csv` function from d3.v5. The code processes each row to extract the prefecture name and concatenates them into a message string, which is then rendered as large text in a `<pre>` element. The layout of the page is a map of Japan, but the code focuses on printing the prefecture names as a text-based output.

Vvanquisher2000
80% match
Loading thumbnail…

Fork of Stylized Bar Chart

This visualization displays the population of Japanese prefectures as a scatter plot, with each circle representing a prefecture positioned by population size on the x-axis and prefecture name on the y-axis. The chart uses React components to render SVG elements, with d3.scaleLinear for both axes and d3.csv for loading data from a GitHub-hosted dataset derived from United Nations World Population Prospects 2019. Circle marks include native SVG title tooltips showing formatted population values, and the styling uses custom CSS with the Poppins font.

Vvanquisher2000
78% match
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.

CCyberZafa
78% match
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.

CCyberZafa
78% match
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.

CCyberZafa
78% match
Loading thumbnail…

都道府県別 人口の推移

This visualization shows the population changes of Japan’s 47 prefectures over time, using a choropleth map colored by population value. A user selects a year from a dropdown menu, triggering a smooth two-second color transition that updates prefecture fills. The map is rendered with D3 v3’s `d3.geo.mercator` projection and `d3.geo.path`, with circles marking prefectural capitals. Population data comes from the Statistics Bureau of Japan, and map boundaries use TopoJSON. A color legend built with `d3.legend` clarifies the scale.

NNaomiAsano
77% match
Loading thumbnail…

Making a Bar Chart

This horizontal bar chart displays the populations of 19 eastern Japanese prefectures, using data from the United Nations World Population Prospects 2020 estimates, converted to absolute values (multiplied by 1,000). Built with D3 v5, the visualization maps population to a linear scale (`scaleLinear`) for the x-axis and prefecture names to a band scale (`scaleBand`) for the y-axis, rendering bars as SVG `rect` elements. Axes are added via `axisLeft` and `axisBottom`, with all marks styled in steel blue using a global CSS rule.

Ddaigokawabe
76% match
Loading thumbnail…

都道府県別 人口の推移

This interactive map visualizes population changes across Japan’s 47 prefectures from 1920 to 2012. A dropdown menu selects a year, triggering a two-second color transition on each prefecture based on population values, using a linear blue scale. The visualization uses D3 v3 with `d3.geo.mercator` and `d3.geo.path` to render TopoJSON boundaries, while population data is loaded from TSV files via the queue library. Prefecture capitals appear as black circles. Data is sourced from Japan’s Statistics Bureau.

LLastSamurai03
76% match