Giosec

@Giosec·7 public vizzes

Ecosystem Structure

This example visualizes the flow of air pollution data in Geneva using a Sankey diagram. The diagram shows nodes and links representing relationships between different categories or pollutants, with link thickness conveying relative values. Interactive checkboxes allow users to filter the displayed data, triggering a re-render of the diagram. The visualization is built with D3 v5, using the custom `d3.sankey` layout from the included `sankey.js` file, and renders to SVG. Data is loaded from a remote CSV file, with nodes and links dynamically transformed from the raw rows.

Jan 17, 2021

Loading thumbnail…

Vertical Bar Chart

This vertical bar chart displays population estimates for ten countries, sourced from a CSV file and rendered as SVG using D3.js version 6. The bars, colored steelblue, are sized with `d3.scaleBand` and `d3.scaleLinear`, and show values on a logarithmic y-axis formatted with a custom Indian number-formatting function. Hovering a bar triggers `mouseover` and `mouseout` events, changing the bar’s fill to red and adding a temporary text label that names the country and its population.

Jan 14, 2021

Loading thumbnail…

Fork of a complete barchart with animation

This example animates a bar chart’s construction from zero-height rectangles to full values, with each bar expanding sequentially and its value label positioning itself above the bar. The chart uses a linear y-scale and band x-scale over a fixed array of nine numbers, rendering via SVG. D3 v5 transitions (`d3.transition`) with staggered delays drive the growth and label movement. Bars respond to mouseover, mouseout, click, and double-click events by changing fill color over 1.5-second transitions or instantly. The code builds the chart with `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`, all within a React-compatible HTML page.

Jan 12, 2021

Loading thumbnail…

Fork of Fork of Fatal Police Shootings In the U.S. Since 2015

A choropleth map of fatal police shootings in the U.S. since 2015, using d3.geoAlbersUsa and d3.geoPath to project state boundaries from a TopoJSON atlas. Points are plotted as circles, color-coded by a selected attribute (e.g., race, gender, threat level) via an interactive legend. A bar chart shows the count of each category, and hovering over the legend highlights matching incidents. The CSV data is from the Washington Post, parsed with d3.csv.

Jan 1, 2021

Loading thumbnail…

Prova1

This example demonstrates a simple text display using D3.js and ES6 modules. It loads D3 via UNPKG and uses the `d3.select` API to target a DOM element with the ID `message`, setting its text content. The message text is imported from a local ES6 module, `myMessage.js`, and styled with CSS to appear large and centered. The visualization shows how to combine external libraries, local modules, and standard styling in a minimal web page.

Dec 29, 2020

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal HTML page that displays the text "Hello HTML" centered on the screen using CSS, while also executing a JavaScript command that logs "Hello JavaScript!" to the browser's developer console. The page uses no external libraries or frameworks, relying solely on the standard HTML `<style>` and `<script>` elements. Its rendering approach is straightforward static text styling, with the JavaScript serving only as a console output check.

Dec 29, 2020

Loading thumbnail…

Untitled

This example demonstrates the use of ES6 modules and D3 imports in VizHub, filtering a small dataset of cars from an embedded JSON string and displaying a formatted report. The code imports the `cars` data and a `generateReport` function from local modules, which filters cars under a price threshold and maps each to a formatted string via `formatCar`. The resulting message is written into a `<pre>` element using the DOM API. It showcases local module composition and data transformation without any external visualization library beyond standard JavaScript.

Dec 29, 2020