padmanabhan-rajendrakumar

@padmanabhan-rajendrakumar·10 public vizzes

BC

A horizontal bar chart displays population estimates for ten countries, showing values scaled in thousands. D3 loads the dataset via `csv`, converts population strings to numbers, and renders rectangles using `scaleLinear` for the x-axis and `scaleBand` for y-axis positioning. The SVG output is sized at 960 by 500 pixels, with bars styled by default and no axes or labels drawn. The code imports `select`, `csv`, `scaleLinear`, `max`, and `scaleBand` from D3 v5.

Feb 9, 2020

Loading thumbnail…

HTML Starter

This example displays the top 10 most populous countries as horizontal bars, with country names on the y-axis and population on the x-axis, using data from the United Nations World Population Prospects 2019. Built with React and D3.js, it utilizes `scaleBand` and `scaleLinear` for scales, and renders custom SVG axes and marks. The chart includes formatted tick labels (e.g., converting billions to "B") and a population axis label, all within a 960×500 pixel SVG canvas.

Feb 9, 2020

Loading thumbnail…

Customizing Axes

This example creates a horizontal bar chart of the world's ten most populous countries, using D3.js version 5 with an SVG rendering approach. The bars are scaled linearly by population, with a custom axis formatter that converts values to billions using D3's `format` function and a `.replace('G', 'B')` call. The chart displays a title, an x-axis label, and removes default axis lines using `.remove()`. The data is loaded from a CSV file using `d3.csv`, with population values multiplied by 1000.

Feb 9, 2020

Loading thumbnail…

Making a Bar

This example shows a static scatter plot of country populations, with each rectangle positioned using the `population` values loaded from a CSV file. The visualization uses D3 v5’s `csv` method to parse `data.csv` and scales the population numbers by a factor of 1000. The SVG canvas is selected via `select('svg')`, and rectangles are appended with `append('rect')`, though their positions and sizes are hardcoded, so they overlap at a fixed location. The `scaleLinear` and `max` imports are unused, and no axes or labels are rendered.

Feb 9, 2020

Loading thumbnail…

Smiley Face Part IV

This example renders a classic smiley face using React components and D3’s `arc` generator for the mouth. The face is drawn as SVG circles for the head and eyes, with a yellow fill and black stroke for the background circle. The mouth is created via the D3 `arc()` path, positioned using polar coordinates. React manages the component structure while D3 handles the geometric path calculation, all within a static SVG canvas.

Feb 9, 2020

Loading thumbnail…

Tweak The Face!

Tweak The Face! renders a face from basic SVG shapes, including a circle for the head, rectangles for the hair and background, and lines for the mouth and eyebrows. Built with React and D3, it imports the `arc` function from D3 and uses a fixed data set of coordinates and dimensions to position each element. The visualization is generated in an SVG canvas using ReactDOM, with transformations applied to the main group to center the face, demonstrating a simple, declarative approach to static vector graphics.

Feb 6, 2020

Loading thumbnail…

Smiley Face Pt 1

A smiling face is rendered as a static SVG graphic, composed of a yellow circle for the head, two black circles for eyes, and an arc for the mouth. The example demonstrates using React to manage the SVG structure while leveraging the `arc` generator from `d3` to compute the mouth's path. Positioning relies on constant variables for the face's center, eye offsets, and radii, with the SVG's coordinate system used for layout. All elements are drawn declaratively within the JSX return value.

Feb 5, 2020

Loading thumbnail…

Let us make a face with D3.js

A face built from basic SVG shapes animates into a smile in this D3.js v5 example. Yellow circle head, black eyes, and rectangular eyebrows are drawn via `d3.select` and SVG attributes, then the smile uses the `d3.arc` generator. Transitions on the mouth and one eyebrow change their shape over two seconds, creating a cheerful expression. The other eyebrow remains static, showing asymmetric animation.

Feb 3, 2020

Loading thumbnail…

HTML Cars Report

This example shows a simple, unstyled HTML report listing three used cars with their model years and prices, with the first entry highlighted in red. The page consists of a single `index.html` file containing a static `<ul>` list and a separate `styles.css` stylesheet that sets a monospace font at 3em and applies the `.highlighted` class to change text color. No JavaScript libraries or data-fetching APIs are used; the content is hardcoded in the markup.

Jan 31, 2020

Loading thumbnail…

Cars Report

This example illustrates a simple JavaScript module system for generating a text-based car report. It displays a single car make from a hardcoded JSON array of car objects, parsed with `JSON.parse`. The report generation uses `Array.filter` and `Array.map` to select cars under a price threshold and format them with the `formatCar` function, which relies on destructuring. The code demonstrates ES6 modules and asynchronous data handling with a `Promise` in `getCars.js`, though the visible output only shows the first car's make.

Jan 29, 2020