pgy-iacas

@pgy-iacas·12 public vizzes

CO2 Emissions Over Time

This stacked area chart visualizes global CO2 emissions from 1790 onward, broken down by fossil fuel types—Gas, Liquids, Solids, Cement Production, and Gas Flaring—with total emissions scaled in gigatons per year. The chart uses D3 v4’s `d3.stack` and `d3.area` to render the layers, while `d3-area-label` positions labels within each segment. Hovering over a layer triggers a tooltip showing topic-related words from the cloud.json data, rendered as red text inside a circle. The visualization adapts to window resizing and uses `d3.scaleOrdinal` with `d3.schemeDark2` for color encoding.

Mar 17, 2020

Loading thumbnail…

CO2 Emissions Over Time

This stacked area chart visualizes global CO2 emissions from 1790 onward, broken down by source categories—Gas, Liquids, Solids, Cement Production, and Gas Flaring—measured in gigatons per year. The chart uses d3.stack and d3.area to layer the series, with d3.schemeDark2 assigning colors and d3-area-label positioning white labels within each band. The y-axis includes gridlines via d3.axisLeft, and the chart updates responsively on window resize, rendering as SVG with data loaded from a CSV file.

Mar 16, 2020

Loading thumbnail…

CO2 Emissions Over Time

This stacked area chart visualizes global CO2 emissions over time, broken down by fossil fuel type: gas, liquids, solids, cement production, and gas flaring. The data is sourced from a cloud.json file and filtered to show years after 1790. Built with D3 v4, the visualization uses `d3.stack` and `d3.area` to render the SVG paths, with `d3.areaLabel` positioning text labels within each segment. The chart updates responsively on window resize, and hovering over a segment turns it black.

Mar 16, 2020

Loading thumbnail…

CO2 Emissions Over Time

This stacked area chart visualizes global CO2 emissions over time from 1790 onward, breaking down contributions by fuel type: Gas, Liquids, Solids, Cement Production, and Gas Flaring. The chart uses d3.stack with ascending order and d3.area with curveBasis to render smooth layers, colored via d3.scaleOrdinal with schemeDark2. Labels are positioned using d3-area-label’s interpolateResolution method. The data is loaded from a CSV using d3.csv, and the SVG updates responsively on window resize. Axis ticks include a custom format for years, with a rotated y-axis title.

Mar 16, 2020

Loading thumbnail…

Persons of Concern StreamGraph by Origin

This streamgraph visualizes the number of confirmed COVID-19 cases in China’s provinces and autonomous regions over time, using a wiggle-offset stacked area chart. Data is loaded from a local JSON file, interpolated for daily values, and rendered as SVG paths using the D3.js stack, area, and curveBasis APIs, with labels positioned by the d3-area-label library. The visualization highlights the rise and fall of case counts across regions, with each colored band representing a province’s contribution to the total.

Mar 13, 2020

Loading thumbnail…

Persons of Concern StreamGraph by Origin

This StreamGraph visualizes the number of persons of concern over time, grouped by country of origin, using data from UNHCR Population Statistics. A stack offset wiggle creates the flowing layers, with d3.area-label placing labels inside each region. The code uses d3.stack, d3.scaleTime, and d3.curveBasis to render the SVG, with interpolated values between annual data points. Major and minor axes display time, while hovering highlights individual country streams.

Mar 13, 2020

Loading thumbnail…

Persons of Concern StreamGraph by Origin

This streamgraph visualizes the total number of persons of concern, grouped by country of origin, over time, using data from UNHCR Population Statistics. The graphic displays the changing volume of various categories—such as refugees, asylum-seekers, and internally displaced persons—as stacked, colored streams, with labels repositioned using d3-area-label. The visualization employs D3 v4’s `d3.stack`, `d3.area`, and `d3.curveBasis` to render the smoothed, wiggle-offset streams, while `d3.scaleTime` and `d3.scaleLinear` handle the axes. The SVG rendering uses a filter to exclude countries with low total counts, and the streams highlight on hover.

Mar 13, 2020

Loading thumbnail…

Persons of Concern StreamGraph by Origin

A streamgraph shows the number of COVID-19 cases across Chinese provinces over time. The visualization uses D3.js v4 with a stacked area chart, employing `d3.stack` with `stackOffsetWiggle` and `stackOrderInsideOut` to create the flowing shape. Data is interpolated between recorded dates using a custom bisector function. Labels are positioned with the `d3-area-label` library, and the chart renders as an SVG with hover interactions that highlight individual provinces. The underlying data comes from a JSON file tracking daily case counts per region.

Mar 13, 2020

Loading thumbnail…

Persons of Concern StreamGraph by Origin

This streamgraph shows the total number of persons of concern—including refugees, asylum-seekers, and internally displaced persons—grouped by country of origin over time, drawing on UNHCR population statistics. The visualization uses d3.stack with a wiggle offset to create the layered streams, and d3.area-label to place labels inside the curves. Data is interpolated across years to produce continuous paths, with hover effects altering fill opacity. Excluding low-count countries, the chart renders as an SVG with a time-based x-axis and a stacked area layout.

Mar 13, 2020

Loading thumbnail…

Persons of Concern StreamGraph by Origin

Mar 12, 2020

Loading thumbnail…

making a bar chart

This example shows a horizontal bar chart ranking the populations of nine countries, using a CSV data file as its source. The chart loads the data with `d3.csv` and renders SVG rectangles scaled by `d3.scaleLinear` for population and `d3.scaleBand` for country categories. It adds axes via `d3.axisLeft` and `d3.axisBottom`, with margins and padding configured for clear labels. The visualization demonstrates a straightforward, reusable pattern for building bar charts with D3 v5.

Mar 12, 2020

Loading thumbnail…

HTML report

This example presents a minimal HTML report that displays a list of car-related entries, with the item “madezhizhang” visually emphasized in red. The page is styled using a global CSS rule that sets a large monospace font size and applies a `.highlighted` class to the highlighted list item. The structure is defined in raw HTML within `index.html`, while a separate React component in `index.js` renders a static “Hello React!” message using `ReactDOM.render`. The styling and markup are straightforward, relying on basic CSS selectors and React’s core API.

Mar 12, 2020