vans01

@vans01·12 public vizzes

Fork of Scoter Plot

This visualization displays the Iris dataset as a scatterplot of sepal length against sepal width, with each flower represented by a teal circle. Hovering over a circle reveals its exact value via a native SVG `<title>` tooltip. The chart is built with React and D3 v6, using `d3.scaleLinear` for axes, custom React components for the axes and scatterplot marks, and `d3.csv` to load the data from a GitHub gist. Axis labels and ticks follow a consistent styling with the RocknRoll One font.

Apr 12, 2021

Loading thumbnail…

Let's make a map with D3.js!

This example renders a world map using D3.js and TopoJSON, displaying country boundaries as SVG paths filled with steel blue. The map uses a Mercator projection via `d3.geoMercator` and `d3.geoPath` to convert geographic coordinates into screen paths. It loads world-atlas data from unpkg, extracting country features with `topojson.feature`. The React framework is not actively used in the visible code; instead, the script directly appends paths to an SVG element.

May 18, 2020

Loading thumbnail…

Cheap Tricks for Interaction On a D3.js World Map!

This example displays an interactive world map using SVG paths generated from TopoJSON data. The visualization uses d3.geoMercator, d3.geoPath, and the `topojson` feature function to render country boundaries with a steelblue fill and black strokes. Hovering over a country triggers a CSS `:hover` rule that changes the fill to red, and d3.zoom enables pan and zoom interactions that transform the map group. Country name tooltips are added via the `title` child element, using data from a TSV file.

May 11, 2020

Loading thumbnail…

Cheap Tricks for Interaction On a D3.js World Map!

This example shows a zoomable world map built with React and D3 v5, where hovering over a country highlights it in red and displays its name as a tooltip. The map renders SVG paths using `d3.geoPath` and a Mercator projection, with geographic data loaded from the world-atlas TopoJSON and country names matched via TSV. Interaction includes a `d3.zoom` handler that transforms a group element containing all country paths, and CSS `:hover` rules change fill color. The code demonstrates combining TopoJSON feature extraction, data joins, and simple event-driven styling.

May 11, 2020

Loading thumbnail…

Cheap Tricks for Interaction On a D3.js World Map!

This example shows a React-based world map visualization where hovering over a country highlights it in red. The map is rendered as SVG using D3’s geographic projection and TopoJSON for country boundaries. The code also includes a scatter plot of fertility rates against cluster categories, built with d3.scaleBand and d3.scaleLinear, though the map interaction remains the primary focus. Data comes from a CSV file, and the interaction relies on CSS hover states rather than D3 event handlers.

Apr 22, 2020

Loading thumbnail…

Stylized Bar Chart

This example displays the ten most populous countries as horizontally oriented bars, ranked by population with a color-coded teal fill and hover tooltips showing formatted values. It loads population data from the United Nations World Population Prospects 2019 dataset, processing it via d3.csv and sorting to the top ten entries. The visualization uses React components for rendering SVG elements, with d3.scaleBand for categorical y-axis positioning and d3.scaleLinear for the continuous x-axis, along with custom axis components and d3.format for axis tick labels.

Apr 21, 2020

Loading thumbnail…

Interactive pie and bar

This interactive dashboard combines a pie chart and a bar chart to explore COVID-19 case frequency data across Beijing districts by date range. Hovering over a bar updates the pie chart to show the district breakdown for that period, with smooth transitions between updates. Built with React and d3.v3, the example uses d3.svg.arc, d3.layout.pie, and d3.scale.ordinal to render SVG elements with mouseover-driven interactivity. The legend and pie chart adapt their data and colors dynamically, while the histogram bars respond with animated height changes via transition.attr.

Apr 21, 2020

Loading thumbnail…

汇总

This interactive dashboard visualizes CDC ILINet flu surveillance data across four coordinated panels: a line chart showing weekly patient visit percentages by year, a choropleth map of state-level averages, a bar chart ranking top states, and a line chart tracking those states' trends. Built with React and D3 v5, the visualization uses `d3.scaleBand`, `d3.scaleLinear`, `d3.geoAlbersUsa` with `d3.geoPath`, and `d3.line` with `curveCardinal` for smooth paths. User interactions like hovering and clicking filter and highlight linked selections across all panels.

Apr 21, 2020

Loading thumbnail…

Interactive pie and bar

This example shows an interactive dashboard combining a bar chart with a pie chart. Hovering over a bar filters the pie chart to display the frequency distribution for that state, while moving the mouse away resets it to the overall totals. The bar chart uses an ordinal scale for x-axis positioning and a linear scale for y-axis heights, with transitions animating both bar heights and colors. The pie chart is built using D3’s arc generator and updates its data on hover events. The data comes from a JSON file with per-state frequency values.

Apr 21, 2020

Loading thumbnail…

Interactive pie and bar

This interactive dashboard combines a bar chart and a pie chart to explore categorical data across different regions. Hovering over a bar filters the pie chart and legend to show the breakdown of sub-categories for that region. The visualization uses D3.js (v3) to render SVG elements with animated transitions, and is built within a React framework. The bar chart displays frequencies for each region, while the pie chart and legend update dynamically to reflect the selected region's distribution, using mouseover and mouseout events to trigger the updates.

Apr 21, 2020

Loading thumbnail…

COVID19 Cases TOP 10 countries-March 19

A horizontal bar chart displays the top 10 countries by confirmed COVID-19 cases on March 19, with China and Italy leading. The visualization loads data from a CSV file using `d3.csv`, then renders SVG rectangles scaled by a linear x-axis and a categorical y-axis. It uses `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` from D3 v5, with a clickable "Hello" button in the HTML. Axis lines and ticks are removed, and bars are colored grey via CSS.

Apr 3, 2020

Loading thumbnail…

Melting Data for Multiple Lines

This example visualizes COVID-19 confirmed cases across several countries using multiple animated line charts. The visualization uses D3.js v5 with SVG rendering to display data from CSV files, showing how cases grow over days since the outbreak began. The implementation employs D3 scales for linear and time axes, the `nest()` function to group data by country, and `line()` with `curveBasis` to generate smooth paths. A color legend and animated transitions update the lines dynamically, while a custom `yValue` function adds random variance to China’s data for demonstration purposes.

Apr 3, 2020