ayonghosh2003

@ayonghosh2003·4 public vizzes

Fork of SPAC_ Interactive Color Legend

A React and D3.js scatter plot visualizes SPAC performance, plotting current price against annualized return for each company. Circles are sized by market cap and colored by sector through an ordinal color scale. Users can hover over the interactive color legend to highlight points from a specific sector while dimming the rest. Data comes from a CSV file loaded via `d3.csv`, with all marks rendered as SVG circles.

Jun 7, 2021

Loading thumbnail…

Fork of Customizing Axes try

This visualization displays Derrick Rose's scoring average over time as a gold area chart with red strokes, showing his career points per year. The chart uses a time-based x-axis and linear y-axis, with custom axis labels, grid lines, and a title. The code imports specific D3 v5 modules including `scaleTime`, `scaleLinear`, `area`, and `curveBasis`, and loads data from a CSV file using `csv`. Interactive features include custom tick spacing and rotated axis labels.

Jun 4, 2021

Loading thumbnail…

Fork of Let's make a map with D3.js!

This example displays a global map with countries filled in light green, using a natural Earth projection against a blue spherical backdrop. The map is built with D3.js v5 and the `d3.geoPath` and `d3.geoNaturalEarth1` APIs, with country boundaries rendered as SVG paths. The visualization also includes an interactive zoom feature that applies a transform to the SVG group via `d3.zoom()`. The data is sourced from the world-atlas package’s 110m GeoJSON file, converted to features with TopoJSON’s `feature` function.

Jun 3, 2021

Loading thumbnail…

lets try a bat chart

This visualization presents the top 10 most populous countries as oversized bat symbols rendered in a React component, with each bat’s size proportional to population data from the United Nations World Population Prospects 2019. The chart deliberately omits axes; instead, it uses d3.csv to load the data and d3.scaleLinear to map populations to bat dimensions. The bats are drawn using SVG paths created by d3.symbol and d3.path, and the layout is managed through React’s state and props, with each bat positioned using d3.layout.forceSimulation for a staggered, organic arrangement.

May 31, 2021