Suman Choudhary

@Suman-Choudhary·9 public vizzes

Cheap tricks for interactive maps - India

This interactive map of India displays district-level boundaries colored by state, with state outlines superimposed in steel blue. Users can zoom and pan via D3’s `zoom` behavior. The visualization uses `d3.geoMercator` projection, `d3.geoPath` for rendering TopoJSON district data, and `d3.scaleOrdinal` with `schemeCategory10` for coloring, with hover effects changing district fills.

Nov 24, 2020

Loading thumbnail…

D3 Course 7: World Map - Rotating Globe

This example displays an orthographic world map that rotates continuously on a black background, showing country boundaries and graticule lines. Using D3 v5, it combines `geoOrthographic`, `geoPath`, and `geoGraticule` to project and render geographic features, with a `timer` driving the rotation. Land masses are colored light green and highlight red on hover, with country names from a TSV lookup. The map uses TopoJSON data from world-atlas and supports zooming via d3.zoom.

Nov 24, 2020

Loading thumbnail…

Selecting a Year on a Line Chart

This interactive line chart displays population over time for different world regions, with a vertical line marking the currently selected year. Users can hover anywhere on the chart to update the selection and the line position. Built with D3 v5, it uses `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis`, plus `nest` for grouping data by region. The visualization renders as SVG and loads UN population estimates from CSV files, using `mouse` events to trigger selection updates.

Nov 23, 2020

Loading thumbnail…

Stylized Line Chart

This stylized line chart displays temperature readings over the course of a week, sourced from the Data Canvas Sense Your City dataset. The visualization uses a smooth, curved line rendered with d3.line and curveNatural, with temperature values mapped along a linear scale and timestamps along a time scale. Built with React and D3 v5, the chart features custom SVG axes with tick marks and labels, while data loading is handled through d3.csv. Styling uses the Poppins font and a minimal color palette defined in external CSS.

Nov 19, 2020

Loading thumbnail…

Stylized Line Chart

A stylized line chart displays temperature changes over time for San Francisco using the Data Canvas Sense Your City dataset. The chart uses a smooth natural curve to connect data points, with a teal stroke and circular marks positioned along the path. Built with React and D3 v5, it employs `scaleTime` for the x-axis, `scaleLinear` for the y-axis, and `line().curve(curveNatural)` for rendering. SVG output includes custom axes with tick labels formatted as abbreviated weekday names via `timeFormat('%a')`.

Nov 19, 2020

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays automobile data from the UCI Machine Learning Repository’s Auto MPG dataset. Users select which columns map to the X and Y axes via dropdown menus, allowing comparison of attributes like horsepower, weight, and acceleration. The visualization uses D3.js v5 with the `scaleLinear`, `axisLeft`, and `axisBottom` APIs, rendering SVGs with animated transitions for circles. A modular `dropdownMenu` function and a reusable `scatterPlot` component manage the UI and chart updates, while data loading is handled through `d3.csv`.

Nov 18, 2020

Loading thumbnail…

Scatter Plot with Menus

This scatter plot visualizes automobile data from the UCI Machine Learning Repository’s Auto MPG dataset, with dropdown menus letting users choose which columns map to the X and Y axes. The visualization uses d3.scaleLinear for scaling, d3.axisLeft and d3.axisBottom for axes, and a custom reusable scatter plot component. Data loading uses d3.csv, while transitions with duration and delay animate circles as the axes change. The menu implementation relies on a reusable dropdownMenu function that manages select elements and option updates. SVG rendering displays red semi-transparent circles with axis labels and tick marks.

Nov 18, 2020

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset, with each circle representing a vehicle. The code loads data via `d3.csv`, scales values with `scaleLinear`, and renders axes using `axisLeft` and `axisBottom`. An SVG canvas displays the points with red, semi-transparent circles, while axis labels and a title are added as text elements, all styled through the provided CSS.

Nov 18, 2020

Loading thumbnail…

Hello Sir

This example demonstrates how to load D3.js via UNPKG and use ES6 modules for modular code. It renders the message “Hello VizHub!” in large centered text using the `select` API to target the `#message` div. The code also imports a local `myMessage` module, showcasing local file import alongside D3, and includes a placeholder SVG element. Data is referenced from a remote RDW endpoint, though the visualization primarily highlights D3’s text manipulation and module integration.

Nov 12, 2020