RobertDelgado

resize work8

This interactive scatterplot visualizes greenhouse gas emissions and population data for multiple countries from 1990 to 2013. The visualization updates as the year advances, showing each country's cumulative GHG emissions against its yearly emissions, with the chart resizing to fit the browser window. It uses `d3.scaleBand` for the categorical country axis and `d3.scaleLinear` for the continuous emission values, with SVG rendering and dynamic data filtering based on year and country rank. The code adapts to the available chart area using `chartDiv.clientHeight` and `chartDiv.clientWidth`.

Nov 8, 2017

resize work7

This visualization displays cumulative greenhouse gas emissions over time for multiple countries, filtered by a user-selected year and country ranking. It presents data as a bar chart where each country’s bar segment represents annual emissions, stacked to show cumulative totals. The visualization uses D3 v4 to render SVG graphics, with scales for countries (x-axis) and emission values (y-axis). The code dynamically resizes the chart based on the browser window’s dimensions, and filters the dataset according to the specified year and ranking criteria.

Nov 8, 2017

resize work7

This interactive visualization uses a D3.js v4 SVG chart to explore greenhouse gas (GHG) emissions across multiple countries from 1990 to 2013. The chart displays a diverging stacked bar for each selected country, showing both annual emissions and cumulative totals, with a time slider or year-based filtering visible through the rendering logic. The code leverages `d3.scaleBand` for the categorical country axis, `d3.scaleLinear` for the continuous emission values, and a custom `render` function that filters and sorts the underlying CSV data based on the selected year. The chart's title dynamically updates to show the current year, and the entire visualization resizes to fit its container using the `chartDiv` dimensions.

Nov 7, 2017

resize work6

This visualization displays greenhouse gas emissions data for multiple countries from 1990 to 2013, using a dynamic bar chart where each bar represents a country’s cumulative emissions, with bars added progressively as the year increases. The chart updates its axes and title based on the current year and the number of countries selected, using D3 v4 scales, SVG rendering, and data filtering to show a subset of countries ranked by emissions. Tooltips and axis labels are included, and the visualization uses a cumulative emission metric stacked on a linear scale.

Nov 7, 2017

resize work5

This example shows greenhouse gas (GHG) emissions data for multiple countries over time, with a geographic focus on country rankings up to a specified number. The visualization updates dynamically as the year advances, displaying cumulative emissions as bars, where each bar’s height corresponds to the total GHG for that country up to the current year. The code uses d3.v4 with an SVG rendering approach, leveraging d3.scaleBand and d3.scaleLinear to position and size the bars, and handles window resizing by recalculating the chart dimensions based on the container’s client height and width. Data is loaded from a CSV file containing country, year, GHG, cumulative GHG, population, and final rank columns.

Nov 6, 2017

resize work5

This example visualizes greenhouse gas emissions and cumulative emissions over time, filtered by year and country rank. The visualization uses a timeline-based bar chart where each country’s annual and cumulative emissions are displayed, with the current year prominently shown. The code relies on d3.v4 for SVG rendering, including d3.scaleBand and d3.scaleLinear for positioning and scaling, and dynamically updates the chart based on the data and user-defined year and country filters. The data comes from the provided CSV file, and the chart resizes to fit its container.

Nov 6, 2017

resize work5

This interactive visualization presents cumulative greenhouse gas emissions by country from 1990 to 2013. It uses a treemap-like layout with a band scale on the x-axis for countries and a linear scale for cumulative emissions on the y-axis. The code employs d3.v4 with SVG rendering, dynamically resizing the chart to fill the viewport. It includes a tooltip and an animated title displaying the current year, filtering data by year and final rank.

Nov 6, 2017

resize work4

This visualization shows greenhouse gas emissions and cumulative emissions data for multiple countries from 1990 to 2013, with a bar chart displaying yearly values for countries ranked by their emission levels. The chart updates dynamically to reveal data progressively over time, with a large title showing the current year. Built with D3 v4, it renders an SVG chart that resizes to fit its container, using scaleBand for country categories and scaleLinear for emission values. The data comes from a CSV file containing country, year, GHG emissions, population, and rank information.

resize work3

This interactive bar chart displays the cumulative greenhouse gas emissions (in million tonnes) for the top-ranked countries from 1990 to 2013, with a timeline scrubber that animates through years and a rank filter. The visualization uses D3 v4’s `scaleBand`, `scaleLinear`, and `scaleOrdinal` to map countries, emission values, and colors, rendering an SVG with a resizable, full-window layout. Data is loaded from a CSV file containing annual GHG, cumulative totals, and population figures, with plotted bars and a year title updating dynamically.

resize work2

This visualization animates cumulative greenhouse gas emissions for a filtered set of countries over time, showing a bar chart where each country’s bar represents the sum of its emissions up to the displayed year. Built with d3.v4, it uses SVG rendering, with a `d3.scaleBand` for the x-axis, a `d3.scaleLinear` for the y-axis, and a data-driven year selector that filters the provided CSV dataset. The chart resizes responsively to the browser window, updating the title, axes, and bar positions dynamically.

resize work2

This interactive visualization displays cumulative greenhouse gas emissions by country over time, using a dynamic bar chart that updates as the year progresses. It ranks and displays a selectable number of countries, showing their yearly emissions as stacked segments within each bar. Built with D3 v4, the chart renders SVG elements and responds to window resizing by recalculating dimensions. The visualization filters the dataset by year and rank, sorts countries by their final ranking, and uses ordinal color scaling to distinguish each country.

resize work1

This interactive bar chart visualizes cumulative greenhouse gas emissions by country from 1990 onward, with a slider or year-based update controlling the time range and a filter limiting the number of ranked countries shown. The visualization uses D3 v4 with an SVG rendering approach, leveraging `d3.scaleBand` for the categorical country axis and `d3.scaleLinear` for the numeric emission values. It dynamically resizes to fit its container, recalculating chart dimensions on each render and updating the graph title to reflect the current year. Data comes from a CSV file containing per-country annual emissions and population figures.

resize work1

This visualization displays cumulative greenhouse gas emissions for selected countries by year, with population data shown as a secondary metric. The interactive chart updates as the year and country count change, filtering the CSV dataset accordingly. The code uses D3 v4 with an SVG rendering approach, implementing scales, axes, and a bar-like layout where cumulative emissions are stacked per country. The visualization dynamically resizes to fit its container, recalculating dimensions and scales on each render call.

fresh block toy 2

This example renders a minimal SVG scene in the browser using D3 v4. It displays the static text “Edit the code below to change me!” centered vertically and positioned near the left side of the viewport. The visualization redraws itself on window resize events, recalculating the SVG element’s dimensions and the text’s font size and position based on the chart container’s current client height and width. The code leverages D3’s selection and merging API—including `d3.select`, `.enter()`, `.merge()`, and `.exit()`—to manage the lifecycle of the SVG and text elements, while the fixed full-window layout is defined with CSS.

fresh block

This example displays a single text message at the center of the screen using SVG. The text content is static, but its position and font size are recalculated on window resize relative to the container’s dimensions. The code uses D3 v4’s selection and merge methods to manage a persistent `<svg>` and `<text>` element, binding data once and updating attributes on redraw. It demonstrates a minimal responsive layout pattern for a full-window chart with an event listener for resizing.

fresh block

This example shows a full-window SVG that displays a short text message, "Edit the code below to change me!", centered vertically and offset horizontally. It is a minimal template demonstrating responsive sizing. The code creates an SVG using d3.select and appends a text element, setting its position and font attributes. The `redraw` function reads the chart container’s `clientHeight` and `clientWidth` to update the SVG’s dimensions and text placement, and it is called initially and on every window `resize` event, using D3 v4.

Dynamic Size Example

This example demonstrates how to make a D3.js v4 SVG visualization dynamically resize to fill its container. It shows two diagonal lines forming an X that repositions and stretches whenever the browser window changes size. The code uses `chartDiv.clientWidth` and `chartDiv.clientHeight` to extract the computed CSS dimensions, then applies them to the SVG’s `width` and `height` attributes within a `redraw` function. The function is called initially and again via a `window.addEventListener("resize", redraw)` hook, with `merge` updating the line coordinates.

fresh block

This example presents a full-screen SVG canvas containing a single line of placeholder text that reads “Edit the code below to change me!”. Rendered in monospace, the text is positioned dynamically based on the current width and height of the browser window. The code uses D3 v4 to append the SVG and text elements, and it re-renders the visualization whenever the window is resized, clearing the previous SVG via `exit().remove()` before drawing anew. The visualization is built as a simple starting point for customization within Blockbuilder.

Refactor Project zzz3

This visualization animates cumulative greenhouse gas emissions for selected countries from 1990 to 2013, showing stacked bar segments per country that grow over time. Each bar represents a country’s annual emissions added to its cumulative total, with color encoding distinct nations and a ranking filter limiting the display. The code uses D3 v4 with an SVG rendering approach, employing `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the y-axis. Data is loaded from a CSV file and filtered dynamically by year, with tooltips providing interactivity.

Project Prototype round 3 v3

This visualization plots cumulative greenhouse gas emissions from 1990 to 2013 for a ranked subset of countries, using a slider to animate through the years. Annual emissions are shown as a stacked bar segment that grows over time for each country, with the current year highlighted and each country’s cumulative total represented by the bar’s height. The chart is built with D3 v4, using `d3.scaleBand` for the categorical country axis and a linear scale for the emission values, and updates the bar heights and positions via a custom `render` function that filters the CSV data by year and rank.

Oct 29, 2017

Project Prototype round 3 v3

This interactive visualization tracks greenhouse gas emissions (GHG) and cumulative emissions for multiple countries from 1990 to 2013. A slider controls the year, updating a dot plot where each circle’s vertical position represents cumulative emissions, with a visible stem indicating the annual contribution. The code uses D3 v4 with a slider input, data filtering based on year and final rank, and a custom generalUpdate/generalEnter pattern for data joins. The tooltip feature is present in the CSS but not fully implemented in the visible code.

Oct 29, 2017

Project Prototype round 3 v3

This interactive bar chart visualizes greenhouse gas (GHG) emissions trends for countries over time, ranked by cumulative emissions. A slider lets users scrub through years from 1990 to 2013, with bars transitioning to show each country’s annual and cumulative emissions. The visualization uses D3 v4 to dynamically filter and sort data from a CSV file, updating scales, axes, and groups via a general update pattern. Tooltips and labeled stems appear for selected years, highlighting the relationship between population, emissions, and ranking.

Oct 29, 2017

Project Prototype round 3 v2

This interactive D3.js v4 visualization animates greenhouse gas (GHG) emissions by country from 1990 to 2013, using a slider to scrub through years. It displays cumulative emissions as vertical bars, with each bar segment representing a year’s contribution, sorted by final country rank. The tooltip reveals details on hover. Built with Blockbuilder, it uses `d3.scaleBand` for country positioning, `d3.scaleLinear` for the y-axis, and `generalUpdate`/`generalEnter` functions to manage dynamic data joins as the year changes.

Oct 28, 2017

Project Prototype round 3

This interactive D3.js v4 visualization shows the cumulative greenhouse gas emissions of selected countries over time (1990-2013), with bar segments representing yearly GHG contributions stacked by country. A tooltip displays additional details when hovering. The code uses D3's `scaleBand` for the country axis, `scaleSqrt` for the cumulative emission values, and `selectAll`, `enter`, `exit`, and `merge` to update the SVG elements dynamically as the year and number of countries are adjusted. The data comes from the provided `Data3.csv` file.

Oct 27, 2017

Refactor Project with pan & zoom2

This interactive visualization animates cumulative greenhouse gas emissions and population rankings for the top ten countries from 1990 to 2013, using a data-driven bar chart where each bar represents a country’s annual contribution to its running total. The view supports pan and zoom via `d3.zoom`, allowing users to explore the chart in detail, while hovering reveals tooltips with country-specific population and cumulative emission values. The code employs D3 v4 with modular helper functions for data joins and attribute assignment, and styling uses CSS classes for interactive marks and an annotation label.

Oct 26, 2017

Refactor Project with pan & zoom2

This interactive bar chart visualizes cumulative greenhouse gas emissions for the top ten ranked countries from 1990 to 2013, using a slider to animate through years. Each bar is segmented to show annual GHG contributions, with hover tooltips displaying population and cumulative values. Built with D3 v4, the visualization supports pan and zoom via d3.zoom, scaling the chart up to 40x. The code applies a general update pattern for data joins and uses d3-tip for tooltips, with data sourced from Data3.csv.

Oct 26, 2017

Refactor Project with pan & zoom

This example visualizes cumulative greenhouse gas emissions for the top ten ranked countries from 1990 to 2013, with each bar segment representing a year’s contribution. Users can pan and zoom the chart via d3.zoom, which applies a transform to the graph container, while d3-tip provides hover tooltips showing population and cumulative GHG values. The visualization uses d3.scaleBand for country categories and d3.scaleLinear for emission values, rendering the data from the provided CSV file.

Refactor Project zzz2

This animated D3 v4 visualization, built with BlockBuilder.org, charts greenhouse gas (GHG) emissions and cumulative emissions alongside population for 21 countries from 1990 to 2013. Each country’s data is presented in a small multiple grid, with bars for yearly emissions and paths connecting cumulative totals, animating through the years to show rank changes and growth. The rendering is driven by custom update and enter functions that manage SVG elements, while tooltips reveal specific values, and the legend and axes are styled to clarify the comparison.

Refactor Project zzz2

This animated visualization tracks cumulative greenhouse gas emissions for multiple countries from 1990 to 2013, showing each nation’s annual contribution as stacked horizontal bars. A floating tooltip, implemented with d3-tip and custom labels, reveals exact values on hover. The rendering uses D3 v4 with scaleBand and scaleLinear axes, while transitions update bar positions and highlight top and bottom performers across years. Data comes from the included CSV file, with countries ranked by total emissions over the period.

Refactor Project zzz2

This animation visualizes cumulative greenhouse gas emissions (GHG_Cum) for multiple countries from 1990 to 2013, with each year rendered as a separate horizontal bar chart. The visualization highlights yearly changes in both cumulative emissions and the contribution of each year's emissions, using connecting marks to trace trajectories. Built with D3 v4, the code employs `d3.scaleBand` and `d3.scaleLinear` for axes, uses `generalUpdate` and `generalEnter` helper functions to manage SVG elements, and incorporates interactive tooltips via d3-tip. Data is sourced from a CSV file containing country-level GHG, population, and ranking information.

Refactor Project zzz1

This animated D3 v4 visualization displays each country's cumulative greenhouse gas emissions over time, with a focus on the top ten ranked countries. It presents a series of small bar charts, one per year, where each bar represents a country's emissions, sequentially revealing new "top" countries as they enter the ranking. The implementation uses `d3.scaleBand` and `d3.scaleLinear` for axes and employs custom `generalUpdate`, `generalEnter`, and `attributes` functions to manage SVG elements. Data is sourced from a CSV file containing country, year, GHG emissions, cumulative GHG, population, and final rank.

Refactor Project zzz

This animated visualization shows the cumulative greenhouse gas emissions of the top ten ranked countries from 1990 to 2013, with each country represented by a bar chart that updates over time. The code uses D3 v4 to build the charts, with `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and includes d3-tip for tooltips and d3-legend for the legend. The animation transitions between yearly views, displaying floating labels with population and cumulative GHG data, while connecting marks and annotations track changes in country rankings.

Oct 24, 2017

Refactor Project xxx

A multi-year animated bar chart displays cumulative greenhouse gas emissions for the top ten ranked countries, with each bar tracking the annual addition to its total. The visualization uses D3 v4 to sort and filter CSV data by final rank, then updates the chart for each year. Code implements custom update, enter, and attribute functions for managing SVG elements, along with a d3.zoom interaction for exploring the timeline. Tooltips and floating labels provide contextual information about population and emissions values.

Oct 24, 2017

fresh block

This example renders a minimal D3.js v4 visualization: a single SVG canvas displaying the text "Edit the code below to change me!" in a monospace font. The code uses `d3.select` to target the body element, appends an SVG with fixed dimensions, and positions the text at coordinates (120, 200). The visualization’s source is a gist by RobertDelgado, built with Blockbuilder.org, and serves as a placeholder template for users to begin customizing their own charts.

Oct 20, 2017

fresh block

This example visualizes the cumulative greenhouse gas emissions of the ten largest emitting countries for a given year, with a focus on the total contribution and population size. Animated bubble marks show each country’s top value while rectangular bars depict the range of cumulative emissions. Built with D3 v4, the visualization uses `d3.scaleBand` for categorical positioning, `d3.scaleLinear` for the y-axis, and interactive tooltips via d3-tip. The rendered SVG updates dynamically, hover effects transition the fill color, and the underlying data comes from a gist.

Oct 20, 2017

fresh block

A diverging bar chart displays cumulative greenhouse gas emissions for the ten largest countries by final rank, broken into annual increments. Orange circles sized by national population sit atop each bar segment, with hover tooltips showing country and population. The visualization, built with D3 v4, uses SVG circles, rectangles, and text, and animates through years by filtering data from a CSV file.

Oct 20, 2017

Project Prototype 6

This example visualizes the cumulative greenhouse gas emissions of the ten largest-ranked countries over time, using an animated bar chart. It plots countries on the x-axis and their cumulative emissions on the y-axis, with circles sized by population. The visualization updates by year, showing the progression from 1990 onward. The code leverages D3 v4’s `scaleBand` and `scaleLinear` for axes, renders SVG circles and rectangles, and includes hover tooltips that display country and population data. The data is loaded from a CSV file containing country-specific emission values.

Oct 19, 2017

For Resize

This visualization plots each country’s Human Development Index (HDI) on the x-axis against the year (1990-2015) on the y-axis, with circles colored to highlight a selected country (red) versus all others (translucent dark). It directly shows the United States’ decline in global HDI ranking over time while the rest of the world generally improves, as described in the README. Built with D3 v4, the SVG chart uses `d3.scaleLinear` for both axes, axis generators `d3.axisBottom` and `d3.axisLeft`, and proportional resizing via `chartDiv.clientHeight`. Data comes from the UNDP HDR CSV, processed with a custom `rows` parsing function.

Oct 19, 2017

Project Prototype 5

This visualization depicts cumulative greenhouse gas (GHG) emissions for the ten largest countries over time, showing both the annual contribution and the total accumulated amount for a selected year. A bar’s height represents the annual GHG value, while a circle positioned at the top indicates the cumulative total, with its radius scaled by population. The chart is built with D3 v4, using SVG primitives (`circle`, `rect`, `line`) and a band scale for the x-axis. Data is loaded from a CSV containing country, year, GHG, and population figures, with an annotation text element highlighting the displayed year.

Oct 18, 2017

Project Prototype 4

This graphic shows the top-ten ranked countries by cumulative greenhouse gas emissions, focusing on the year 2011. It uses a combination of circles (sized by population), vertical bars (representing annual emissions), and dashed lines (connecting to cumulative totals) for each country. The visualization is rendered in SVG using d3.v4, with data loaded from a CSV file. It employs `d3.scaleBand` and `d3.scaleLinear` for axes and scales, and uses SVG primitives like `circle`, `rect`, and `line` to encode the data.

Oct 18, 2017

Project Prototype 3

This visualization compares cumulative greenhouse gas emissions for the ten highest-emitting countries across yearly intervals. It uses circular marks sized by population, vertical rectangles showing the current year's emissions contribution, and dashed lines connecting cumulative totals to a baseline. The code employs d3.scaleBand for country positioning, d3.scaleLinear for emission values, and d3.axisBottom/axisBottom for axes, with data loaded from a CSV file containing GHG, population, and rank fields.

Oct 17, 2017

Project Prototype 3

This visualization displays cumulative greenhouse gas emissions for the ten highest-ranked countries from 1990 to 2013, with each country represented by a circle scaled by population and a line indicating annual emissions. The chart uses D3 v4 to create an SVG scene with animated transitions between years, including top and bottom marks connected by rectangles to show cumulative totals. The data comes from a CSV file containing country, year, GHG values, cumulative GHG, and population figures, rendered using `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisBottom`.

Oct 17, 2017

Project Prototype 2

This visualization displays the cumulative greenhouse gas emissions for the ten highest-ranked countries, comparing their annual contributions in a selected year. Each country is positioned along the x-axis, with a circle marking the cumulative emissions total and a vertical line showing the portion added in that specific year, scaled by population. The chart uses D3 v4 with SVG rendering, employing `d3.scalePoint`, `d3.scaleLinear`, and axis generators to structure the data from the provided CSV file, which tracks GHG values and population from 1990 onward.

Oct 16, 2017

Project Prototype

This D3.js visualization, built with the d3.v4 library, explores the relationship between greenhouse gas emissions and time. It uses a log-scaled scatter plot to compare per-country total GHG emissions across selected years, with red circles highlighting specific countries. The code uses `d3.nest()` to structure the data by country and year and `d3.sum()` for aggregation. The rendering is SVG-based, with axes, text, and data marks drawn using D3's `axisBottom` and `axisLeft` components.

Oct 14, 2017

My Custom Shapes

This example demonstrates how to render custom geometric shapes—squares and triangles—in an SVG scene using D3.js v4. It defines a `shapeDefs` object with functions that construct SVG path strings via the `d3.path` API, and then uses a data join to draw the shapes. The code showcases the enter, update, and exit pattern by first rendering a dataset of three nodes, then re-rendering with a second dataset, which removes the red square. Each shape’s position and color are stored as data properties and applied through `transform` and `fill` attributes.

Oct 14, 2017

fresh block

This example displays three distinct SVG symbols—a triangle, a cross, and a star—positioned along a horizontal line based on their x and y coordinates. Built with D3.js v4, it uses `d3.symbol` with `d3.symbolTriangle` to generate the triangle path, while the other shapes are implicitly defined through the data's `shape` property. The visualization demonstrates a linear scale mapping from data space to pixel space, with each symbol rendered as a black stroke path on a white canvas, translated to its scaled position. The code uses `d3.select` and `g.selectAll` to append paths to the SVG container.

Oct 5, 2017

Playing with hues

Two rows of small squares demonstrate two sequential color scales in D3 v4. The top row shifts through grays while the bottom row shows greens, with each square’s fill set via `d3.scaleSequential` and `interpolateGreys`/`interpolateGreens`. The layout uses linear `d3.scaleLinear` functions for x and y positions within an SVG, with hardcoded data arrays for the coordinates. A text label titles the exercise in color mechanics.

Oct 4, 2017

fresh block

A grid of four square rectangles is drawn on an SVG canvas, each positioned along the x-axis with identical y-values, and colored with a cool-tone gradient that shifts based on each square's x-coordinate. The visualization uses d3.v4 and the data-binding pattern `selectAll().data().enter().append()` to create the shapes. The x- and y-positions are mapped through `d3.scaleLinear` domains, while a `d3.scaleSequential` with `d3.interpolateCool` determines the fill color. The static dataset is hardcoded in the script, and margins are applied via a translated SVG group.

Oct 4, 2017

Internet Users (d3 in motion)

A circular scatterplot displays the top five countries by internet users, with circles positioned along a shared x-axis and scaled vertically by total users. The chart uses SVG circles rendered through d3.select, d3.scalePoint, and d3.scaleLinear, with data loaded from a CSV via d3.csv. The render function slices the first five rows and maps country names and internet user counts to coordinates, though no animation or transition is present in this static snapshot.

Oct 2, 2017

US Human Development Ranking

This scatterplot-style visualization tracks the decline of the United States in the Human Development Index (HDI) ranking from 1990 to 2000, highlighting the USA in red among all other countries shown as translucent dots. The chart uses D3 v4 with SVG rendering, employing `d3.scaleLinear` for both axes and `d3.axisBottom`/`d3.axisLeft` to display the HDI index (0–1) against the year. Each row of the dataset is plotted as a circle, with horizontal dashed lines and right-side labels showing the USA’s annual rank. Data comes from the UNDP’s HDR API via a CSV file.

Oct 1, 2017

Position in Common and Unaligned Scales

Based on Tamara Munzner's "Visualization Analysis & Design," this D3.js example contrasts length and position encoding by rendering four horizontal lines with black tick marks at their endpoints and a square marker positioned along each line. The top two lines share a common x-axis scale, while the bottom two use unaligned scales, demonstrating how changes in square position can be read accurately on a common scale but become misleading when scales differ. The visualization uses d3.scaleLinear to map a 0–500 domain to a 0–500 pixel range, and SVG primitives (`line`, `rect`, `text`) are appended via d3.select and g.selectAll().data().enter(). Data is hardcoded as an array of coordinate objects.

Sep 30, 2017

Area (2D) Size example with tilt

This example compares two types of 2D area markers—rotated squares and circles—to show how area encodes ordered attributes. The squares increase their side lengths linearly, while the circles use progressively larger radii with varying opacity to represent data. The visualization is built with D3 v4 and rendered as SVG, using `d3.scaleLinear` for both x and y positioning, with the data defined as an array of shape-specific objects. The code filters this data by shape to create separate groups of rectangles and circles, applying distinct transformations and fill colors.

Sep 29, 2017

Rob's Scatter Plot

This scatter plot visualizes diastolic versus systolic blood pressure for patients in the Dominican Republic, with the area of each circle encoding the patient's age and color indicating gender. Built with D3 v4, the chart uses `d3.scaleLinear` for both axes, `d3.scaleOrdinal` with `d3.schemeCategory10` for color encoding, and `d3.legendColor` to display the gender legend. Data is loaded from a CSV file using `d3.csv`.

Sep 28, 2017

Area (2D) Size example

This example demonstrates the 2D area size channel for ordered attributes by comparing square and circular markers scaled proportionally to their data values. A row of green rectangles increases in side length linearly, while a row of blue circles increases in radius using a square-root transformation, showing how area perception differs between shapes. The visualization uses D3 v4 with SVG rendering, employing d3.scaleLinear for x and y positions, and data binding via selectAll().data().enter().append() to generate the geometric primitives. Marker arrays are hardcoded in the script, with rectangles and circles positioned at fixed intervals for direct size comparison.

Sep 27, 2017

Top Internet Countries Visualization

This visualization displays the total greenhouse gas emissions for countries producing over 500 units in 2013, using a horizontal bar chart sorted in descending order. The SVG chart is built with D3 v4, using `d3.scaleBand` for the categorical country axis and `d3.scaleLinear` for the emissions axis, with axes rendered via `d3.axisBottom` and `d3.axisLeft`. Data comes from the WRI CAIT dataset, loaded from a CSV file, and filtered and sorted within the code.

Sep 26, 2017

Rob's Scatter Plot

This scatter plot displays the relationship between patient age and systolic blood pressure, with each point colored by gender. Built with D3.js v4, the visualization uses a linear scale for both axes and an ordinal color scale with a legend. Data from a CSV file of Dominican Republic patient records is rendered as SVG circles, with axis labels and a color legend generated using the d3-legend library.

Data Summary

This example displays a text-based summary of the Human Development Index dataset, which records HDI values for various countries from 1990 to 2015. It shows the total number of rows, columns, and file size, followed by a statistical breakdown of each column. The code loads the CSV file using `d3.csv`, then constructs the summary string by concatenating the table dimensions and the output of `dl.format.summary(data)` from the Datalib library, finally displaying it in a `<pre>` element.

Data Summary

This example displays a plain-text summary of a blood pressure dataset from patients in the Dominican Republic, showing the row count, column count, file size, and per-column statistical summaries. The code loads the data with `d3.csv`, formats the summary using Datalib's `dl.format.summary`, and appends it to the page as a `<pre>` element. It relies on D3 v4 and the Datalib library to parse and analyze the CSV file.

Data Summary

This example displays a text-based summary of a greenhouse gas emissions dataset, which includes the number of rows, columns, and file size, followed by a per-column statistical breakdown. The data is loaded from a CSV file using D3.js’s `d3.csv` method, and the summary is generated with the datalib library’s `dl.format.summary` function. The resulting text is rendered on the page using `d3.select('body').append('pre')` and also logged to the console.

Rob's scatter plot

Rob's scatter plot shows four points positioned by x and y values, with each point colored red or blue based on a categorical "cat" field. The plot uses D3 v4's `d3.scaleLinear` to map data coordinates to SVG pixel positions and renders circles with `g.selectAll("circle").data(data)`. Axis labels and scales are generated through `d3.axisBottom` and `d3.axisLeft`. The data is hardcoded in the script, and the SVG canvas is sized at 250 by 250 pixels with fixed margins.

Sep 18, 2017