goshashi (@goshashi), VizHub

Making a Bar chart

This example shows a horizontal bar chart of population data for five countries, sorted by country name, with the bars colored steel blue. The chart uses React with D3 v5, loading data from a CSV file and rendering SVG elements. It employs `d3.scaleLinear` for the x-axis population scale, `d3.scaleBand` for the y-axis country categories, and `d3.axisLeft` and `d3.axisBottom` to generate the axes. The bars are appended as SVG `<rect>` elements, with their widths proportional to population values.

May 19, 2020

Loading thumbnail…

Making a Bar chart

This bar chart displays the population of five countries, sorted vertically by country name, with horizontal bars representing each population value. The visualization uses React with D3 v5, loading data from a CSV file and rendering SVG elements. The code employs D3 scales, including `scaleLinear` for the x-axis and `scaleBand` for the categorical y-axis, alongside `axisLeft` and `axisBottom` to generate the axes. Population values are multiplied by 1000 during data preprocessing before being mapped to bar widths.

May 19, 2020

Loading thumbnail…

Lets make a face

A smiling cartoon face is rendered as a yellow circle with black-outlined features, including eyes, eyebrows, and an arc-shaped mouth. The eyebrows animate by moving upward and then back down over two seconds. The example uses D3.js v5 with React, building SVG shapes with `select`, `append`, and `arc` for the mouth path. Transitions are applied via `transition().duration()` to create the eyebrow movement.

May 19, 2020

Loading thumbnail…

HTML Starter

This example displays a simple HTML page with a green circle and a red rectangle rendered inside an SVG element. The page uses plain HTML and inline CSS to center the content and set a large font size. The SVG shapes are drawn directly in the markup with `circle` and `rect` elements, demonstrating basic static vector graphics without any JavaScript libraries or data sources. The code serves as a minimal starting point for HTML and SVG visualization projects.

May 15, 2020

Loading thumbnail…

cars report

This example demonstrates a simple text-based report generated from a hardcoded JSON array of car objects, filtered by a minimum price and formatted into lines. The code uses React, though the rendering is a plain HTML `<pre>` element updated via `document.getElementById`. It defines `cars.js` with a JSON string parsed into an array, `formatcars.js` to format each car’s year, make, model, and price, and `generatereport.js` to filter and map the data. The final report is written to the page using the DOM API.

May 15, 2020

Loading thumbnail…

cars report

This example demonstrates a simple text-based report generated from a hardcoded JSON array of car objects, filtered by a minimum price and formatted into lines. The code uses React, though the rendering is a plain HTML `<pre>` element updated via `document.getElementById`. It defines `cars.js` with a JSON string parsed into an array, `formatcars.js` to format each car’s year, make, model, and price, and `generatereport.js` to filter and map the data. The final report is written to the page using the DOM API.

May 15, 2020

Loading thumbnail…

cars report

This example demonstrates a simple text-based report generated from a hardcoded JSON array of car objects, filtered by a minimum price and formatted into lines. The code uses React, though the rendering is a plain HTML `<pre>` element updated via `document.getElementById`. It defines `cars.js` with a JSON string parsed into an array, `formatcars.js` to format each car’s year, make, model, and price, and `generatereport.js` to filter and map the data. The final report is written to the page using the DOM API.

May 15, 2020