Skip to main content
Log in
D

dnt.ngoctu@gmail.com

@ngoctu95·8 public vizzes

Loading thumbnail…

Fork of Selecting a Year on a Line Chart

This interactive example shows four rounded squares that can be freely dragged and resized within a container. It demonstrates a direct manipulation technique where users can click and move any square or adjust its dimensions using the corner and edge handles, with the ability to reorder them into a grid layout. The implementation uses vanilla JavaScript called `app.js` for mouse event handling, including drag detection and eight-direction resizing logic, while persisting the square states to `localStorage` for session retention. The default styling via `styles.css` provides the visual handles and cursor cues for interaction.

Jun 20, 2024
Loading thumbnail…

Tom Test d3js

This interactive line chart visualizes population change over time for global regions, allowing users to select a specific year by moving the mouse across the plot. The visualization highlights the selected year with a vertical line, while each region’s trajectory is color-coded via an ordinal scale. The chart uses d3’s `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, and `line` generator with `curveBasis`, and loads UN population estimates from CSV data. The legend is built using a custom `colorLegend` component.

Jun 20, 2024
Loading thumbnail…

Tom Test d3js

This interactive line chart visualizes population change over time for global regions, allowing users to select a specific year by moving the mouse across the plot. The visualization highlights the selected year with a vertical line, while each region’s trajectory is color-coded via an ordinal scale. The chart uses d3’s `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, and `line` generator with `curveBasis`, and loads UN population estimates from CSV data. The legend is built using a custom `colorLegend` component.

Jun 20, 2024
Loading thumbnail…

Tom Test d3js

This interactive line chart visualizes population change over time for global regions, allowing users to select a specific year by moving the mouse across the plot. The visualization highlights the selected year with a vertical line, while each region’s trajectory is color-coded via an ordinal scale. The chart uses d3’s `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, and `line` generator with `curveBasis`, and loads UN population estimates from CSV data. The legend is built using a custom `colorLegend` component.

Jun 20, 2024
Loading thumbnail…

Fork of Selecting a Year on a Line Chart

This interactive line chart shows population trends over time for world regions projected through 2100, using data from UN population estimates. Users navigate by mousemove events that call `setSelectedYear` to update a highlighted vertical line, while a color legend identifies each region. The visualization uses d3.v5 with `scaleTime`, `scaleLinear`, `scaleOrdinal`, `axisBottom`, `axisLeft`, `line` with `curveBasis`, `nest`, `mouse`, and SVG rendering. Colors come from `schemeCategory10`, and the chart adapts via a state-driven `render` function.

Jun 20, 2024
Loading thumbnail…

Fork of Selecting a Year on a Line Chart

This interactive line chart shows population trends over time for world regions projected through 2100, using data from UN population estimates. Users navigate by mousemove events that call `setSelectedYear` to update a highlighted vertical line, while a color legend identifies each region. The visualization uses d3.v5 with `scaleTime`, `scaleLinear`, `scaleOrdinal`, `axisBottom`, `axisLeft`, `line` with `curveBasis`, `nest`, `mouse`, and SVG rendering. Colors come from `schemeCategory10`, and the chart adapts via a state-driven `render` function.

Jun 20, 2024
Loading thumbnail…

Fork of Selecting a Year on a Line Chart

This interactive line chart shows population trends over time for world regions projected through 2100, using data from UN population estimates. Users navigate by mousemove events that call `setSelectedYear` to update a highlighted vertical line, while a color legend identifies each region. The visualization uses d3.v5 with `scaleTime`, `scaleLinear`, `scaleOrdinal`, `axisBottom`, `axisLeft`, `line` with `curveBasis`, `nest`, `mouse`, and SVG rendering. Colors come from `schemeCategory10`, and the chart adapts via a state-driven `render` function.

Jun 20, 2024
Loading thumbnail…

Fork of Selecting a Year on a Line Chart

This interactive line chart shows population trends over time for world regions projected through 2100, using data from UN population estimates. Users navigate by mousemove events that call `setSelectedYear` to update a highlighted vertical line, while a color legend identifies each region. The visualization uses d3.v5 with `scaleTime`, `scaleLinear`, `scaleOrdinal`, `axisBottom`, `axisLeft`, `line` with `curveBasis`, `nest`, `mouse`, and SVG rendering. Colors come from `schemeCategory10`, and the chart adapts via a state-driven `render` function.

Jun 20, 2024