diegobrivo

@diegobrivo·13 public vizzes

Line Time 2

The chart displays a stepped line tracing a time series of monthly values from a CSV file, with data points highlighted by large circles. The visualization renders to an SVG element, using D3 v7’s `scalePoint`, `scaleLinear`, `line`, and `curveStep` APIs to construct the path, alongside `axisBottom` and `axisLeft` for the axes. Data is loaded via `csv`, sorted by date, and mapped onto the scales with a 0.5 padding factor. A title text element sits above the plotting area.

Aug 13, 2022

Loading thumbnail…

Line Time

This scatter plot displays the relationship between horsepower and weight for cars in the Auto MPG dataset from the UCI Machine Learning Repository. The SVG render uses d3.csv to load the data, then d3.scaleLinear with extent to map values to screen coordinates, with axes drawn via d3.axisBottom and d3.axisLeft. Red semi-transparent circles mark each car, and contextual labels for the axes and title are added as SVG text elements.

Aug 13, 2022

Loading thumbnail…

Scatter Plot Now

This scatter plot displays monthly values over time, with each circle representing a data point from a small CSV dataset. The visualization uses D3 v7 APIs including `scalePoint`, `scaleLinear`, and `axisTop`/`axisLeft` to position points and render axes in an SVG. The code sorts data chronologically, parses numeric values, and applies a steelblue fill to circles, with a custom title text element added to the chart.

Aug 13, 2022

Loading thumbnail…

Bar Chart Attempt 1 now With Marging

This example shows a vertical bar chart of monthly values from a CSV file, with a title and axes. The bars are rendered as SVG rectangles, with the x-axis using a band scale for dates and the y-axis using a linear scale. The code explicitly implements chart margins by translating a group element, and uses `d3.axisTop` and `d3.axisLeft` to draw the axes. Data is loaded via `d3.csv` and sorted chronologically before rendering.

Aug 13, 2022

Loading thumbnail…

Fork of Fork of Shapes and Colors with SVG and CSS-- ME

This example shows a bar chart of monthly values from a CSV file, using SVG rectangles positioned along a time-based x-axis and a linear y-axis scaled to the data’s maximum. The code loads data with `csv` from D3 v7, then uses `scaleBand` and `scaleLinear` to map each row to a bar’s position and height. A data join appends `rect` elements to the SVG, relying on the coordinate system’s top-left origin. The chart is styled minimally with CSS, which sets default margins and stroke properties.

Aug 13, 2022

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shape creation and styling using D3.js v7. A large yellow circle with a black stroke is centered in the frame, alongside a rectangle and a semicircular arc path created with `d3.arc()`. The arc is drawn inside a `<g>` group translated to the svg's center. All shapes are rendered in an SVG container sized 960 by 500 pixels, with CSS applying stroke styles to line elements.

Aug 13, 2022

Loading thumbnail…

Fork of Pathetic Bar Chart

This example renders the top 10 most populous countries as a pathetic bar chart with no axes, using React to manage state and SVG for drawing. The code loads UN World Population Prospects 2019 data via `d3.csv`, then maps it with `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis. Each country appears as a plain `<rect>` element, with its width proportional to population, and a loading indicator displays until the data arrives.

Aug 12, 2022

Loading thumbnail…

Barchart

This bar chart shows population sizes for seven countries, with horizontal bars ordered from China down to Nigeria. The visualization uses d3.scaleLinear for the x-axis and d3.scaleBand for the y-axis to position each bar. Data is loaded from a CSV file using d3.csv, and the population values are multiplied by 1000 during preprocessing. The chart renders in an SVG container, appending rectangles for each data row with the bar width mapped to the population value.

Aug 12, 2022

Loading thumbnail…

Fork of Barchart pt2

This visualization displays a horizontal bar chart of population values from a CSV file, with bars rendered as rectangles scaled by population and positioned by categorical labels. The example uses d3.csv to load the data, then applies d3.scaleLinear for the x-axis and d3.scaleBand for the y-axis, both in d3 v5. Each row’s ARPA field is multiplied by 1000 before rendering. The SVG canvas is 960 by 500 pixels, and bars are appended dynamically with data joins using selectAll and enter.

Aug 12, 2022

Loading thumbnail…

Untitled

This example combines stacked bar charts and a step-after line graph to compare gas and electrical emissions (kgCO2) with normalized costs across properties. It uses D3 v3 with SVG rendering, reading data from a TSV file. The chart employs ordinal and linear scales, dual y-axes, and d3.svg.axis for ticks, while d3.svg.line defines the cost line with interpolation. Legend rectangles and value labels clarify the two categories.

Aug 11, 2022

Loading thumbnail…

Untitled

A stacked bar chart shows annual CO2 emissions for properties, with segments for gas and electrical sources, alongside a step-after line tracking normalized costs on a second axis. Data from a tab-separated CSV file includes property names, emission values, and cost metrics. The visualization uses d3.svg.axis for dual left and right axes, d3.scale.ordinal for property positioning, and d3.svg.line with step-after interpolation for the cost overlay. Dots mark the exact cost values, and a legend identifies the two emission categories.

Aug 11, 2022

Loading thumbnail…

Testarooni

This example renders a minimal static SVG scene inside an HTML page. It shows a single dark circle positioned on a light background, with a simple heading above the graphic. The visualization uses an inline SVG element set to 1000 by 600 pixels and draws the circle with the standard SVG `<circle>` tag, specifying center coordinates and radius. No JavaScript libraries or data sources are involved; the only API used is the SVG namespace for shape definition.

Aug 10, 2022

Loading thumbnail…

Fork of HTML Starter

This example shows a simple HTML page displaying “Hello Worlddd!” in a preformatted text element alongside a large “Hello HTML!” heading. It imports a hardcoded JSON array from the heyo.js module, parses it, and renders a JavaScript string to the DOM. The code uses vanilla CSS for styling and JavaScript’s `document.getElementById` to update page content.

Aug 10, 2022