Crystal Lee

@crystalwanyulee·9 public vizzes

Fork of D3 Starter

This example demonstrates the basic setup for starting a D3.js project, displaying a numeric label as oversized text centered in the browser. The page renders a large number with a corresponding Greek letter name, such as "beta," based on a conditional mapping function. The code imports the `select` function from D3 v7 and uses plain JavaScript logic to assign labels, with the visualization relying on CSS styling for text formatting. The example includes a video tutorial reference and uses the `d3.min.js` library loaded from unpkg.

Sep 2, 2022

Loading thumbnail…

Fork of D3 Starter

This example demonstrates the minimal setup required to render text with D3 version 7, displaying the message “Hello D3 version 7” centered on the page. The code uses the `select` function from the D3 module to target the `body` element and the `.text` method to inject the string. The HTML file imports D3 via a CDN script tag, while the JavaScript is bundled separately into `bundle.js`. Styling relies on inline CSS to enlarge the font size and center the content horizontally.

Aug 31, 2022

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a connected scatterplot showing how a numeric value changes over time, with a time-scaled X axis and linear Y axis. The visualization renders as an SVG using D3 v7, loading CSV data from a remote GitHub repository. The code uses `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.axisBottom`/`d3.axisLeft` to draw the line and circular points. It also uses `d3.timeParse` to format dates and `d3.csv` for asynchronous data loading.

Aug 25, 2022

Loading thumbnail…

Fork of D3 Starter

This example demonstrates the basic setup of a D3 visualization, rendering the text "Hello D3 version 7" on a blank page. It serves as a minimal starter template, showing how to initialize D3 and add a simple element to the document. The code uses the D3 `select` function to target the HTML body and the `append` method to create a paragraph element. It relies on the `d3` library, specifically the version 7 API, loaded from the unpkg CDN, and assigns an attribute to the newly created element.

Aug 25, 2022

Loading thumbnail…

Fork of Formatting axis

This bar chart displays the top 10 most populous countries, using horizontal bars ordered by population with formatted axis labels. The visualization loads data from a CSV file and renders it as SVG using React with D3 v7. It employs `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and `d3.axisBottom` with `d3.format(".3s")` to abbreviate population values. The chart includes a title and axis label, with bars styled in steelblue.

Jul 19, 2022

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a foundational D3.js bar chart using a hardcoded array of five values. It builds vertical bars by binding the dataset to `div` elements and setting each bar’s height dynamically with a custom scale factor. The code imports the `select` function from D3 via ES6 modules and uses `d3.select`, `.data`, `.enter`, and `.style` to create the visualization. A separate local module exports a text message, while the HTML file includes D3 v5 from UNPKG.

Jul 19, 2022

Loading thumbnail…

Untitled

This example shows an empty page where a dataset of five numbers is intended to be rendered as horizontal bars, though no visual output is produced because the code never appends elements. It uses D3 v6’s selection methods (`d3.select`, `selectAll`, `data`, `enter`) and sets a class and height style on the entering selection. The bar heights are computed by multiplying each data value by 5 and appending `px`. The code references a CSS class `bar` but defines no styles for it.

Jul 19, 2022

Loading thumbnail…

Fork of React & D3 Starter

This example visualizes the classic Iris dataset as a scatterplot, mapping sepal length to the x-axis and petal length to the y-axis. It serves as a starter template demonstrating a decoupled React and D3 integration pattern for scalable projects. The visualization uses D3 v7 scales and axes for rendering, while React manages component structure and data loading via the `useData` hook. Data is loaded from a CSV file using `d3.csv`, and points are drawn as semi-transparent circles using SVG.

Jul 6, 2022

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes and attributes within a single 900x500 canvas. It shows circles with varying radii and fill colors, a blue-outlined rectangle, a diagonal navy line, and a black, open path forming a geometric shape. The code uses raw SVG element syntax including `<circle>`, `<rect>`, `<line>`, and `<path>` inside an `index.html` file, with styling applied directly through presentation attributes like `fill` and `stroke`.

Jul 3, 2022