sayanighosal34

@sayanighosal34·6 public vizzes

Choropleth Map of County Data

This choropleth map displays poverty rates across U.S. counties, with each county filled using a green sequential color scale from d3.scaleThreshold and d3.schemeGreens[5]. The visualization loads county boundaries from a TopoJSON file and joins them with CSV poverty data via d3.map, rendering the geographic features as SVG paths using d3.geoPath. A legend with a linear scale and axisBottom shows the poverty percentage range, while state borders are drawn as white strokes using topojson.mesh. Tooltips provide exact poverty percentages on hover.

Nov 23, 2020

Loading thumbnail…

Fatal Police Shootings In the U.S. Since 2015

This visualization maps fatal police shootings in the U.S. since 2015, using a dropdown menu to colorize incidents by attributes such as race, gender, threat level, or mental illness. A GeoAlbersUsa projection renders state boundaries via d3.geoPath, while d3.scaleOrdinal assigns colors to data points. Hovering over the legend filters and highlights matching incidents, and a linked bar chart shows counts per category using d3.scaleBand and d3.scaleLinear. Data comes from the Washington Post’s Fatal Police Shootings database, parsed with d3.csv.

Nov 22, 2020

Loading thumbnail…

US police shootings by categories

A map of the United States displays police shooting incidents as colored dots, with each dot's color representing a category selected from a dropdown menu such as race, gender, or threat level. The visualization uses React to manage the interactive state, D3's `geoAlbersUsa` projection and `geoPath` to render the geographic boundaries, and `scaleOrdinal` for the categorical color scale. A custom color legend allows users to hover over categories to highlight corresponding data points. The data is loaded from a CSV file, while the map outlines come from a TopoJSON US atlas.

Nov 22, 2020

Loading thumbnail…

STACKBAR Group Colours

This stacked bar chart displays animal categories across groups, with bars segmented into four value columns (A–D) and shaded by group membership (Domestic, Pest, Africa, Marine). Built with D3 v5 and rendered as SVG, it uses `d3.stack()` to generate the stacked series and `d3.scaleOrdinal()` with custom color ranges to differentiate segments. The data comes from `data.csv`, loaded via `d3.csv()` with `d3.autoType`, and each bar’s total is computed dynamically from the column values. The chart’s differential shading highlights how group colors map across categorical divisions.

Nov 22, 2020

Loading thumbnail…

HTML Starter

This example shows a minimal HTML page that displays the text “Hello HTML” in large, centered type, while also logging “Hello JavaScript!” to the browser’s console. It demonstrates the basic structure of an HTML document using a `<style>` block for CSS layout and a `<script>` tag for JavaScript execution. The rendering relies solely on standard web platform APIs—the CSS `text-align` and `font-size` properties style the body, and the `console.log` method outputs to the developer tools. No external libraries or data sources are involved.

Nov 21, 2020

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries, sourced from the United Nations World Population Prospects 2019 dataset. It uses D3.js scaleBand and scaleLinear for categorical and linear scaling, with React for rendering SVG elements. The chart shows horizontal bars, with y-axis country labels and x-axis population values formatted via D3's format function, replacing 'G' with 'B' for billions. Custom styling includes Poppins font and a teal color, with tooltips showing formatted population values on hover.

Nov 21, 2020