100%

overall workflow

✓ Published0🌍 Public

Last edited Oct 9, 2017

Created on Oct 9, 2017

This example demonstrates the development workflow for creating and publishing interactive data visualizations. It uses a starter template with custom D3.js and lodash utilities, and shows how to generate random data, draw axes, and render circles with tooltips. The code includes a build process with command-line tools like `degit`, `hot-server`, `gistsnap`, and `gistup` for scaffolding, local previewing, screenshotting, and publishing to bl.ocks. The visualization itself is rendered as an SVG with a scatterplot of randomized points.

AI-generated description

Template for making new bl.ocks. d3_.js contains a custom of build of d3 with jetpack and lodash.

Make a new directory and copy this code with degit:

mkdir my-example-name && cd $_
degit 1wheel/d3-init

overall workflow

Let's Make a Block is a great introduction. I use a couple of additional tools:

# update node if you don't have >= 8
npm install -g n && n latest

# install cli helpers
npm install -g degit hot-server gistclone gistsnap gistup git-go

# pick a project name and make a directory
mkdir my-example-name && cd $_

# grab starter files
degit 1wheel/d3-init

# start a local server
hot-server

# write some code...

# take a screen shot
gistsnap

# publish
gistup -m basename "$PWD"

# update
git-go this is a commit message

# download
gistclone https://bl.ocks.org/1wheel/4b9d34d74bd64a63d34028f160a71d7b

Similar vizzes

Loading thumbnail…

random shell stuff

This example demonstrates a shell-scripting workflow for scaffolding interactive data-visualization projects, showing how to automate the setup of a project directory structure and download essential JavaScript libraries. The script creates nested folders for images, stylesheets, scripts, and CoffeeScript sources, then fetches libraries such as d3.js, polymaps.js, underscore.js, and backbone.js via curl. It also generates a CoffeeScript starter file and a Rakefile with a watch task for compiling CoffeeScript to JavaScript. The visualization itself is not rendered; instead, the code focuses on environment preparation and dependency management.

CCaged

72% match

Loading thumbnail…

HTML Starter

This visualization generates 50 random data points and renders them as circles in a scatterplot using SVG. It demonstrates a minimal HTML setup with D3 v6 and React, showing how to create axes, scales, and dynamic circle sizing based on data values. The code uses d3-scaleLinear, d3-scaleSqrt, d3.axisBottom, and d3.axisLeft to map random coordinates and apply a square-root scale for circle radii. Styling is applied through a separate CSS file, and the example serves as a starting template for more complex visualizations.

SST-commits

71% match

Loading thumbnail…

Document

The visualization generates a random sequence of twenty charts, cycling through line charts, pie charts, and bar charts. Each line chart displays four smoothed monotone curves with colored dots, while the pie chart and bar chart render categorical and time-based data. Built with D3 v4, the code uses `d3.line`, `d3.arc`, and `d3.axisBottom`/`d3.axisLeft` to produce SVG output. Data is procedurally generated using `d3.randomUniform` and `d3.range`, with each chart styled via inline attributes and CSS classes.

DDabbar

70% match

Loading thumbnail…

Gist 67b47524ed8ed829d021

This animated SVG visualization, rendered with D3.js, explores how geometric forms can be generated through code. The page loads a script called `circle-lattice.js` that draws a grid of small, semitransparent red rectangles, each with a faint stroke trail that animates to show their movement or placement over time. The layout is minimal—a single heading "Scripts" above the canvas—and the emphasis is on the lattice of shapes as they are built and possibly repositioned, revealing structural patterns through the animation. The visualization uses D3's data-binding and SVG rendering to create a dynamic, generative composition.

11wheel

69% match

Loading thumbnail…

D3 SVG Tutorial + D3 Animations Tutorial

This example combines SVG rendering with D3 animations by generating 50 random data points and plotting them as circles on a scatterplot with linear scales and axes. The visualization uses D3.js version 3.5.5 to create SVG elements, including circles, axes, and scales, while a button triggers animated transitions of the circles across the chart. The code includes both the SVG tutorial’s static chart construction and animation commands, though the author notes difficulty combining the two sections. Rendering occurs entirely through D3’s SVG API with interactive button controls.

JJamestiberiuseanes

68% match

Loading thumbnail…

First Gist... More to come

This example shows a simple scatter plot of ten randomly generated data points, with axis lines spanning the full width and height of the chart. The visualization uses D3 v3 to create SVG circles positioned by linear scales, while the x- and y-axes are drawn using `d3.svg.axis` with tick sizes matching the chart dimensions. The data is created inline with `Math.random()`, and the plot is centered on the page with a gray background and red circles.

AAlexDaGr8

67% match

Loading thumbnail…

HTML Starter

This example demonstrates a minimal setup for creating a browser-based visualization using D3.js within an HTML page. It renders a simple SVG element that is styled with a red background color using the d3.select API. The page loads D3 version 5 from a CDN and uses a basic script to apply the styling, showcasing the fundamental structure needed to begin building interactive data graphics. The code defines an SVG canvas with fixed dimensions but does not yet include any data-driven marks or transformations.

Aaudilite

67% match

Loading thumbnail…

Some tests with D3js

This example presents a blank SVG canvas within a simple HTML page, structured with two paragraph elements and a stylesheet that removes page margins. The core behavior is driven by a JavaScript file that references a commented-out CSV loading routine for automotive dataset attributes like mpg, cylinders, and horsepower, suggesting a planned but inactive data import pipeline. The visualization itself is minimal, relying on the D3.js v6 library loaded from a CDN, with no active rendering code currently executing. The setup demonstrates a scaffold for potential D3-based scatter plots or charts, though the actual visual output remains unimplemented.

Aalobry

67% match