abhimanyu-dhar

@abhimanyu-dhar·4 public vizzes

Fork of Selecting a Year on a Line Chart

This interactive line chart displays population estimates and projections for world regions from 1950 to 2100. Users can hover over the chart to select a specific year, which draws a vertical black line and updates the selected year used for sorting the color-coded legend. The visualization uses d3.line with curveBasis for smoothed paths, d3.scaleTime and d3.scaleLinear for axes, and a d3.mouse event handler to trigger year selection. Data comes from UN population estimates loaded via d3.csv.

May 9, 2021

Loading thumbnail…

Fork of Line Chart with Multiple Lines

This fork of a D3 v5 line chart visualizes one week of temperature data for cities worldwide, sourced from Data Canvas – Sense Your City. The SVG rendering uses `d3.scaleTime`, `d3.scaleLinear`, and `d3.scaleOrdinal` with `d3.schemeCategory10` for color encoding. Lines are generated via `d3.line` with `d3.curveBasis`, while a custom `colorLegend` function handles the categorical legend. Data is loaded from a CSV, parsed with timestamps converted to `Date` objects, and nested by city using `d3.nest`.

May 9, 2021

Loading thumbnail…

Fork of Shapes with SVG

This visualization displays population data for 14 countries using horizontal bars rendered as SVG rectangles. The code loads data from a CSV file and multiplies the population values by 1000. It uses d3.scaleLinear for the x-axis scale and d3.scaleBand for the y-axis, though the bar heights are fixed at 300 pixels and the y-scale is not applied to the rectangles. The example demonstrates basic data loading with d3.csv, scaling, and SVG element creation.

May 9, 2021

Loading thumbnail…

Shapes with SVG

This example draws a simple emoticon face using SVG shapes rendered with D3 v6. It shows a yellow circle for the head, two black-outlined eyes, and a mouth created with the `d3.arc()` generator using specified inner and outer radii and angular ranges. The code selects the SVG element, parses its width and height attributes, and positions shapes relative to the center using numeric offsets. The face is constructed entirely with static, hard-coded dimensions and no external data source.

May 9, 2021