ChristianABeier

@ChristianABeier·9 public vizzes

Smiley Face Part II

This example shows a simple yellow smiley face rendered with SVG, consisting of a large outlined circle for the head and two smaller circles for the eyes. Built with React and ReactDOM, the visualization defines all geometric values—such as center coordinates, radii, and stroke width—as JavaScript constants, then uses those to position the SVG circle elements. The face’s dimensions are fixed at 960 by 500 pixels, with the head centered at the midpoint and the eyes offset slightly from the center.

Oct 20, 2022

Loading thumbnail…

Untitled

A pie chart shows the distribution of greenhouse gas emissions across different scope categories, with each slice’s area proportional to its emission value. A legend on the right lists each category with a color swatch and the corresponding numeric value. The chart is rendered with D3.js v3, using `d3.pie()` for the layout, `d3.arc()` for the slice geometry, and `d3.scaleOrdinal` with `d3.schemeCategory10` for colors. Data is loaded from a local `data_GHG_sopes.json` file.

Oct 18, 2022

Loading thumbnail…

emission and scope

A donut chart displays GHG emission quantities per scope category, using a proportional area for each segment to compare emission amounts across scopes 1, 2, 3, and out-of-scope categories. The visualization loads data from `data_GHG_sopes.json` via `d3.json` and renders the chart with `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` for color mapping. A legend, generated with `d3.selectAll` and appended `rect` and `text` elements, shows each scope’s label and formatted emission value using `d3.format`.

Oct 18, 2022

Loading thumbnail…

Loading and Parsing CSV data

This example demonstrates loading and parsing CSV data using JavaScript's fetch API within a D3.js environment. The program retrieves a remote CSV file containing greenhouse gas emission data from a GitHub gist and parses it into a JavaScript object using the `d3.csvParse` method. The fetched text is converted asynchronously, and the resulting parsed data is logged to the console. The visualization relies on D3 v7.6.1 and showcases the process of handling asynchronous data loading to prepare tabular data for subsequent visualization.

Oct 18, 2022

Loading thumbnail…

Fork of Customizing Axes

This bar chart displays the top 10 most populous countries based on 2018 estimates from the United Nations World Population Prospects. The visualization uses D3 v5's `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the chart, with tick labels formatted using `format('.3s')` to abbreviate large numbers. The data is loaded from a CSV file using D3's `csv` function, and the SVG rendering includes customized axis styling, a title, and grid lines defined in the accompanying CSS.

Oct 17, 2022

Loading thumbnail…

Fork of Electric Bar Chart Using d3.stack

This stacked bar chart visualizes two years of personal electricity consumption for a three-family residence, breaking down monthly usage by individual meter accounts. Green and blue segments reveal each account’s contribution to the total kilowatt-hours. The visualization uses d3.stack to transform the data, with d3.scaleBand and d3.scaleLinear for axes, d3.scaleOrdinal with d3.schemeCategory10 for colors, and SVG rendering. Interactive tooltips appear on mouseover showing the segment’s value in kWh. The data originates from a personal electricity consumption dataset.

Oct 17, 2022

Loading thumbnail…

Fork of Fork of D3: NYC Crime Visualization

This interactive dashboard presents NYC crime data across multiple coordinated views: a geographic map with a heatmap overlay, a pie chart, and two bar charts for age and race breakdowns. Users can filter by precinct and crime type, with all charts updating in response. The visualization uses D3 v6 with a Mercator projection via `d3.geoMercator()` and `d3.geoPath()` for the map, alongside SVG-based pie and bar charts. Crime color mapping and tooltips provide additional detail.

Oct 17, 2022

Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

A zoomable sunburst visualization displays the hierarchical Flare dataset as concentric arcs, with clickable parent nodes that smoothly re-scale the layout for detailed exploration. Built with D3 v5, the code uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to render SVG paths, while `transition.attrTween` animates arc geometry and label rotations over 750ms. Colors are assigned via `d3.scaleOrdinal` with an interpolated rainbow palette, and node tooltips show ancestor paths and formatted values.

Oct 11, 2022

Loading thumbnail…

Fork of Religions of Largest 20 Countries

This stacked bar chart visualizes the estimated 2010 religious breakdown of the world’s 20 most populous countries, with each bar segment colored by religion. Hovering over a bar reveals a tooltip with exact population figures, while hovering over the legend highlights that religion’s segments across all bars. Built with D3.js, the visualization uses `d3.layout.stack` for stacking, `d3.legend.color` for the interactive legend, and `d3.tip` for tooltips. Data comes from the Pew Research Center’s Global Religious Landscape report.

Oct 11, 2022