amanoakane

@amanoakane·8 public vizzes

Fork of Interactive Color Legend

This interactive scatter plot visualizes COVID-19 total cases over time for nine countries, with each country represented by a distinct color. Hovering over a legend item highlights that country’s data points while fading all others. The visualization is built with React and D3 v5, using `scaleTime`, `scaleLinear`, and `scaleOrdinal` for axes and color mapping. The data comes from the JHU COVID-19 dataset loaded via `d3.csv`, rendered as SVG circles with hover-driven opacity changes through React state.

Jul 19, 2021

Loading thumbnail…

Fork of Stylized Line Chart

This fork of a stylized line chart displays COVID-19 biweekly case counts for the United States over time, using a smooth curved path rendered with d3.line and curveNatural. The chart is built with React functional components and d3.v5 scales, including scaleTime for the x-axis and scaleLinear for the y-axis, with axes generated by custom AxisBottom and AxisLeft components. Data is loaded asynchronously from a CSV URL using d3.csv within a useData hook. The visualization uses SVG rendering with a Poppins font and muted teal styling for the line and axes, but omits data point circles.

Jul 18, 2021

Loading thumbnail…

Fork of Stylized Bar Chart

This interactive bar chart displays the 15 countries with the highest total COVID-19 cases, using data from Our World in Data. The visualization uses React components with D3.js scales (scaleBand and scaleLinear) to render horizontal bars in SVG, with axes generated by custom AxisBottom and AxisLeft components. A tooltip showing formatted population values appears when hovering over each bar, and the chart includes a Population axis label with data formatted using D3’s `format` function.

Jul 17, 2021

Loading thumbnail…

Fork of Fork of Sized Points on a Map

This visualization displays global cumulative COVID-19 cases as semi-transparent red circles sized by total cases on a natural Earth projection. Country boundaries, graticules, and land masses are rendered using d3.geoNaturalEarth1, d3.geoPath, and TopoJSON data from World Atlas. City-level COVID data is loaded from Our World in Data and merged with country properties. React manages component state while d3.scaleSqrt maps case counts to circle radii, with d3.csv fetching tabular data and d3.json retrieving the TopoJSON topology.

Jul 17, 2021

Loading thumbnail…

Fork of Migrant Deaths Linked Views with Fast Brushing

This visualization combines a bubble map and a date histogram to explore migrant deaths. The map uses a natural Earth projection to display circles sized by the total dead and missing, while the histogram aggregates the same data by month. A brush on the histogram filters the map’s circles, using React’s `useMemo` for efficient updates. The implementation leverages D3 v5 APIs like `geoNaturalEarth1`, `scaleSqrt`, and `brushX`, with data from the Missing Migrants Project and country boundaries from World Atlas TopoJSON.

Jul 17, 2021

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This scatter plot displays the Iris dataset, with dropdown menus allowing users to select which attributes appear on the x and y axes. Built with React and D3 v5, it renders SVG circles for each data point, using `scaleLinear` and `extent` to compute scales. The `ReactDropdown` component updates the axis labels and values on selection.

Jul 16, 2021

Loading thumbnail…

Fork of Sized Points on a Map

This example displays a natural Earth projection world map with semi-transparent red circles sized by total COVID-19 cases for cities with populations above 50,000. The visualization uses React with D3 v5, leveraging `geoNaturalEarth1` and `geoPath` for map rendering, `scaleSqrt` for proportional circle sizing, and `topojson` for country boundaries. Country data is enriched with COVID statistics from a CSV file, while tooltips reveal exact case counts. The map includes graticules and country borders styled through CSS.

Jul 16, 2021

Loading thumbnail…

Fork of D3 map drag demo

This interactive orthographic globe displays country borders draped over a sphere, with the map rendered as SVG paths. Clicking a country logs its name to the console based on data from a world-atlas TSV file, while hovering highlights the country. A graticule and sphere provide context. Users can drag to rotate the globe, which dynamically redraws all paths using `d3.geoPath` and updates the projection, and a `d3.zoom` interaction applies transformations to the group.

Jul 16, 2021