jimacDS

@jimacDS·11 public vizzes

Let's make a face with D3.js!

A D3.js v5 example demonstrates how to create and update a row of fruit circles in an SVG, transforming them into a smiley face whose eyebrows move. It shows the data join pattern by entering, updating, and exiting circles. The code imports `select`, `range`, and `scaleOrdinal` from D3, using ordinal scales to map fruit types to colors and radii. Over timed `setTimeout` calls, it removes a fruit and changes one apple to a lemon, re-rendering the visualization each time.

Jun 19, 2020

Loading thumbnail…

World Population Area Chart

This area chart visualizes world population growth over time using a maroon-filled curve with a thick black stroke. The code loads CSV data, parses years as dates, and employs d3.area with a curveBasis generator to render the smooth path. Axes are created using d3.axisLeft and d3.axisBottom, with formatted tick labels from d3.format. The SVG rendering relies on d3.scaleTime and d3.scaleLinear, and the chart includes labeled axes and a centered title.

Jun 19, 2020

Loading thumbnail…

Temp in SF Linechart

This line chart visualizes temperature readings across a week in San Francisco, using a smooth curved line to connect data points over time. The chart includes labeled axes for time and temperature, with gridlines and a title. Built with D3 v5, the code uses `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and a `line` generator with `curveBasis` to render the SVG path. Data is loaded from a CSV file hosted on VizHub, and the visualization omits individual data point circles.

Jun 18, 2020

Loading thumbnail…

Making Cars Scatterplot

This scatterplot displays the relationship between horsepower and weight for various car models, with each red, semi-transparent circle representing a single vehicle. The chart uses D3 version 5 APIs including `scaleLinear`, `axisBottom`, `axisLeft`, and `extent` to construct the axes and scale the data. The data is loaded via `csv` from an external auto-mpg dataset, and the SVG rendering shows gridlines, axis labels, and a title, all styled with custom CSS.

Jun 17, 2020

Loading thumbnail…

Making a Scatterplot

This scatterplot displays the populations of the top 10 most populous countries, with each country as a categorical point on the y-axis and population on the linear x-axis. The visualization uses d3.csv to load population data, then applies d3.scaleLinear and d3.scalePoint for positioning, along with d3.axisLeft and d3.axisBottom for labeled grids. Circles are rendered as SVG elements with a steelblue fill, and population values are formatted in billions using d3.format, with a title annotating the chart.

Jun 17, 2020

Loading thumbnail…

Making a Bar Chart

This visualization displays a horizontal bar chart ranking the top ten most populous countries, with population values on the x-axis and country names on the y-axis. The bars render in steel blue, and the chart includes formatted axis labels and a title. Built with D3 v5, the code uses `d3.csv` to load data, `scaleLinear` and `scaleBand` for scaling, and `axisLeft` and `axisBottom` for axes, with SVG as the rendering target. Population data from the CSV is multiplied by 1000 for display.

Jun 17, 2020

Loading thumbnail…

Making a Bar Chart

A horizontal bar chart ranks the ten most populous countries using a CSV data source. The visualization applies a linear scale for population and a band scale for country names, rendering bars as SVG rectangles filled with steelblue. Built with D3 v5, the code loads data via `d3.csv`, computes scales with `scaleLinear` and `scaleBand`, and displays axes using `axisLeft` and `axisBottom`.

Jun 16, 2020

Loading thumbnail…

Responding to Resize

This example demonstrates how a D3.js v5 visualization can respond dynamically to browser window resizing. It uses a full-screen chart container and redraws an SVG element to match the container’s current pixel dimensions, displaying a green X composed of two thick lines. The code leverages `d3.select`, `svg.attr`, and a window `resize` event listener to update the drawing. The visualization extracts dimensions via `clientWidth` and `clientHeight`, ensuring the SVG scales proportionally with the viewport.

Jun 15, 2020

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face composed of SVG shapes uses D3.js to demonstrate fundamental DOM manipulation. The face includes a circular head, eyes, rectangular eyebrows, and a mouth drawn with the `d3.arc` path generator. The eyebrows animate via chained `transition` calls, moving down and back up over two seconds, with transforms applied to a group element. The code selects the SVG, appends groups and shapes dynamically, and uses D3 v5 to manage attribute updates and timed transitions.

Jun 15, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how CSS can be used to style SVG shapes, showing circles, rectangles, lines, and a path within a scaled and translated group. It renders shapes with default black fill, colored fills like red and green, and a grouped set with a light blue fill and black stroke. The `.lines` class applies a thick stroke to lines and paths, with the path receiving a separate dark blue color and rounded joins via CSS selectors. The implementation uses an inline SVG in `index.html` with a linked `styles.css`, employing the `<g>`, `<circle>`, `<rect>`, `<line>`, and `<path>` elements.

Jun 12, 2020

Loading thumbnail…

Untitled

This example presents a simple HTML cars report that lists three vehicles with their model years and prices. It demonstrates basic DOM structure using an unordered list with inline text content, where the 2012 Nissan Leaf is visually emphasized through a red highlighted class. The page renders with large monospace typography via CSS styles that affect body text and the highlighted item. The code uses plain HTML and CSS with no JavaScript libraries, relying solely on static markup and a separate stylesheet for presentation.

Jun 12, 2020