Deepanshuu

@Deepanshuu·8 public vizzes

World Map Example

This example renders a natural Earth world map in an SVG using D3.js v5. It draws a blue sphere backdrop and then loads country boundaries from a TopoJSON file via `d3.json` and the `topojson` library’s `feature` method. The projection uses `d3.geoNaturalEarth1` with `d3.geoPath` to generate the country paths, which are filled light green with semi-transparent black strokes. The map displays static country outlines without interaction or additional data layers.

Jul 29, 2019

Loading thumbnail…

Learning

This visualization displays five static red circles, each representing an apple, evenly spaced across a gray SVG canvas. The code uses d3.select to target the SVG element, d3.range to generate five data points, and d3's enter and exit methods to manage circle elements, though the removal process is incomplete. The circles are rendered via SVG attributes like cx, cy, and r, with a fixed fill color, and the example demonstrates basic D3 data-binding and element lifecycle operations.

Jul 19, 2019

Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. It showcases customized D3 v5 axes, with horizontal grid lines extending across the plot and tick labels formatted using the `d3.format` function to abbreviate large numbers. The `d3.scaleLinear` and `d3.scalePoint` scales position the bars, while `d3.axisBottom` and `d3.axisLeft` render the axes. The SVG rendering includes circles for data points and custom text labels for the title and axis label.

Jul 19, 2019

Loading thumbnail…

Let's make a world Map!

This visualization animates a world map built from TopoJSON data, where each country appears as a light-green path with dark strokes on a dark blue background. Using D3 v5, the code loads the dataset via `d3.json` and converts it with `topojson.feature`. The `d3.geoMercator` projection and `d3.geoPath` generate the SVG paths, which are appended to the document and then revealed through a two-second `transition` animation.

Jul 16, 2019

Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face built with D3.js, whose eyebrows animate upward and then back down in a looping transition. The face is constructed entirely with SVG elements—circles for the eyes and head, rectangles for the eyebrows, and a path generated by the `d3.arc` function for the mouth. D3’s selection and transition APIs, including `transition().duration()`, are used to move the eyebrow group over time. The code uses D3 v5 with a static SVG canvas, relying on `d3.select` and attribute manipulation for rendering.

Jul 16, 2019

Loading thumbnail…

Making a Bar chart

A bar chart displays population figures for ten countries, from China's 1.4 million to Mexico's 130 thousand, using a linear scale for values and a band scale for categorical country labels. The example loads data from a CSV file via `d3.csv` and renders the bars as SVG rectangles, with axes positioned using D3's `scaleLinear` and `scaleBand`. The visualization relies on D3 v5's `select`, `csv`, `max`, and scale utilities to size and position each bar within a fixed 960-by-500 SVG canvas.

Jul 16, 2019

Loading thumbnail…

Responding to Resize

This example demonstrates how a D3.js visualization can adapt to browser window resizing. A full-page SVG displays a green X composed of two thick lines that stretch to match the container’s current dimensions. The code uses a `redraw` function to read `clientWidth` and `clientHeight` from the chart’s `div`, then updates the SVG’s width and height attributes and the line coordinates via a data join. A native `window` `resize` event listener triggers a redraw whenever the viewport changes.

Jul 16, 2019

Loading thumbnail…

Hello VizHub

This example displays a single bold "Hello VizHub!" message centered on a dark blue page. It demonstrates the basic structure of a VizHub project, using D3.js v5’s `select` method to update the text content of a `div` element. The message originates from a separate ES6 module, `myMessage.js`, and the page’s styling relies on the Ubuntu font imported via CSS. The code highlights modular JavaScript imports and D3’s DOM manipulation alongside external stylesheet linking.

Jul 10, 2019