hshs1115

@hshs1115·3 public vizzes

나라별 factor 비교 (d3.V3)

This visualization compares five countries—Indonesia, Japan, China, Vietnam, and South Korea—across selectable factors such as unemployment, marriage rates, household prices, and elderly population. Using D3.js v3 and React, it renders animated multi-line SVG charts where users switch factors via a dropdown and toggle country visibility with checkboxes. The code explicitly maps country lines to colors, scales the y-axis dynamically with `d3.svg.axis`, and reads from a CSV file with yearly values.

Jun 6, 2021

Loading thumbnail…

나라별 factor 비교

This visualization compares country-level factors—such as old-age population, unemployment, house prices, marriage rates, and female labor participation—across five Asian nations (Indonesia, Japan, China, Vietnam, and South Korea) from 2000 to 2020. A dropdown menu selects the factor, and colored lines (red, blue, yellow, green, orange) trace each country’s temporal trend, with checkboxes filtering displayed countries. The SVG chart uses d3.csv to load data, d3.scaleLinear for axes, and d3.line paths with animated transitions (duration 3000 ms) to update the y-axis domain and redraw lines when the factor changes.

Jun 5, 2021

Loading thumbnail…

Untitled

This chart displays multiple lines tracking the change in a numeric value over time, with each line representing a different named group. It uses d3.csv to load the dataset from a GitHub URL, then d3.nest groups rows by name to create a series per category. Each series is drawn as a separate path using d3.line, with a d3.scaleOrdinal assigning colored strokes from a categorical palette. An SVG is rendered into the page, with d3.axisBottom and d3.axisLeft providing the x and y scales for the time-based and numeric axes.

Jun 2, 2021