ST-commits

@ST-commits·4 public vizzes

HTML Starter

This visualization generates 50 random data points and renders them as circles in a scatterplot using SVG. It demonstrates a minimal HTML setup with D3 v6 and React, showing how to create axes, scales, and dynamic circle sizing based on data values. The code uses d3-scaleLinear, d3-scaleSqrt, d3.axisBottom, and d3.axisLeft to map random coordinates and apply a square-root scale for circle radii. Styling is applied through a separate CSS file, and the example serves as a starting template for more complex visualizations.

Sep 11, 2020

Loading thumbnail…

Let's make a BarChart 2

This example displays a time-series bar chart of daily COVID-19 case counts from August to September 2020. The bars are animated into view, and hovering over a bar changes its opacity and reveals a tooltip. The visualization uses D3 v6 to parse the CSV data, map dates to the x-axis via `d3.scaleTime` and case numbers to the y-axis with `d3.scaleLinear`, and render the bars as SVG rectangles. The axes are generated using `d3.axisLeft` and `d3.axisBottom`, while mouse interactions rely on D3’s selection and transition APIs.

Sep 11, 2020

Loading thumbnail…

Hello D3 Version 6

This example demonstrates how to create a basic bar chart from an array of numeric values using D3 version 6. The chart renders vertical bars as colored div elements appended to the document body, with each bar’s height proportional to its corresponding data point. The code uses the d3.select, data, enter, append, and style methods to bind the dataset to new div elements and set their heights dynamically. The dataset is a plain JavaScript array of 20 numbers, and the rendering relies on the DOM rather than SVG or canvas.

Sep 11, 2020

Loading thumbnail…

Let's make a BarChart

This horizontal bar chart displays the populations of ten countries, ordered by country name, with each bar’s length proportional to population in thousands. The visualization uses D3 v6’s `scaleLinear` for the x-axis, `scaleBand` for the y-axis categories, and renders via SVG within an HTML page. Data is loaded from a CSV file using D3’s `csv` function, and axes are generated with `axisLeft` and `axisBottom`. All bars are styled in a uniform steelblue color.

Sep 10, 2020