Juan Ore

@bigmule·8 public vizzes

Making a Bar Chart

This example renders a horizontal bar chart of population data for the ten most populous countries, sourced from a CSV file. Using D3 v5 within a React framework, it applies `scaleLinear` for population values and `scaleBand` for country names. The SVG-based visualization appends rectangles with heights determined by `yScale.bandwidth()`, while a green background and proportional bar widths highlight the data.

May 18, 2020

Loading thumbnail…

Let's make a face with D3

This example builds a simple cartoon face using SVG circles. It constructs a yellow head, two black eyes, and no other facial features. The code creates the face by directly appending `circle` elements to the `svg` with specific `cx`, `cy`, and `r` attributes. It uses the D3 v5 selection and mutation API, specifically `select('svg')` and `svg.append('circle')`, to position the elements based on the SVG's `width` and `height` attributes. The face is rendered using SVG, with styling applied via CSS.

May 18, 2020

Loading thumbnail…

ILINet Flu Surveillance Data Interactive Visualization

This interactive visualization presents CDC ILINet flu surveillance data through four coordinated panels: a line chart showing weekly trends across years, a choropleth map of state-level averages, a bar chart of top states, and a multi-line chart tracking yearly patterns for selected states. Built with React, D3 v5, and SVG rendering, it leverages d3.scaleBand, d3.scaleLinear, d3.scaleOrdinal, d3.geoAlbersUsa, and d3.geoPath for geographic projection, with topojson for US state boundaries. Users interact by hovering or clicking to filter and highlight data across panels.

May 18, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to position and style basic SVG shapes—circles and rectangles—using both inline SVG attributes and external CSS. The visualization shows a static composition of shapes on a 960 by 500 canvas, including one shape group translated via the SVG `transform` attribute. Rendered through React within the VizHub environment (source v3), the code uses raw SVG elements like `<circle>`, `<rect>`, and `<g>`, with styling applied via the `styles.css` file. The page itself is a minimal HTML document linking to the stylesheet, highlighting the interplay between SVG presentation attributes and CSS rules.

May 18, 2020

Loading thumbnail…

HTML New Cars

This example displays a simple car report as an HTML list, with three used vehicles and their prices. The code uses standard HTML markup with a `<ul>` element and styled CSS classes. The `styles.css` file sets a monospace font and large body text, while the `.highlighted` class applies red styling to the first car entry. No JavaScript frameworks or data visualization libraries are used; the example relies purely on static HTML and CSS to present the data.

May 18, 2020

Loading thumbnail…

HTML New Cars

This example presents a simple static list of three used cars, each with its model year, name, and price. The data is hardcoded directly into the HTML markup within an unordered list, using plain text between `<li>` tags. It demonstrates the most basic form of web content creation with no JavaScript, CSS, or external libraries, relying solely on native HTML elements like `<h1>` and `<ul>` to structure the report. The visualization is purely textual, with no charts, graphs, or interactive features.

May 18, 2020

Loading thumbnail…

HTML Cars Report

This example displays a minimal HTML page titled “HTML Cars Report” containing only the text “my first html page.” It is built with React and serves as a bare-bones starter template, demonstrating the basic structure of an HTML document with a `<!DOCTYPE html>`, `<head>`, and `<body>`. The code uses no external libraries or data sources, focusing solely on static, unstyled content.

May 15, 2020

Loading thumbnail…

React Starter

This example displays a full-screen “Hello React!” message rendered as large, centered text. It demonstrates the basic setup for a React visualization project using the production builds of React 16.10.0 and ReactDOM. The application creates a simple functional component that returns a div with the message, and ReactDOM renders it into the root element. It relies on a separately compiled JavaScript bundle, indicating a build process is involved.

May 15, 2020