Evan Chang

@MistrBrown·11 public vizzes

LETS FRIGGEN MAKE A FACE DUDE

Five red circles form a simple face-like row across an SVG canvas using D3 version 5. The example demonstrates data joins: initial render binds an array of fruit objects, then removes the last element after one second via `selection.exit().remove()`. The code uses `d3.select`, `d3.range`, and explicit `attr` assignments for circle positions and fill, with hardcoded coordinates and a fixed radius. No interaction or animation beyond the timed data update is shown.

Feb 20, 2020

Loading thumbnail…

WORLD POPULATION IMPROVED AREA BABY

This chart visualizes world population over time using an area chart, with time on the x-axis and population on the y-axis, presented in billions. The data comes from a CSV file loaded via `d3.csv`, with dates parsed into JavaScript `Date` objects. The visualization uses `d3.scaleTime`, `d3.scaleLinear`, and `d3.area` with a `curveBasis` smoothing, while axes are generated with `d3.axisBottom` and `d3.axisLeft`. The SVG rendering includes a maroon filled area, axis gridlines, and a title, all styled with CSS.

Feb 20, 2020

Loading thumbnail…

AREA CHART BABY

This area chart shows how car temperature varies over time in San Francisco, with a smooth curved line filled in maroon beneath it. The visualization uses d3.area with curveBasis to generate the path, d3.scaleTime and d3.scaleLinear for the axes, and d3.axisBottom and d3.axisLeft to render ticks and gridlines. Data loads from a CSV via d3.csv, and the SVG rendering includes labeled axes and a title.

Feb 20, 2020

Loading thumbnail…

LINE AND AREA CHART BABY

This example visualizes the relationship between time and temperature for a set of cars using an SVG line chart. The data is loaded from a CSV file using `d3.csv`, with timestamps parsed into `Date` objects and temperatures into numbers. The visualization employs `d3.scaleTime` and `d3.scaleLinear` for the axes, and draws a smooth curve using `d3.line` with `curveBasis`. The chart includes labeled axes, gridlines, and a title, with styling applied via CSS classes.

Feb 20, 2020

Loading thumbnail…

SCATTERPLOT BABY

This scatterplot displays the relationship between horsepower and weight for a dataset of cars, with each point representing a vehicle. The visualization uses D3 v5’s `scaleLinear` and `extent` functions to map data values to pixel coordinates, while `axisBottom` and `axisLeft` generate labeled axes with gridlines. Data is loaded asynchronously via `csv` from a VizHub-hosted dataset. Circles are appended to an SVG container, styled with a steelblue fill and opacity, and the chart includes a title and rotated y-axis label for clarity.

Feb 20, 2020

Loading thumbnail…

CUSTOMIZING AXES YO

A horizontal bar chart displays population figures for the ten most populous countries, with values read from a CSV file and scaled using `d3.scaleLinear` and `d3.scaleBand`. The chart customizes both axes: the bottom axis uses `d3.axisBottom` with tick formatting that converts large numbers to billions via `d3.format`, while the left axis removes tick lines through `axisLeft`. Axis labels and a title are added as SVG text elements, and bars are rendered as SVG `<rect>` elements with steelblue fill.

Feb 19, 2020

Loading thumbnail…

BARCHART BABY

A horizontal bar chart ranks the ten most populous countries by estimated 2018 population, using d3.csv to load the data and d3.scaleLinear and d3.scaleBand to map population and country names to bar widths and vertical positions. The bars are SVG rects with a steelblue fill, axes are generated with d3.axisBottom and d3.axisLeft, and the chart is rendered inside a 960-by-500 SVG element with margins.

Feb 19, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates a minimalist SVG visualization that renders an empty 960×500 canvas with a red background, applied via CSS styling through the D3.js `select` API. The visualization uses the React framework to initialize the SVG element, which is styled using D3’s `svg.style` method to set the background color. The rendering approach relies on static SVG markup combined with D3 v5 to manipulate the document object model, showcasing the integration of D3 with React for simple graphic compositions.

Feb 19, 2020

Loading thumbnail…

Shape with SVG and CSS

A lone circle fills a 960-by-500 SVG canvas, demonstrating how a single SVG `<circle>` element with a large radius (`r="400"`) is styled entirely through an external CSS file. The example shows the interplay between SVG geometry and CSS styling rules, with the circle’s fill, stroke, or other visual properties defined in `style.css` rather than inline attributes. This minimal setup highlights how CSS can control SVG presentation, using the browser’s native SVG rendering support without any JavaScript libraries. The code relies solely on standard SVG markup and CSS, making it a pure HTML/CSS demonstration.

Feb 19, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles and rectangles—styled directly with CSS and inline attributes. It shows how shape properties like position, size, fill color, stroke, and grouping via the `<g>` element affect rendering. The visualization uses raw SVG markup within an HTML page, with external styling from `styles.css`. A grouped set of shapes applies a shared fill color and stroke, while individual shapes use explicit `fill` values such as red and hex codes. No JavaScript libraries are involved; rendering is purely declarative SVG.

Feb 19, 2020

Loading thumbnail…

Lets Make a Face with D3 Format

This example draws a simple cartoon face using SVG elements created with D3.js. It shows a yellow circle as the head, two red circles for eyes, and an arc-based path for the mouth, all positioned relative to the SVG’s center. The code uses D3’s `select` to target an SVG element, `arc` to generate the mouth shape, and `.attr` methods to set coordinates and radii. The styling is applied directly via `.style`, with the face centered using a translation transform.

Feb 19, 2020