D

David-Wong110723

@David-Wong110723·16 public vizzes

Loading thumbnail…

JS table manipulation test - jsFiddle demo by RichardMathie

This interactive demo shows a D3.js workflow for loading and manipulating tabular data from a CSV file. The page uses `d3.csv` to parse ride information, including distance, time, and ascent, while the JavaScript console demonstrates how to select and transform SVG circles, bind data, and dynamically add or remove elements. The visualization also explores creating sortable HTML tables with Bootstrap Table, using D3 selections to append table headers and apply attributes like `data-sortable`. The rendered output is an SVG scatter plot, though the main focus is on the code-driven table manipulation.

Loading thumbnail…

Cars Scatter Plot 1216

This scatter plot visualizes world population data from the UCI Machine Learning Repository, titled "Cars: Horsepower vs. Weight." It displays population values over time using an area chart generated with d3.area and curveBasis, while the y-axis uses a linear scale with tick formatting that abbreviates billions. The visualization is rendered as an SVG element using d3.v5, with axes created via d3.axisLeft and d3.axisBottom, and scales defined by d3.scaleTime and d3.scaleLinear. Data is loaded from a CSV file using d3.csv.

Loading thumbnail…

Bar Chart 1218

This bar chart example uses the D3 v6 library within a React framework to visualize the relationship between vehicle weight and horsepower from the auto-mpg dataset. The SVG rendering employs `scaleLinear` for both axes and `extent` to set the domains. Grid lines and axis labels are created using `axisLeft` and `axisBottom`, while the data points are drawn as semi-transparent red circles. The chart is generated by loading the CSV data and parsing the numeric fields before rendering.

Loading thumbnail…

Bar Chart test1220

This bar chart displays the population values of six years, from 2011 to 2016, based on a local CSV file and styled with a steelblue fill. The visualization customizes D3 v5 axes by adding a dollar sign prefix to the y-axis ticks and labels the chart as “XYZ Foods Stock Price.” The SVG rendering uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and appends rectangles via `d3.selectAll` and data joins, with axis elements created using `d3.axisLeft` and `d3.axisBottom`.

Loading thumbnail…

Untitled

Five circles in a horizontal row show a small dataset of numeric values, sized proportionally and shaded with a sequential color scale from light to dark green, with each value labeled beside it. The code uses D3 v4’s data join to bind an array of five numbers to SVG group elements, then appends circles and text. Circle radii are scaled by the data value, and colors come from a hardcoded array, while dimensions are set directly on the SVG.

Loading thumbnail…

Fork of Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. It uses d3.csv to load the data and d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom to render the visualization in SVG. The chart customizes axes by removing domain lines, applying a tick format that converts billions to a compact label, and adding a titled axis label.

Loading thumbnail…

Persons of Concern StreamGraph by Origin 1216

This streamgraph shows the total number of persons of concern—including refugees, asylum-seekers, and internally displaced people—grouped by country of origin over time, excluding countries with low counts. The visualization uses d3.stack with a wiggle offset and inside-out ordering, rendering labels via d3-area-label. It employs d3.scaleTime for the x-axis and d3.scaleOrdinal with d3.schemeCategory10 for colors. Hovering highlights a path in red. Data comes from UNHCR Population Statistics, loaded as JSON.

Loading thumbnail…

Line Chart with Multiple Lines 1216

This line chart displays one week of temperature data in degrees Celsius for multiple cities worldwide, sourced from Data Canvas - Sense Your City. Temperatures are plotted over time, with each city represented by a colored line and a legend using an ordinal color scale. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `scaleOrdinal`, `nest`, `line` with `curveBasis`, and custom legend and axis components, rendering as SVG with gridlines.

Loading thumbnail…

D3 v5 Zoomable Sunburst 1216

This zoomable sunburst visualization displays the hierarchical structure of the Flare data, showing nested categories as concentric arcs whose angular width and radius encode the relative sizes of branches and leaf nodes. Clicking a segment zooms into that subtree, smoothly animating the layout as the clicked node becomes the new root. The D3 v5 code uses `d3.partition` and `d3.hierarchy` for layout, `d3.arc` for path geometry, and `d3.transition` with `attrTween` to interpolate arc positions and angles during zoom animations. A sequential rainbow color scale assigns hues to top-level branches.

Loading thumbnail…

Stylized Scatter Plot 1216

This scatter plot visualizes the Iris Dataset, showing petal length against sepal width for individual flowers. Built with React and D3 v5, it uses `scaleLinear` functions to map data values to SVG coordinates. The `AxisBottom` and `AxisLeft` components render tick marks and labels, while the `Marks` component draws circles with native SVG `<title>` tooltips. Data is loaded asynchronously via `d3.csv` and transformed with numeric coercion.

Loading thumbnail…

Vega-Lite API Template 1216

This visualization uses the Vega-Lite API to display a scatter plot of UCI Auto MPG data, plotting miles per gallon against horsepower. Each circle represents a car model, with color encoding the country of origin, size encoding weight, and tooltips revealing the car name. The code fetches CSV data via `d3.csv`, then builds the chart programmatically using functions like `vl.markCircle` and `vl.x().fieldQ`. The visualization renders as a full-window SVG with a custom dark theme, with axis styling and tooltip formatting configured for readability.

Loading thumbnail…

Melting Data for Multiple Lines 1216

This example visualizes population over time by region using multiple lines, with a legend and axis labels. It uses d3.scaleTime, d3.scaleLinear, d3.scaleOrdinal, d3.axisBottom, d3.axisLeft, d3.line, d3.curveBasis, d3.nest, and d3.schemeCategory10. The data is sourced from UN population estimates and medium variant projections, melted from wide to long format. The visualization renders as an SVG with a title and color legend.

Loading thumbnail…

Religions of Largest 20 Countries 1215

This stacked bar chart shows the estimated 2010 religious composition of the 20 most populous countries, with each bar segmented by religion and ordered by total population. Hovering over a bar displays a tooltip with the exact population for that religion, while hovering over the legend highlights the corresponding segments across all countries. The visualization uses D3.js version 3.5.5 with the d3.legend library, leveraging d3.layout.stack for the stacked layout and d3.svg.axis for scales. Data comes from the Pew Research Global Religious Landscape, rendered as an interactive SVG with animated transitions.

Loading thumbnail…

Let's make a face using D3.js

This example builds a cartoon face in SVG using D3.js, combining primitive shapes with animated eyebrows. A yellow circle forms the head, with eyes and a mouth drawn via arcs and rectangles. The code demonstrates D3’s `select`, `arc`, and `transition` APIs to create the facial features and animate the eyebrows up and down in a looping motion. The face is centered using an SVG group with a translated transform, and all styling is handled through D3 attribute methods.

Loading thumbnail…

Cars Report v2

This example shows a simple text-based report of used cars under a price threshold, displayed as a list in the browser. It uses JavaScript promises, asynchronous data loading, and module exports to structure the code. The data is stored as a JSON string, parsed and returned after a simulated two-second delay, then filtered and formatted using the `formatCar` function. The final output is rendered into a `<pre>` element, demonstrating basic array methods, object destructuring, and promise chaining.

Loading thumbnail…

Cars Report 1212

This example demonstrates a simple text-based report generator that filters a list of cars by price and formats the results using JavaScript template literals. It displays a static message in an HTML `<pre>` element, with the core functionality built on array methods like `filter`, `map`, and `join`. The code uses ES6 modules to import and export functions from separate files, parses JSON data with `JSON.parse`, and relies on a `Promise` for asynchronous data retrieval in `getCars.js`. The visualization is rendered directly in the browser via a bundled script.