richad97

@richad97·13 public vizzes

Let's make a map with D3.js!

This example displays a world map rendered as blue SVG paths with white borders, highlighting each country in red on hover. It demonstrates a basic geographic visualization workflow using D3.js, loading country boundaries from the world-atlas TopoJSON dataset and converting them with `d3.geoMercator` projection and `d3.geoPath`. The code uses `topojson.feature` to extract GeoJSON from the TopoJSON file and appends the resulting paths to an SVG canvas, with hover styling handled by CSS.

Apr 25, 2020

Loading thumbnail…

Responsive Axes

This example demonstrates how axes and their tick density respond automatically to the size of the browser window. The chart plots a time series of COVID-19 population data from a CSV file, scaling the x-axis time domain and y-axis linear domain across the full viewport. Written with D3 v5, it uses the `d3.axisBottom` and `d3.axisLeft` APIs to generate ticks, whose spacing adjusts based on the current inner width and height. A `resize` event listener triggers re-rendering, updating the SVG dimensions and axis scales whenever the viewport changes.

Apr 11, 2020

Loading thumbnail…

HTML Starter

This example shows a minimal HTML page displaying a single button labeled “hello” at a large font size. The page imports Bootstrap 4 CSS for styling and uses a border class to outline the button, while custom inline CSS centers the content. The rendering approach is straightforward static HTML without any JavaScript interactions or data visualization, serving as a bare-bones starter template for web development projects.

Apr 10, 2020

Loading thumbnail…

HTML Starter

This example renders two static gray squares on a blank HTML page, demonstrating the minimal setup required for a web-based visualization. The code uses plain HTML and CSS, with no external libraries or data sources. It includes two identical 50-pixel squares, styled with the `background-color` property, and centers the body text at a large font size. The example serves as a bare bones starting point for building more complex visualizations in a browser, highlighting the foundational structure of an HTML document and its embedded style rules.

Apr 10, 2020

Loading thumbnail…

ric bitch

This example loads COVID-19 case data from a CSV file and parses the date and population columns into JavaScript Date and number objects, logging the first row to the console. The page fixes the body to fill the viewport, includes D3 v5 via a CDN script tag, and defines a time format parser that is currently unused in the visible rendering logic. The visualization appears incomplete, as the index.js file only processes the data and logs it without creating any charts or graphical output.

Apr 10, 2020

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays weekly total deaths in a specific location, comparing the current year’s figures against a five-year average, with the current year highlighted in red and the average shown as a dashed steel-blue line. The x-axis is a time scale parsing dates from the CSV, while the y-axis is linear. Built with D3 v5, the visualization uses `d3.scaleTime`, `d3.line`, `d3.extent`, and `d3.axisBottom`/`d3.axisLeft` to render the SVG paths and axes. The data originates from a CSV file with historical mortality records.

Apr 6, 2020

Loading thumbnail…

Responsive Axes

A responsive SVG chart demonstrates how D3.js v5 axes and labels adapt to window resizing. The visualization renders a rounded rectangle background with labeled X and Y axes, both using linear scales from 0 to 1. The `d3.axisBottom` and `d3.axisLeft` generators create ticks whose density adjusts based on the available inner width and height, with tick positioning recalculated on every resize event via a window listener, applying the `marginConvention` helper for layout.

Apr 6, 2020

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature and humidity data from cities worldwide, sourced from Data Canvas - Sense Your City. The chart uses multiple colored lines for each city, with a color legend indicating which line corresponds to which location, and includes time and temperature axes. The visualization is rendered as an SVG using D3 v5, employing scales such as d3.scaleTime and d3.scaleLinear, along with d3.line, d3.curveBasis, d3.nest, and d3.scaleOrdinal to structure and draw the paths.

Apr 5, 2020

Loading thumbnail…

Customizing Axes

This bar chart shows the populations of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. It demonstrates how to customize D3 axes, with a horizontal linear scale for population and a vertical band scale for country names, formatted with tick labels that abbreviate large numbers and grid lines spanning the chart. The code uses `d3.csv` to load data, `d3.scaleLinear`, `d3.scaleBand`, `d3.axisBottom`, and `d3.axisLeft`, alongside SVG rendering. Styling is applied through CSS classes for ticks, labels, and the title.

Mar 23, 2020

Loading thumbnail…

Untitled

A stacked bar chart displays earthquake counts by magnitude range (7.0+, 6–6.9, 5–5.9) for six U.S. states across the years 2017 and 2018. A dropdown menu switches between years, triggering a 750ms transition that updates bar heights, axis scales, and total labels. The visualization uses D3 v5 with `d3.stack`, `d3.scaleBand`, `d3.scaleLinear`, and ordinal color mapping, rendering SVG elements with animated transitions. Data is loaded from a CSV file via `d3.csv`.

Mar 21, 2020

Loading thumbnail…

Untitled

This visualization displays the market share of five major web browsers from 2008 to 2017 as multiple colored lines on a single time-series chart. The graph shows Chrome’s rapid rise and Firefox’s decline, along with the stable trends of Safari and Opera. Using D3 v4 within a React framework, the code loads CSV data with `d3.csv`, parses dates with `d3.timeParse`, and renders SVG paths via `d3.line` with `d3.curveMonotoneX`. Axes are generated using `d3.axisBottom` and `d3.axisLeft`, with a categorical color scale from `d3.scaleOrdinal`.

Mar 21, 2020

Loading thumbnail…

Melting Data for Multiple Lines

This visualization shows population over time by region, with multiple smoothed lines drawn from 1950 to 2100 using a basis curve. The code melts wide-format UN population data into tidy rows via a custom `melt` function, then uses `d3.nest()` to group by region and `d3.scaleOrdinal` with `schemeCategory10` for colors. A color legend, axis labels, and gridlines are rendered in SVG. Data merges two CSV sources for estimates and medium-variant projections.

Mar 21, 2020

Loading thumbnail…

Untitled

This visualization displays two time series lines from a CSV file, showing the "close" and "open" values of a data column over dates in April and May 2012. The chart uses a time-scaled x-axis and a linear y-axis, with the blue line representing the "close" values and the red line representing the "open" values. Built with D3.js v4 in a React framework, it renders as an SVG, parsing dates via `d3.timeParse` and drawing paths using `d3.line` with axes generated by `d3.axisBottom` and `d3.axisLeft`.

Mar 19, 2020