eourm20

@eourm20·6 public vizzes

Radar chart

This radar chart compares seven temperature-prediction models across thirteen weather-related axes, such as temperature averages, humidity, wind, and sunlight. Each colored polygon represents a model, with categorical axes radiating from the center and level markers indicating relative values, all rendered with SVG. The code builds the chart using D3 v3 APIs like `d3.scale.category10` for colors, `d3.max` and `d3.format` for scaling and labeling, and selections with `.append` and `.attr` to draw polygons, lines, and text, while mouseover interactions are only partially implemented.

Jun 9, 2021

Loading thumbnail…

Fork of dv.35 - interactive color legend

This interactive scatter plot visualizes the Iris dataset, displaying sepal and petal measurements with points colored by species. Users can select which attributes appear on the x and y axes via React Dropdown menus or swap them with the AxisSwap button. Hovering over the color legend highlights circles of that species by reducing the opacity of others. The visualization uses React with D3 v6 scales (scaleLinear, scaleOrdinal), SVG rendering, and custom axis and legend components.

Jun 4, 2021

Loading thumbnail…

Fork of London Air

This scatter plot displays monthly London air quality measurements from January 2010 through August 2018, sourced from the Kings College London Air Quality Dataset. The visualization uses D3 v5 to render an SVG with animated transitions, where users can select pollutants via a dropdown menu and filter data points by clicking interactive legends for both month and monitoring site type. The color legend encodes months using an interpolateBuPu scale, while the stroke legend distinguishes Roadside versus Background measurements using scaleOrdinal.

Jun 4, 2021

Loading thumbnail…

Fork of IMPROVED Scatterplot using react and D3 with DropDown Menu

This interactive scatterplot visualizes asylum case wait times versus case entry dates, colored by decision code, with a dropdown menu filtering by year. Built with React and D3 v5, it uses scaleTime and scaleLinear axes, scaleOrdinal for color encoding, and React state to manage selections. The visualization reads CSV data from a GitHub gist, implements hover interactions via the ColorLegend component, and dynamically adjusts the x-axis tick format between years and months based on the selected filter.

Jun 4, 2021

Loading thumbnail…

Fork of Interactive Color Legend

This example visualizes the Iris dataset as a scatter plot, mapping petal length and sepal width on the axes while coloring points by species. A custom interactive color legend, built with React and D3.js scaleOrdinal, is placed to the right; hovering over a legend entry fades unrelated points and highlights only the selected species. The rendering uses SVG circles generated from D3.js scaleLinear scales, with axes drawn from D3’s tick formatter.

Jun 4, 2021

Loading thumbnail…

Dashboard

This dashboard presents a scatterplot comparing pairs of weather variables, such as temperature and humidity, from a dataset that includes daily records. Users select the x and y variables from dropdown menus to change the visualization. The chart is rendered as an SVG using D3 v5, with D3’s scale and axis components generating the grid and tick marks. The surrounding layout uses CSS to position header panels and the plot area.

Jun 4, 2021