Sudipta-15

@Sudipta-15·3 public vizzes

Fork of D3 Starter

This fork of the D3 Starter demonstrates a minimal bar chart that displays population data for several countries, sourced from a local CSV file. The visualization maps each country to a rectangle, with the height and width fixed while the data is read and logged. Built with d3.v7, the example uses `csv`, `scaleLinear`, `max`, and `select` APIs to parse data and prepare scales, though the rendered rectangles do not yet reflect the data values. The chart is drawn as SVG within a 960x500 canvas, with the data population values multiplied by 1000 during preprocessing.

May 23, 2022

Loading thumbnail…

Fork of Responding to Resize

This example demonstrates a responsive SVG visualization that fills the entire browser window and redraws its content whenever the viewport size changes. It renders two green, semi-transparent lines forming an X across the chart area, with their endpoint coordinates derived from the current container dimensions. The code uses D3 v5 to append an SVG element, selects the chart div, and listens to the window’s resize event to trigger a redraw function. The redraw function reads the container’s clientWidth and clientHeight, updates the SVG’s width and height attributes, and rebinds the line data using a standard enter-merge pattern.

May 23, 2022

Loading thumbnail…

Cars Report

This example displays the year of the first car in a small imported dataset as a large, centered text message. It demonstrates basic D3.js loading via UNPKG and the use of local ES6 modules, specifically importing the `cars` array from a separate `Cars.js` file. The page’s `#message` div receives its text content from `cars[0].year` and is styled using the `text-align` and `font-size` CSS properties in `styles.css`. The visualization relies on DOM manipulation via `document.getElementById` rather than any D3 drawing or layout API.

May 21, 2022