p4pravin

@p4pravin·8 public vizzes

D3 Example

This stacked bar chart shows the count of Up, Down, and Failed statuses across five days, with each layer’s height representing the cumulative value. It uses D3 v3’s `d3.layout.stack` and `d3.scale.ordinal` for the x-axis, `d3.scale.linear` for the y-axis, and a `d3.scale.category10` color scale for the status categories. The data is loaded from a CSV file, and the chart renders as SVG within a React framework, with axes and a color legend added via `d3.svg.axis` and `d3.legend.color`.

Apr 2, 2020

Loading thumbnail…

Customising axes

This example shows a horizontal bar chart of country populations, with customized axes that improve readability. The y-axis displays country names using `d3.scaleBand`, while the x-axis uses `d3.scaleLinear` with a tick format that abbreviates large numbers via `d3.format`. The chart renders as SVG within a React framework, loading data from `data.csv` and styling bars with steelblue fills. Axes are generated using `d3.axisLeft` and `d3.axisBottom`.

Mar 24, 2020

Loading thumbnail…

Let's make a bar chart with D3 and SVG

A bar chart displays population estimates for nine countries using horizontal bars, with country names on the y-axis and population values on the x-axis. The chart is rendered as SVG in a React framework using D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`. Data is loaded from a CSV file and appended as `rect` elements inside a grouped `<g>` element with margins.

Mar 23, 2020

Loading thumbnail…

Let's make a face with D3 and SVG

This example demonstrates how to build an animated cartoon face using D3 and SVG, with a yellow circle for the head, black-outlined eyes, and an arc-based mouth centered on a 960x500 canvas. The eyebrows are rectangles that bounce up and down using chained `transition().duration(2000)` calls. The code imports `select` and `arc` from D3 v5 and uses React for the framework. SVG elements are constructed programmatically, with the mouth path generated via the `arc()` API using inner and outer radii and angular ranges.

Mar 21, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled through CSS classes and inline attributes. It shows how SVG elements can be grouped, transformed (scaled and translated), and filled with colors or strokes. The code uses raw SVG markup within an HTML page, with CSS rules in `styles.css` controlling properties like stroke width, color, and line joins. No JavaScript libraries are involved; rendering relies entirely on the browser's native SVG support.

Mar 21, 2020

Loading thumbnail…

Hello World

This example demonstrates asynchronous data loading and report generation from a hardcoded JSON array of car listings. The page initially displays “Loading...” in a large `<pre>` element, then after a 2-second delay, it renders a filtered list of cars priced under $2,000. The `getCars` function returns a promise that resolves with the parsed car data, while `generateReport` filters and formats the results using the `formatCar` helper. The application uses native JavaScript promises, `JSON.parse`, and DOM manipulation via `getElementById` to update the visible output.

Mar 21, 2020

Loading thumbnail…

Hello World

This example shows a minimal React starter template that displays the text “Hello World” on a page. It uses a hardcoded JSON array of car records—including year, make, model, and price—defined in a `cars.js` module and parsed with `JSON.parse`. The main `index.js` imports that data and writes the message into a `<pre>` element via `document.getElementById().textContent`, while `index.html` loads the bundled script. No charting or rendering library is involved; the visualization is limited to static text output.

Mar 20, 2020

Loading thumbnail…

Cars Report

This example displays a plain text message, “Hello World!”, inside an HTML `<pre>` element on a webpage. It demonstrates a minimal React setup using a static HTML file and a bundled JavaScript file. The `index.js` file selects the element with `document.getElementById` and updates its `textContent` property to display the message. The page loads the script via a `script` tag pointing to `bundle.js`, showing a basic data-free rendering approach with vanilla JavaScript.

Mar 20, 2020