BlakeMcMurray

@BlakeMcMurray·13 public vizzes

Cheap Tricks with D3.js

This example visualizes a world map using D3.js, rendering an interactive SVG with countries colored in light green and a blue sphere. It loads world atlas data from the `world-atlas` package, merging TopoJSON geometry with TSV metadata to display country names as tooltips. The code uses `d3.geoPath`, `d3.geoNaturalEarth1`, and `topojson.feature` to project and draw the map, while `d3.zoom` enables panning and zooming.

Feb 6, 2021

Loading thumbnail…

Fork of Fork of Color and Size Legends

Two adjustable legends, one for color and one for size, are rendered in a single SVG. The color legend maps a categorical scale to a column of labeled circles, while the size legend uses a square-root scale to show proportionally sized bubbles with tick values. The reusable `colorLegend` and `sizeLegend` functions drive the SVG generation, leveraging d3's scale functions and selection merging to update the display.

Feb 1, 2021

Loading thumbnail…

Fork of Color and Size Legends

This example demonstrates two reusable legend components rendered with SVG: a color legend mapping fruit categories to distinct hues, and a size legend visualizing a square-root scale from zero to ten with five labeled ticks. The color legend uses `scaleOrdinal`, while the size legend relies on `scaleSqrt` and `ticks()` to generate values. Both components are built with D3 v5’s `selection.enter` and `merge` pattern, applying circle radii, fill colors, and text offsets through `attr` and `text` operations. A video tutorial accompanies the code, showing interactive creation in the browser.

Feb 1, 2021

Loading thumbnail…

Fork of Color and Size Legends

This example shows custom legends for both ordinal color scales and quantitative size scales, rendered as SVG groups. The color legend maps fruit names to distinct hues, while the size legend uses a square-root scale to map numeric values to circle radii, with ticks generated by `scaleSqrt.ticks()`. Both legends are built by entering and merging `g.tick` elements, positioning circles and text with `attr('transform')` and `attr('x')`. The code uses d3 v5 APIs including `scaleOrdinal`, `scaleSqrt`, and selection methods like `merge` and `exit().remove()`.

Feb 1, 2021

Loading thumbnail…

Fork of Customizing Axes

This bar chart visualizes the populations of the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects. It demonstrates customizing D3 axes by removing default lines, adding tick marks with abbreviated number formats, and styling labels with CSS. The code uses `d3.csv`, `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to render the SVG chart. Population values are multiplied by 1000, with tick labels formatted using D3’s number formatting.

Jan 30, 2021

Loading thumbnail…

Fork of Temperature in San Francisco Line Chart

This line chart displays one week of temperature in degrees Celsius for San Francisco, with time on the x-axis and temperature on the y-axis. The visualization uses d3.scaleTime and d3.scaleLinear to map data points, with d3.line and curveBasis drawing a smooth path. The code leverages d3.axisBottom and d3.axisLeft for labeled axes, and the data originates from Data Canvas - Sense Your City, loaded via d3.csv.

Jan 30, 2021

Loading thumbnail…

Fork of Choropleth Map

This example shows a natural Earth choropleth map where each country is colored by its economy category from a global dataset. Users can pan and zoom through the SVG map using d3.zoom, while a color legend built with ordinal scales and schemeSpectral displays the available classifications. The visualization loads TopoJSON world-atlas data, joins TSV attributes, and renders countries via d3.geoPath with hover effects that highlight individual states.

Jan 30, 2021

Loading thumbnail…

Let's Make a Bar Chart

This example demonstrates a horizontal bar chart of population data for the ten most populous countries, using SVG rectangles scaled proportionally to each country’s population. The visualization imports `csv`, `scaleLinear`, and `scaleBand` from d3 to parse the data and map values to width and band positions. The code loads data.csv, converts population numbers by multiplying by 1000, and appends rectangles to the SVG canvas with widths driven by the linear scale.

Jan 21, 2021

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates how to assemble a minimal D3.js visualization within the VizHub platform. It loads D3 v5 from a CDN and uses the `select` API to target a DOM element, setting its text content. The project also showcases local ES6 module imports, with a custom message string defined in a separate file and rendered inside an HTML div. The styling is handled by a linked CSS file, which centers the text and sets a large font size for display.

Jan 20, 2021

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to render shapes in an SVG canvas with CSS styling. It loads D3 through UNPKG and uses an SVG circle element with a radius set to 100 pixels. The stylesheet defines a basic body reset and a highlighted class that changes text color to red, though the circle itself does not currently apply this class. The visualization shows the structure for combining raw SVG markup with external styling rules.

Jan 20, 2021

Loading thumbnail…

Fork of HTML Starter

This example presents a minimal HTML page that demonstrates the integration of CSS and JavaScript within a single document. The page displays the static text “Hello HTML” using a large, centered font size defined in a `<style>` block. The JavaScript included in a `<script>` tag logs “Hello JavaScript!” to the browser’s console, showcasing basic scripting functionality. It serves as a barebones starter template, referencing the React Starter for more advanced setups.

Jan 20, 2021

Loading thumbnail…

Fork of Cars Report

This example demonstrates a modular JavaScript application that fetches car listings and filters them by price. It shows how asynchronous data loading, array filtering, and string formatting can be composed into a simple report. The code uses native JavaScript promises and `setTimeout` to simulate a delayed API call, while `JSON.parse` handles the embedded JSON dataset. The report output is rendered as text into the DOM via `document.getElementById`. Modules are organized with ES6 `import` and `export` statements, with the report generation split into separate functions for formatting and filtering.

Jan 13, 2021

Loading thumbnail…

Untitled

This example shows a bare-bones HTML page with embedded CSS and JavaScript, displaying the text “Hello HTML” in the browser. It demonstrates the minimal structure for a web page, with JavaScript logging “Hello JavaScript!” to the browser’s developer tools console. The code uses standard HTML elements and a script tag with plain JavaScript, specifically the `console.log` API, serving as a starting point for integrating frameworks like React. The page’s styling is minimal, relying on the default browser presentation without external libraries or data sources.

Jan 13, 2021