Homework1

100%

✓ Published0🌍 Public

Last edited Nov 6, 2019

Created on Oct 29, 2019

This visualization presents the 2018 funding distribution of China’s National Natural Science Foundation general projects, with views examining applicant age, academic degree, professional duty, and institution type. The age heatmap uses Vega-Lite’s `vl.markRect()` to render a grid of rectangles colored by applicant count, while the stacked bar charts are built with D3 v3’s `d3.layout.stack()` and `d3.legend.color()`, featuring hover tooltips via `d3-tip`. Data is loaded from CSV files, and SVG renders all elements interactively.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Tab.1(3)-Amount of general project funding in 2018 (by nature of institutions)

This stacked bar chart displays the amount of general project funding in 2018, broken down by academic discipline and the nature of hosting institutions (schools, research institutes, and others). The y-axis lists the disciplines, while horizontal bars are segmented by institutional category and scaled by revenue in millions of RMB. The visualization uses D3.js with `d3.layout.stack` for the stacked segments, `d3.svg.axis` for axes, and a `d3.legend.color` legend. Hovering over a legend entry highlights that category in the foreground, and hovering over a bar segment reveals a tooltip via `d3-tip`. The underlying data is sourced from a CSV file with columns for departments, category, and revenue.

LLichenYang

75% match

Loading thumbnail…

Tab.1(3)-Amount of general project funding in 2018 (by nature of institutions)

This stacked bar chart displays the amount of general project funding in 2018, broken down by nature of institution. The visualization uses a horizontal stacked bar layout, with each bar representing a department and color-coded segments for each category. Built with Vue and D3.js, it employs `d3.layout.stack` and `d3.scale.ordinal` to manage the stacked bars and axes. Interactive hover effects, powered by `d3-tip`, display detailed tooltips with revenue figures. A color legend allows users to filter and highlight specific categories by fading out non-selected bars.

Pprincit

72% match

Loading thumbnail…

Tab.1(3)- Items of general project funding in 2018 (by nature of institutions)

This stacked bar chart visualizes 2018 general project funding items by scientific discipline, broken down by institution type (schools, research institutes, and others). It uses D3.js version 3.5.5 with stacked layout, ordinal and linear scales, and d3-tip for hover tooltips. A color legend highlights specific categories, dimming non-selected bars via an overlay rectangle. Data comes from an embedded CSV file, and the SVG renders with animated transitions for interactivity.

LLichenYang

72% match

Loading thumbnail…

Tab.1(3)- Items of general project funding in 2018 (by nature of institutions)

This visualization shows 2018 general project funding items across scientific departments, broken down by institution type (schools, research institutes, and others). A stacked bar chart presents the data, with hover interactions on the legend highlighting specific categories and tooltips revealing exact item counts per department. The code uses D3.js v3, including `d3.layout.stack()` for stacking, `d3.svg.axis()` for scales, and `d3.legend.color()` for the interactive legend. Transitions and a semi-transparent overlay fade non-hovered bars. SVG renders all elements, with animation triggered by legend hover states.

AAlex Ley

71% match

Loading thumbnail…

Tab.1(3)- Items of general project funding in 2018 (by nature of institutions)

This interactive stacked bar chart displays 2018 general project funding items categorized by institution nature, using D3.js to render SVG with animation. The visualization uses d3.layout.stack to stack segments by color, with hover tooltips via d3-tip showing segment counts. A color legend with d3-legend allows highlighting specific categories by fading other bars through semi-transparent overlays. Data comes from an embedded CSV file, processed through d3.nest to group by segment layers.

Pprincit

71% match

Loading thumbnail…

Tab.1(3)- Items of general project funding in 2018 (by nature of institutions)

This interactive stacked bar chart visualizes 2018 general project funding items by institution nature, using D3.js (v3) with SVG rendering and animation. It forks Curran Kelleher’s stacked bar example, employing `d3.layout.stack`, ordinal and linear scales, and `d3.legend.color` for the categorical color legend. Hovering over legend entries highlights corresponding layers via a foreground bar layer and a semi-transparent overlay, while `d3-tip` displays tooltips with funding amounts. The y-axis uses a custom SI formatter replacing “G” with “B” for billions.

Pprincit

71% match

Loading thumbnail…

Tab.1(4)-Financing of general projects in 2018 (by person in charge)

A horizontally stacked bar chart visualizes 2018 financing for general projects, segmented by person in charge and department. The chart displays counts of personnel across categories like professor and lecturer, with color encoding for each duty role. It uses the D3.js library version 3.5.5, including `d3.layout.stack` for stacking and `d3.legend.color` for the interactive color legend. Hovering over legend items highlights the corresponding bar subset, and a tooltip reveals exact values. Data is loaded from `person1(4).csv`.

LLichenYang

71% match

Loading thumbnail…

Tab.1(3)- Items of general project funding in 2018 (by nature of institutions)

This visualization displays stacked bar charts of general project funding items in 2018, categorized by academic department and institution type (schools, research institutes, others). The bars show total items per department, segmented by institution type using color-encoded layers. Hovering over legend entries highlights specific institution types while dimming others, and tooltips reveal exact values. The visualization is built with D3.js, using d3.layout.stack for stacking, d3.scale.ordinal for the categorical y-axis, and d3.legend for the interactive color legend. The data comes from items1(3).csv, and the rendering uses SVG with hover-based animations.

Nnifemi-sys

71% match