Taustus

@Taustus·4 public vizzes

Accidents on the Road - Choropleth

A choropleth map of Russia colors each federal region according to the rate of car accidents per capita, using a threshold scale with ranges like low, medium, and high. Hovering over a region highlights it and reveals a tooltip with the region’s name and value. The visualization also labels major cities with circles. Built with D3 v3, it uses `d3.geo.path`, `d3.geo.albers`, and TopoJSON for map rendering, while reading data from CSV and TSV files.

Sep 21, 2020

Loading thumbnail…

Accidents on the Road - Choropleth

This choropleth visualizes road accident data as a map of regions, colored by the number of incidents. The map shows geographic patterns of accident frequency, with darker shading indicating higher counts. Built with React and D3 v5, it uses `d3.csvParse` to load the input data and `topojson` to render the geographic boundaries. The `d3.geoPath` generator draws the region shapes, while a color scale encodes the accident values. A legend and tooltip provide context, with the tooltip appearing on hover to display the region’s specific accident count. The rendering uses SVG paths with styling defined in CSS.

Sep 2, 2020

Loading thumbnail…

Accidents on the Road - Choropleth

This choropleth maps road accident deaths across Russian regions, using a threshold color scale from light green to dark red, and includes interactivity where hovering highlights a region and displays its name and fatality count on a tooltip. It also plots major cities as points and includes a vertical legend. Built with D3.js v3, it uses the `d3.geo.albers` projection and `d3.geo.path` to render the map geometries from TopoJSON, while `d3.csv` and `d3.tsv` load the accident and city data, and SVG shapes, transitions, and the `d3.select` API handle the visualization and mouseover effects.

Aug 27, 2020

Loading thumbnail…

HTML Starter

This visualization demonstrates multi-axis line charts with interactive selection and tooltips, allowing users to compare multiple data series across weeks. The chart renders a per-rectangle interaction area that highlights all chart lines associated with a given week on hover, displaying a tooltip with each series name and value. The code uses D3.js v5 with SVG’s `select`, `attr`, and `style` APIs to build the chart, and custom selection rectangles trigger mouseover and mouseout events to control tooltip visibility. The data is loaded from a CSV file containing numerical values for nine columns (A–I). Animation is present in the rendering of the chart layout.

Aug 19, 2020