SandraPicarra

@SandraPicarra·8 public vizzes

Making a varchart

This example shows a horizontal bar chart of country populations, with bars sized proportionally to each nation’s inhabitants. The chart uses D3 v6’s `scaleLinear` and `scaleBand` to map population values and country names to SVG rectangles, while a margin-based translation positions the chart within the viewport. Data is loaded from a CSV file via `d3.csv`, with population values converted to numbers and multiplied by 1000 before rendering. The visualization is built with React tooling, though the rendering itself relies on D3’s SVG selection and data-join methods.

Oct 17, 2020

Loading thumbnail…

Activities

This example demonstrates how to generate a text-based activity report from a JSON dataset. It loads a list of activities, filters them by price, and formats each entry into a readable string. The page initially shows “Loading...” and then displays the report after a simulated two-second delay. The code uses a JavaScript Promise in `getActivity` to retrieve the data, array methods `filter` and `map` to process it, and template literals for formatting. The final output is rendered in a `<pre>` element.

Oct 17, 2020

Loading thumbnail…

Cars report

This example displays a text-based car report generated from a hardcoded JSON array. The page uses asynchronous JavaScript and D3 version 6 to fetch car data via a custom `getCars` promise, filter entries by price, and format each line as “year make model: $price” using the `formatCar` helper. The output is rendered inside a `<pre>` element.

Oct 17, 2020

Loading thumbnail…

Cars Report

This example demonstrates how to generate a text-based car report from a dataset of five vehicles. It shows a loading message while the data is fetched, then displays a formatted list of cars priced under $2,000. The code uses JavaScript objects, arrays, promises, and ES6 modules, including `getCars` with `JSON.parse` and a simulated async fetch via `setTimeout`, as well as `formatCar` and a `generateReport` function that filters and maps car entries.

Oct 17, 2020

Loading thumbnail…

Cars Report

This example demonstrates a text-based car report that lists vehicles under a specified price threshold after a simulated loading delay. It shows a plain HTML page with a large-font message element that initially reads "Loading..." and then displays formatted car details, such as "2012 Nissan Leaf: $1800," filtered by price. The code uses React's starter setup via VizHub, with core logic in JavaScript Promises, JSON parsing, and array methods like `filter`, `map`, and `join`. The visualization relies on simple DOM manipulation through `document.getElementById` to update text content, with no external charting libraries.

Oct 17, 2020

Loading thumbnail…

Cars Report

This example demonstrates a simple text-based report of car listings, showing filtered results based on a price threshold. It displays car details like year, make, model, and price for vehicles costing under $2,000, with a "Loading..." message shown while data is fetched. The code uses React, a Promise-based `getCars` function with a simulated 2-second delay, and JavaScript array methods like `filter`, `map`, and `join` to generate the report. Data is embedded as a JSON string in the script, and the output updates the DOM via `textContent`.

Oct 17, 2020

Loading thumbnail…

Cars Report

This is a React-based visualization that displays a simple text report about cars. It shows the year of the first car in a small dataset, rendered prominently using the DOM’s `textContent` property. The data is embedded as a JSON string and parsed with `JSON.parse`, then accessed directly. The example uses no external charting libraries, relying solely on React and plain JavaScript to output the value to an HTML `<pre>` element.

Oct 17, 2020

Loading thumbnail…

Cars Report

This example displays a minimal "Cars Report" page that renders the message “Hello world” in the browser. Built with React, the application uses vanilla JavaScript to insert the text into a div element, and the page is packaged into a single bundle.js file via Rollup. The visualization serves as a bare-bones starter template, showing how to set up a React-based environment for future data-driven charts or reports, though it currently contains no data or interactive features.

Oct 17, 2020