krishv2

@krishv2·3 public vizzes

Customise Axis

This example displays population data for ten countries using both horizontal and vertical bar charts. The horizontal chart shows countries on the y-axis and population on the x-axis, while the vertical chart reverses these roles. Using d3.scaleLinear, d3.scaleBand, and d3.axisBottom/axisLeft, the code renders SVG rectangles styled in steelblue and red, with population values formatted using d3.format. The data is loaded from a CSV file and multiplied by 1000 before rendering.

Jun 19, 2020

Loading thumbnail…

React Starter

This React starter example renders a plain text message using React and ReactDOM, with data loaded from a CSV file containing country populations. The code imports React, ReactDOM, and the data, though the rendering logic is not shown in the provided files. It uses the production builds of React 16.10.0 and ReactDOM, mounting to a root div in the HTML. The styling sets a large font size for the message, and the visualization does not display any chart or data-driven graphics in the visible code.

Jun 16, 2020

Loading thumbnail…

make a face with d3.js

A smiling face drawn with basic SVG shapes animates its eyebrows in a looping motion. The example builds a yellow circle for the face, adds two black eyes and a mouth, then runs a repeating transition that moves the eyebrows upward and back down. It uses D3 v5 selections, the `arc()` generator for the mouth path, and chained `transition().duration()` calls to create the animation. The code constructs the layout relative to the SVG’s center and uses the `translate` attribute for positioning.

Jun 16, 2020