ndhokalelearning

Lets create a map with GeoJson

This example demonstrates how to create a map of the world’s landmasses using the GeoJSON data from a Natural Earth dataset, rendered as blue-tinted sphere with light-green countries. It projects the geographic coordinates using the `geoNaturalEarth1` projection from the `d3` library, while the `geoPath` API generates the SVG paths for the continents. The map is drawn as a single SVG, with the sphere and country paths styled via CSS. The topojson library processes the raw data, although the country features are not fully connected in this instance.

Nov 20, 2020

Temperature in SFO Scatter Plot

A scatter plot displays one week of temperature readings in San Francisco, with time on the x-axis and temperature on the y-axis. Each circle represents a single measurement, rendered in semi-transparent steel blue. The visualization uses D3 v6 with SVG, employing `scaleTime` and `scaleLinear` for axes, `axisLeft` and `axisBottom` with gridlines, and data loaded via `csv` from a remote dataset. Axis labels are rotated with `transform`, and all circles are positioned using `attr` based on scaled timestamp and temperature values.

Cheap tricks for interaction

An interactive orthographic globe displays country boundaries from world-atlas data, with SVG paths colored light green and dark blue oceans. The visualization uses D3’s `geoPath` projection and `topojson.feature` to convert TopoJSON geometries, while hovering over a country turns it red via CSS. The `d3.zoom` API enables pan and zoom through a transform applied to the country group.

Blank Canvas

A blank, rounded rectangle fills the entire browser window on a white background, creating a minimalist canvas with no data or marks. The visualization sets the SVG’s dimensions to match the viewport and draws a single `<rect>` with a corner radius of 40 pixels. It uses d3’s `select` to target the SVG element and sets its width and height via `document.body.clientWidth` and `clientHeight`, demonstrating a simple setup for an empty framing space.

Lets make a MAP with D3.js

This example displays a world map using the Natural Earth projection, with countries filled in light green against a semi-transparent dark blue sphere. D3.js (v6) and the topojson library load country boundaries from the world-atlas dataset, while `d3.geoPath` and `d3.geoNaturalEarth1` generate the projected SVG paths. The code demonstrates how to render both the global sphere outline and individual country features from TopoJSON into a static SVG graphic.

Bowl of Fruits General Update Pattern Event Processing

A bowl of fruits demonstrates the D3 general update pattern for dynamic data visualization, showing how circles representing apples and lemons transition when fruits are eaten or replaced. D3 v6 with SVG and animated transitions handles enter, update, and exit selections through `data()` joins keyed by fruit IDs, with mouse events updating a selected fruit. The `fruitBowl` function uses `scaleOrdinal` for color and radius mapping, while a timer removes fruits and swaps an apple for a lemon.

Nov 18, 2020

Bowl of Fruits General Update Pattern Animated Transitions

Five apples animate into a row, then a sequence of timed updates demonstrates D3’s general update pattern: one apple is removed, a second changes into a lemon, and another is filtered out. Each change triggers a one-second `transition` that smoothly interpolates circle radii and horizontal positions, while exiting elements shrink to zero before removal. The example uses `d3.selectAll('circle').data(fruits, d => d.id)` with enter, merge, and exit selections, plus `scaleOrdinal` for fruit colors and radii. Rendered as SVG with `d3.v6`.

Nov 18, 2020

Bowl of Fruits General Update Pattern

A bowl of fruits demonstrates the D3 general update pattern, showing how data joins manage enter, update, and exit selections as apples are eaten or replaced by lemons over timed intervals. The code uses d3.scaleOrdinal to map fruit types to colors and radii, with SVG groups appended via selection.join patterns. Each render cycle repositions fruit groups with transform attributes, updates circle fills and text labels, and removes exiting elements.

Nov 18, 2020

World Population Area Chart

This area chart shows global population growth from 1960 to 2015, with a smooth curve plotting population in billions against a time-based x-axis. The SVG visualization uses d3.csv to load the data, d3.scaleTime and d3.scaleLinear for the axes, and d3.area with curveBasis to generate the shaded path. Axis labels and gridlines are added via d3.axisLeft and d3.axisBottom, with custom tick formatting that converts billions to a compact label. The chart uses a steelblue fill with a red stroke for the area path.

Temperature in SFO Area Plot

This visualization shows a week of temperature data for San Francisco as a filled area plot, with the area beneath the temperature curve shaded in steel blue and outlined in red. Using D3 v6, the code loads CSV data via `d3.csv`, maps timestamps to a time scale and temperatures to a linear scale, then generates the area shape with `d3.area` and a basis curve. Axes are customized with ticks and gridlines, and the chart is rendered as SVG elements, with a title added above the plot.

Temperature in SFO Line Plot

This line plot visualizes temperatures in San Francisco over a week, with time on the x-axis and temperature on the y-axis. The chart uses red smoothed line curves and includes labeled axes, a title, and gridlines created via D3’s `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` APIs. The code loads CSV data from a remote source, parses timestamps, and renders the visualization using an SVG element.

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for a dataset of cars, with each car represented as a semi-transparent red circle. The data is loaded from a CSV file and parsed into numeric values before rendering. Using d3.v6, the visualization employs scaleLinear for both axes, axisLeft and axisBottom for tick marks and grid lines, and SVG circles for data points. Axis labels and a title are added as SVG text elements, with the chart framed by explicit margins.

Scatter Plot

This scatter plot displays the top 10 most populous countries using population data from the World Population Prospects, with each country positioned along a linear population scale and an ordinal point scale for country names. The visualization uses D3 v6’s `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to render SVG circles and gridlines, formatting population values in billions via `format('.3s')`. Data is loaded from a CSV file and multiplied by 1000, with axes and labels styled through external CSS.

Customizing Axes

This bar chart displays the populations of the world’s ten most populous countries, using data from World Population Prospects 2017. The visualization customizes both axes: the horizontal axis uses a linear scale with tick labels formatted via `d3.format` to abbreviate numbers (e.g., replacing ‘G’ with ‘B’), while the vertical axis removes the domain line and tick marks using D3’s `axisLeft` and `axisBottom`. Population values are multiplied by 1000 in the CSV loading step.

Making a Bar Chart

This bar chart displays the populations of the world’s most populous countries, using horizontal bars ordered by country name. The visualization scales population values linearly and maps countries to categorical bands. Data from World Population Prospects 2017 is loaded via d3.csv, then rendered as SVG rectangles with axes generated using d3.axisLeft and d3.axisBottom. The chart employs d3.scaleLinear and d3.scaleBand to position elements, with margins computed from the SVG dimensions. Population figures are multiplied by 1000 to reflect actual counts.

Lets make a face with D3.js

A smiling cartoon face is drawn with D3.js, built from SVG shapes: a yellow circle head, two eyes, rectangular eyebrows, and an arc-based mouth path. The code uses D3’s `select` and `arc` APIs, with a `group` element centered via a transform. Eyebrows animate by modifying the `transform` attribute through a two-step `transition` chain, moving them down and back up over four seconds total.

HTML Cars Report

This example displays a static list of three used cars with their model years and prices. It demonstrates how to render a simple data report using plain HTML and CSS, with the first car entry highlighted in red. The page structure is defined in `index.html`, while `styles.css` sets the monospace font, large base font size, and `.highlighted` class for the red color. The code uses standard HTML list elements and CSS selectors, with no additional JavaScript libraries or dynamic data binding.

Shapes with SVG and CSS

This example shows how to combine SVG shape primitives with CSS styling to create a static composition of circles, rectangles, lines, and paths. The SVG markup defines the geometry, including grouped elements with local transforms for positioning and styling. CSS classes, such as `.lines`, apply stroke properties to the line and path elements, while the SVG attributes set fills and strokes for individual shapes. The code relies solely on the native SVG API and CSS, with no external JavaScript libraries, and renders shapes using the SVG rendering approach.

Cars Report

This example demonstrates a simple text-based car report. The page initially displays “loading…” and then, after a 10-second delay, renders a formatted list of cars priced under a given maximum. The report formats each vehicle as “year make model : $price” using data from a hardcoded JSON array. The code relies on JavaScript modules, the `Promise` API with `setTimeout`, and uses `Array.filter`, `Array.map`, and `Array.join` to generate the final output, which is inserted into the DOM via `textContent`.