8

8Tigers2020

@8Tigers2020·20 public vizzes

Loading thumbnail…

NE Consumption

This visualization displays the total dead and missing migrants for each month in a date histogram. The chart aggregates data from the Missing Migrants Dataset, with the y-axis showing monthly sums of energy consumption in kilowatt-hours across the NorthEast sector. Built with React and D3 v5, the visualization uses `d3.bin` and `d3.sum` to group and aggregate the data, with axes and bars rendered as SVG elements. Interactive dropdown menus filter the x-axis by Region, Urban Status, Housing Type, Year Built, or Household Income.

Loading thumbnail…

NE EJ Consumption

This interactive bar chart visualizes Gunz N' Roses consumption from January 1 to 7, 2020, showing daily values for both "gunz" and "roses" items. The visualization uses D3 v5 with SVG rendering and animation, featuring draggable bar handles that allow users to modify data values in real-time. Each colored bar represents an item category, with tooltips and value labels appearing on hover and drag interactions. The chart employs d3.scaleBand for x-axis positioning, d3.scaleLinear for the y-axis, and includes a color legend for item identification, with data sourced from GunzNRosesData.json.

Loading thumbnail…

Fork of Fork of Fork of Geospatial Map of Top 10 Oil Producers in 2020

This example displays a geospatial bubble map of the top 10 oil-producing countries in 2020, with circle size scaled to each nation’s daily oil output in million barrels. The visualization renders world landmasses and graticules using d3.geoNaturalEarth1 and d3.geoPath, while React manages component state and data filtering. Circles are positioned via a d3.scaleSqrt and projected coordinates from CSV data. The map uses TopoJSON world-atlas data and SVG rendering, with the underlying dataset sourced from the U.S. Energy Information Administration via an IG trading-strategies article.

Loading thumbnail…

Final Geospatial Map of Top 10 Oil Producers in 2020

This geospatial map displays the top 10 oil-producing countries in 2020, with bubble size scaled to each nation’s output in million barrels per day. The visualization uses a Natural Earth projection via `geoNaturalEarth1` and renders land, graticules, and sphere paths with `geoPath` and SVG circles. Country positions are projected from latitude/longitude coordinates, while bubble radii are determined by a square-root scale (`scaleSqrt`). The underlying data, sourced from the Energy Information Administration, is loaded using `d3.csv`, and the world atlas geometry is fetched from `world-atlas` and processed with `topojson`’s `feature` and `mesh` functions.

Loading thumbnail…

Fork of Geospatial Map of Top 10 Oil Producers in 2020

This geospatial scatter plot maps the top 10 oil-producing countries in 2020, using a natural Earth projection and semi-transparent circles sized by 2019 production values. It layers country landmasses, graticules, and ocean backgrounds via `d3.geoPath` and `d3.geoNaturalEarth1`, with circle radii scaled through `d3.scaleSqrt`. The React component imports map data from the world-atlas TopoJSON and country statistics from a CSV hosted on GitHub. The visualization supports interactive filtering through a brush extent, although the current filter logic is incomplete.

Loading thumbnail…

Fork of Fork of Geospatial Map of Top 10 Oil Producers in 2020

This example displays a geospatial bubble map of the world’s top 10 oil-producing countries in 2020, with circle size scaled to each nation’s daily production in million barrels. The visualization uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to render landmasses, graticules, and country borders from TopoJSON data. Bubble radii are computed with `d3.scaleSqrt`, and the data is loaded from a CSV file containing country coordinates and production figures. The project is built with React and renders SVG elements, with styling applied through CSS classes for the map’s sphere, land, and interior boundaries.

Loading thumbnail…

Fork of Pantheon - Tracking Cultural Output Through The Ages

This interactive visualization combines a bubble map and a date histogram to explore cultural output through the ages using the Pantheon dataset of historically notable individuals. The map projects each person's birth location using d3.geoNaturalEarth1 and d3.geoPath, with circle radii scaled by their Historical Popularity Index via d3.scaleSqrt. A linked d3.brushX timeline below filters the map by birthdate, updating the displayed bubbles dynamically. The visualization uses React hooks, d3.csv for data loading, and topojson for world atlas geometry.

Loading thumbnail…

Renew of CO2 Reduction Graph

This example visualizes projected carbon emission reductions based on renewable energy prices, comparing CO2 emissions (in billion metric tons) against fossil fuel electricity generation (in trillion kilowatt-hours) over time. The chart uses two separate line series rendered with d3.line and curveNatural, with React components for axes (AxisBottom, AxisSide) and data loading via useEffect and csv. The visualization displays both metrics on a shared time scale, sourced from the US Energy Information Administration, with the chart rendered as SVG in a React application.

Loading thumbnail…

Fork of Chart: CO2 Reductions based on Renewable Energy Pricing

This chart visualizes projected CO2 emission reductions alongside fossil fuel electricity generation, plotting both datasets over time according to renewable energy pricing plans. Using D3 v6, it renders two series as scatter plots with distinct colored circles, employing scaleTime and scaleLinear for axes and d3.line with curve interpolation for data trends. The visualization leverages axisRight and axisLeft for dual y-axes, transitions for circle growth, and sources data from the US Energy Information Administration.

Loading thumbnail…

Fork of Fork of styling dropdown and working...Fork 999 of Stylized Bar Chart

This bar chart displays the 10 most populous countries with selectable yearly population data. A dropdown menu lets viewers switch between years from 2008 to 2019, updating the bar heights accordingly. The chart renders SVG elements using React components, with D3 v5 utilities like `scaleBand` and `scaleLinear` handling the axes and scales. Data comes from the UN World Population Prospects 2019 dataset, loaded via `d3.csv`, with tooltips showing formatted population values.

Loading thumbnail…

Geospatial Map of Top 10 Oil Producers in 2020

This geospatial visualization maps the top 10 oil-producing countries in 2020, with each country represented by a semi-transparent circle sized according to its production data. The map connects to a companion chart on CO2 emissions to explore the relationship between oil production and renewable energy transitions. Built with React and D3 v5, it uses `d3.geoPath` with a Mercator projection to render world landmasses and country boundaries from TopoJSON data. The country locations and production values come from a CSV file hosted on GitHub, sourced from EIA data via IG.

Loading thumbnail…

Chart: CO2 Reductions based on Renewable Energy Pricing

This interactive scatter plot visualizes projected CO2 emission reductions alongside fossil fuel electricity generation from 2010 onward, using data from the US Energy Information Administration. Two datasets are plotted against time, with steel-blue circles for fossil fuel electricity and gray circles for CO2 emissions. The chart uses dual y-axes to display both metrics, with D3 v6 handling the SVG rendering and animations. It builds on a reusable scatter plot pattern, employing D3's selection.join, scaleTime, and axis components to create the time-based visualization.

Loading thumbnail…

CO2 Chart: Multiple Bars

This chart displays projected CO2 emissions in billion metric tons by sector from 2020 to 2030, using grouped bars for each year. It employs D3 v5 with `scaleBand` for both year and sector categories, `scaleLinear` for values, and `scaleOrdinal` for color mapping. The data originates from the US Energy Information Administration via a GitHub Gist, rendered as SVG with axes, a title, and a legend.

Loading thumbnail…

Fork of Geospatial Map of Top 10 Oil Producers in 2020

This example displays a geospatial bubble map of the top 10 oil producers in 2020, with circle size encoding each country’s hydrocarbon production index (hpi). It uses a React-based D3 v5 workflow, combining `geoNaturalEarth1`, `geoPath`, and `geoGraticule` to render world landmasses, interiors, and graticules in SVG. The bubbles are sized with `scaleSqrt` and global data comes from a CSV, while the world atlas is loaded via TopoJSON. The map serves as a companion to a renewable energy transition analysis.

Loading thumbnail…

US CO2 Emmisions by sector in 2018

This visualization shows US CO2 emissions by sector from 2018, using a line chart where each sector’s annual emissions trace a colored line over time. The chart is built with the vega-lite-api, which wraps Vega-Lite and Vega, and loads data from a GitHub Gist via d3.csv. The code configures axis and label styling through a custom config object, and the lines are rendered with an opacity of 0.8 and a size of 5. The data source is the US Energy Information Administration.

Loading thumbnail…

Tweak of React for Smile faces

A smiling face rendered in SVG using React components and d3’s `arc` function for the mouth. The face includes a grey blurred shadow via SVG filters, yellow circle head, black stroke, eyes, and orange elliptical freckles, all positioned with fixed constants. The React `App` component returns the SVG markup, and ReactDOM renders it into the root element. The code uses d3.v7 for the mouth arc and React 17 for component-based SVG construction.

Loading thumbnail…

React for Smile faces

This example shows a smiling face built with React and rendered as SVG, combining D3’s arc generator for the mouth with React elements for the eyes and head. The face is centered within a 300×250 viewport, featuring a yellow circle with a black stroke, two small dark eyes, and a D3-generated mouth arc. The code uses `d3.arc()` to create the mouth path, while React’s `ReactDOM.render` mounts the component into the DOM. A dashed CSS oval is also defined but not used in the final output.

Loading thumbnail…

IS Problem 6

This example displays a static SVG composition of three overlapping circles in orange, transparent, and blue, with three black lines and three small black dots marking intersection points. The visualization manually positions the circles and lines using fixed coordinates, with CSS classes styling the shapes and controlling fill opacity. It demonstrates basic layering and selective styling in React without dynamic data or interaction.

Loading thumbnail…

IS Problem 5

This example displays a yellow, black-outlined circle with two smaller circles positioned as eyes, rendered entirely as inline SVG elements inside a static HTML page. It uses raw SVG markup rather than a JavaScript visualization library, with nested `<svg>` elements to layer a smaller circle partially overlapping the main one. The code defines all shapes declaratively in the browser, with no interactive behavior or data loading, purely demonstrating basic SVG structure and styling through fill and stroke attributes.

Loading thumbnail…

IS Problem 3

This example presents a simple interactive invitation graphic for the Andover Summer Session website. It shows a single blue circle labeled "VISIT" centered in a small SVG canvas, with a title and subtitle prompting users to click for more information. The visualization uses React and renders via SVG, with basic CSS styling for the circle’s fill and stroke, and text properties for the label and headings. No JavaScript libraries or animation frameworks are employed beyond standard HTML and CSS.