Baraneedharan N M

Word Cloud

This example shows a static word cloud built from a small set of predefined words, including "Hello," "Coding," and "Lovely Day." It uses the d3.layout.cloud API to compute word positions and angles, applying a fixed -45-degree rotation to every word. The words are rendered as SVG text elements, with a font size of 60 pixels and a steelblue fill. The data comes from a local `words.js` module, and the layout runs once, drawing all text at the center of the canvas.

Aug 27, 2020

Making a Bar Chart

This example shows a horizontal bar chart of the top 10 most populous countries, using population data from a CSV file. It uses d3.csv to load the data, d3.scaleLinear and d3.scaleBand for positioning, and d3.axisLeft and d3.axisBottom to render axes with custom tick formatting. The bars are drawn as SVG rectangles with a steelblue fill, and the chart includes a title and axis labels.

Aug 19, 2020

Loading...

This example shows the relationship between item weight and item rate using a filled area chart with circular markers at each data point. The visualization reads from a CSV file and displays a quadratic curve, with the area beneath it shaded in maroon. The chart is rendered as SVG using D3 v5, employing `d3.scaleLinear` for both axes, `d3.area` to generate the shaded region, and `d3.axisLeft` and `d3.axisBottom` with tick lines for grid reference. The data set contains 15 ordered pairs, and the chart includes labeled axes for Rate and Weight.

Area Plot Sample

This area plot shows the relationship between item weight and item rate using a dataset with a quadratic pattern. The visualization renders an SVG graphic with a maroon filled area beneath a line, alongside large circular markers for each data point, all set within a chart featuring gridlines and labeled axes. Built with D3 v5, the code uses `area`, `line`, `scaleLinear`, `axisLeft`, and `axisBottom` APIs to generate the chart, while reading data from a CSV file and styling the output via an external stylesheet.

Line Plot Sample

This line plot visualizes the quadratic relationship between item weight and item rate using 15 data points from a CSV file. The chart uses D3 v5’s `scaleLinear`, `axisLeft`, and `axisBottom` to construct axes with grid lines, while a `line` generator draws the maroon curve and circles mark each data point. The SVG rendering includes styled labels and a title, with margins and tick formatting applied via `format`. Data is loaded asynchronously with `csv` and parsed to numbers before rendering.

Scatter Plot

A scatter plot displays the relationship between item weight and item rate from a CSV dataset, with each point positioned by d3.scaleLinear scales and rendered as an SVG circle. The visualization includes axes with tick marks, axis labels, and a title, all styled via CSS. The code uses d3.csv, d3.extent, d3.axisLeft, d3.axisBottom, and d3.format for data loading, scaling, and formatting, while React serves as the framework hosting the D3 v5 implementation.

My Own Scatter Plot

A scatter plot displays the relationship between item weight and item rate from a CSV file, with each circle representing a data point. The SVG visualization uses d3.scaleLinear for both axes, d3.extent to set domains, and d3.axisBottom and d3.axisLeft to render ticks with grid lines. Circles are appended to a group element with fixed radius and steelblue fill, while axis labels and a title are added via d3.append. The d3.csv function loads the data and parses values as numbers for rendering.

Making a Bar Chart

This example shows a horizontal bar chart of student marks, with each bar representing a student’s score. The chart uses a linear scale for the x-axis and a band scale for the y-axis, with axes generated via d3.axisLeft and d3.axisBottom. The data is loaded from a CSV file using d3.csv, and the bars are rendered as SVG rectangles. d3.scaleLinear, d3.scaleBand, and d3.max are used for scaling and domain calculation.

My Own Bar Chart

This example visualizes the population of the top 10 most populous countries using a horizontal bar chart rendered in SVG. The chart displays each country’s population with steel-blue bars, and includes labeled axes with a formatted x-axis that abbreviates large numbers (e.g., 1.42B). The visualization is built with D3 v5 within a React starter, using the `csv`, `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` functions to load data from a CSV file and generate the chart.

Aug 14, 2020

Shapes in SVG and CSS

An animated face drawn with SVG shapes is rendered inside a 960×500 viewport. The code uses D3 v5’s selection and arc helpers to construct the circular head, eyes, and a mouth path, while CSS handles the page layout. Eyebrow rectangles animate upward and downward through a chained `transition` call lasting two seconds per movement. The face is centered with a transform, and all elements rely on SVG attributes for positioning and styling.

Shapes in SVG and CSS

This example demonstrates basic SVG shape rendering using React-compatible HTML. It uses SVG elements like `circle`, `rect`, `line`, and `path` inside a static `svg` tag, with CSS applied via an external `styles.css` file that removes page margins. The code draws two red circles, a green rectangle, and a black line segment with a diagonal path, all positioned within a 960×500 viewport. It serves as a minimal introduction to composing SVG graphics without JavaScript interaction.

Cars Report 2

This example displays a simple car report listing three vehicles with their model years and prices, using plain HTML and CSS. The page includes an unordered list of cars, with one item—a 2009 Ford F150—visually emphasized through the `highlighted` CSS class, which changes its text color to red and enlarges its font size to 44 pixels. The styling is defined in an external stylesheet, `styles.css`, which also sets the body font to a monospace family at a 2em size. The page structure is marked up directly in `index.html` without external libraries or data-manipulation code.

Cars Report

This example shows a text-based report of cars filtered by price, displaying each car’s year, make, model, and price in a large, left-aligned `<pre>` element. The page first shows “Loading...”, then, after a simulated 2-second delay from a Promise, renders the report for cars priced under $2,000. It uses React-style ES modules (`getCars`, `formatCar`, `generateReport`) to parse JSON data and filter with `Array.filter` and `Array.map`. The visualization is purely typographic, with no charts or graphics.