Gilda

@gildapepe·3 public vizzes

Fork of Stylized Line Chart

This example visualizes weekly temperature trends in San Francisco using a stylized area chart. The x-axis maps time with a time scale, while the y-axis maps temperature with a linear scale, and the area path uses d3.area with a natural curve to create a smooth, orange-filled region. React renders the SVG components, including custom AxisBottom and AxisLeft components that generate ticks and gridlines, while d3.csv loads the Dataset for Sense Your City data. The chart displays axis labels for time and temperature, with a clean Poppins font styling.

May 13, 2021

Loading thumbnail…

Fork of Customizing Axes

This bar chart displays the number of flowers per Iris species, using an SVG rendering with D3 v5. The visualization loads data from a local CSV file and maps each flower type to a horizontal bar scaled by its numeric count. It customizes both axes, removing default domain lines and using `d3.axisBottom` with a comma-formatted tick label, while `d3.scaleBand` positions the categorical species labels. The chart also adds a title and axis label via appended SVG text elements.

May 12, 2021

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates the minimal structure of a VizHub project, where a static message is rendered to the page. It shows how to load D3.js from a CDN via UNPKG and use ES6 modules for local code organization. The code imports the `select` function from D3 and a `message` string from a local module, then sets the text of a `#message` div using `select('#message').text()`. Styling is applied through an external CSS file.

May 11, 2021