Paramjeet Dhiman

@paramjeetdhiman·3 public vizzes

Responsive Margin Convention

This example demonstrates how to apply the D3.js margin convention in a responsive visualization that adapts to the full browser window. It renders an SVG with axes and a rounded rectangle, using d3.axisLeft and d3.axisBottom with linear scales. The marginConvention function calculates inner dimensions and translates a group element, while a resize listener re-renders the chart on window changes. The code reuses selections with .merge() to update elements efficiently.

Jan 20, 2020

Loading thumbnail…

Responsive Starter Code

This example demonstrates a minimal responsive visualization template. It shows a single rounded rectangle that always fills the browser window, with its dimensions recalculated on every resize event. The code defines a reusable `myResponsiveComponent` function that takes a container and size properties, then creates or updates an SVG element and its `rect` child using D3 v5’s data-join pattern (`selectAll().data([null])`). It uses `document.body.clientWidth` and `clientHeight` as the size source, and re-renders by attaching a `resize` event listener to the window.

Jan 20, 2020

Loading thumbnail…

Stylized Line Chart

This line chart visualizes weekly temperature readings from San Francisco, plotting time on the horizontal axis and temperature on the vertical axis. The visualization uses a smooth, stylized curved path to connect data points. Built with React and D3 v5, it employs `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` with `d3.curveNatural` to generate the SVG path. Axes are rendered using custom React components, with data loaded from a CSV file via `d3.csv`. Long pinkish strokes highlight the trend, while tick marks use a subtle gray color scheme from the Poppins-styled stylesheet.

Jan 16, 2020