danielchamone

World Countries Tree

This hierarchical tree visualization displays the structure of world countries, grouped by continent and subregion. Country names are rendered as text nodes, connected by horizontal link paths to reveal the geographic taxonomy. The visualization uses D3 v5’s `tree` layout, `hierarchy`, and `linkHorizontal` functions to position nodes and draw edges, with interactive zooming enabled via `d3.zoom`. Data comes from a JSON file containing the nested world regions, with text styling applied for readability.

World Countries Tree

This interactive tree visualization displays the hierarchical structure of world countries, organized by continent and subregion. Built with D3 v5, it renders an SVG that responds to the browser window size, using `d3.json` to load the nested geographic data. The layout applies `d3.forceSimulation` to position the nodes. The code draws a rounded rectangle background and constructs a hierarchical tree diagram, with each node labeled by its corresponding country or region name from the source dataset.

Blank Canvas

A full-screen SVG canvas displays only a rounded rectangle drawn with D3's `select` and `append`. The rectangle fills the viewport dimensions, which are read from `document.body.clientWidth` and `clientHeight`. The visualization uses a minimal blank state with no explicit data source; the code sets the SVG's width and height attributes and applies a 40-pixel corner radius via `attr('rx', 40)`. No additional interactions or updates occur, leaving a static, empty composition.

Cheap Tricks for Interaction

A world map rendered with D3 v5 displays countries as light green SVG paths with hover highlighting in red. Using the Natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, the map loads country boundaries from TopoJSON data through `d3.json`. Pan and zoom interactions are implemented with `d3.zoom` applied to an SVG group, transforming the entire map on input. Hover effects rely purely on CSS `.country:hover`, while country names appear through appended SVG `<title>` elements.

Temperature in San Francisco Line Chart

This visualization shows a week of temperature data in San Francisco, using a line chart with a filled area beneath the curve. The x-axis represents time, and the y-axis shows temperature, with clear labels for both axes and an overall title. Built with D3 v5, the code uses `csv()` for data loading, `scaleTime()` and `scaleLinear()` for scales, and `areaGenerator` from the `area()` API to define the filled path. Grid lines and tick labels are styled via SVG, while the data comes from an external CSV file.

Fruits Basket - Click to Select

Five circles representing apples and lemons transition smoothly into new positions and sizes, with a black stroke highlighting the most recently clicked fruit. The visualization demonstrates enter, update, and exit selections through D3's data join, using `scaleOrdinal` for color and radius mappings. `transition().duration(1000)` animates position and radius changes, while click events trigger re-rendering with the newly selected fruit highlighted.

Nov 1, 2019

Bowl of Fruit - General Update Pattern

Five fruit shapes animate in and out of a basket, demonstrating the general update pattern with enter, update, and exit selections. D3 v5’s `scaleOrdinal` maps fruit types to colors and radii, while `transition().duration()` animates circle growth. The code mutates an array over timed intervals, triggering re-renders that move, recolor, and remove SVG elements.

Nov 1, 2019

Bowl of Fruit - General Update Pattern

Five circles labeled "apple" animate through a sequence of update operations: removal, type change to lemon, filter removal, and type change to orange. The example demonstrates d3's general update pattern using the enter, merge, and exit selections. SVG groups position fruit using translation transforms, with ordinal scales for color, radius, and label text. Timeouts trigger re-renders every second to show dynamic data binding.

Nov 1, 2019

Let's make a face with D3.js!

A yellow SVG face with black-outlined eyes and an animated mouth is drawn using D3.js v5. The face is centered via an SVG group transform, with circles for the eyes and an arc-based path for the mouth. Eyebrows are rectangles that transition vertically twice over two seconds using D3's `transition().duration()`. The code uses `d3.select`, `d3.arc`, and SVG attributes like `attr('d', ...)`, rendering entirely in SVG with no external data source.

World Population Area Chart

This area chart displays temperature variations over a week in San Francisco. The visualization uses a time-scaled x-axis and a linear y-axis for temperature, with the area beneath the curve filled in maroon. Built with D3 v5, the code employs `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `area`, and `curveBasis` to render the SVG path. Data is loaded from a CSV file hosted on VizHub.

Making a Bar Chart

This example uses a static dataset of 2017 population estimates for twelve countries, rendered as horizontal bars with `d3.scaleLinear` and `d3.scaleBand`. A D3 selection appends SVG `rect` elements whose widths are proportional to each country’s population, with axes created via `d3.axisLeft` and `d3.axisBottom`. The code loads `data.csv` asynchronously with `d3.csv`, converts population values to thousands, and applies margins to position the chart within an SVG of 960 by 500 pixels.

Temperature in San Francisco Line Chart

This line chart shows a week of temperature readings in San Francisco, using a filled area to emphasize the range of values over time. The visualization is rendered as an SVG using D3 v5, with a time-based x-axis and linear y-axis. The code employs `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to construct the axes, and `d3.area` with `d3.curveBasis` to draw the smooth area. The data is loaded from a CSV file hosted on vizhub.com, with the timestamp parsed into a `Date` object and temperature converted to a number.

Temperature in San Francisco Line Chart

This visualization displays a week of temperature and time data from San Francisco, with the x-axis representing time and the y-axis representing temperature. The chart uses an area chart style, filling the space beneath the temperature curve with a maroon color. The visualization is rendered as an SVG using D3 v5, importing functions like `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to construct the plot. The data is loaded from a CSV file using `d3.csv`, with timestamp values parsed into Date objects for accurate time-based scaling.

Temperature in San Francisco Line Chart

Temperature in San Francisco Line Chart

This line chart visualizes a week of temperature and time data for San Francisco, using a smooth curve to connect measured points. The visualization renders as an SVG with a maroon line over a light gray grid, with labeled axes for time and temperature. The code uses d3.csv to load the dataset, then applies d3.scaleTime and d3.scaleLinear to map the data, along with d3.line, d3.curveBasis, d3.axisBottom, and d3.axisLeft to construct the chart.

Temperature in San Francisco

This visualization displays a week of temperature measurements in San Francisco, plotting each observation as a circle along a time-based x-axis and linear temperature y-axis. The data is loaded from a CSV file using `d3.csv` and rendered as SVG circles. The code uses `d3.scaleTime`, `d3.scaleLinear`, and axis generators (`d3.axisBottom`, `d3.axisLeft`) with grid lines, alongside a rotated y-axis label and a title, all styled via external CSS.

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for a dataset of cars, with each point representing a vehicle. The chart uses d3.csv to load the data, d3.scaleLinear for both axes, and d3.axisBottom and d3.axisLeft to render tick marks and grid lines. Red semi-transparent circles are drawn as SVG elements, with axis labels and a title styled via CSS. The code removes default axis domains and applies nice() to round scale domains for cleaner tick values.

Oct 30, 2019

Scatter Plot

A scatter plot displays the population of the twelve most populous countries, with each circle’s horizontal position and size reflecting its population value and the vertical axis listing country names. The chart uses D3.js v5 APIs including `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft` to render an SVG with grid lines, a titled x-axis labeled “Population,” and a headline. Data is loaded from a CSV file via the `csv` function and formatted with `format`, while the static circle styling uses a steelblue fill.

Oct 30, 2019

Costumizing Axes

This chart displays the populations of the most populous countries as a horizontal bar chart, using a linear scale for population and a band scale for country names. D3’s `axisBottom` and `axisLeft` are customized, with tick formatting via `format(".3s")` converting values to billions, and grid lines shown through `tickSize(-innerHeight)`. The data is loaded from a CSV file using `csv`, and rectangles are drawn in SVG with `scaleLinear` and `scaleBand`. The chart also includes a title and an axis label.

Oct 30, 2019