bart

@hi-bart·26 public vizzes

playground #2

This example shows a donut chart with three randomly sized and colored slices rendered as SVG paths. The code uses React to build the component, while D3 v7 provides the `pie` generator and `arc` generator to compute the angular layout and path geometry. Slice values come from `d3.randomUniform`, and each color is generated as a random hexadecimal string. The chart is centered in a fixed 900 by 600 viewport with an inner radius of 60 and outer radius of 200.

Jul 24, 2021

Loading thumbnail…

random generator

Ten randomly positioned orange circles on a grey scatter plot animate to new coordinates whenever a “change data” button is clicked. The circles pulse by expanding and contracting their radius, and their fill color briefly shifts to red during the transition. Built with React and D3 v7, the visualization uses `d3.scaleLinear` for axes, `d3.randomUniform` for generation, and chained `transition` calls with an `easeSin` easing function. All rendering is SVG with animated updates.

Jul 24, 2021

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a bar chart with no axes, using a React component that loads data from the United Nations World Population Prospects 2019. The app fetches CSV data via d3.csv, then uses d3.scaleBand for the y-axis country labels and d3.scaleLinear for the x-axis population values. It renders SVG rectangles for the bars and includes gridlines from d3's tick labels, though no axis titles or tick marks are drawn. The chart updates only after the data loads, showing a loading message initially.

Jul 19, 2021

Loading thumbnail…

Fork of React + D3 Viz Starter

This interactive scatterplot visualizes the Iris dataset, allowing users to select which attributes to compare on the x- and y-axes via dropdown menus. The SVG rendering uses React state to manage the selected axes and a D3 ordinal color scale to distinguish the three species. Hovering over the color legend highlights points belonging to that species by reducing the opacity of others. The chart follows the margin convention and displays axis tick lines using D3 scales.

Jul 18, 2021

Loading thumbnail…

lines

This example shows monthly COVID-19 case counts from the New York Times rolling-averages dataset as a line chart with circular markers, rendered as SVG using React and D3 v7. The code aggregates daily data by month using `d3.rollup` and `d3.sum`, scales time and linear values with `d3.scaleTime` and `d3.scaleLinear`, and draws the line with `d3.line`. A `d3.brushX` brush overlay is attached to the chart, logging selected date ranges to the console, while axes are generated by custom React components.

Jul 8, 2021

Loading thumbnail…

Fork of Polished World Map

This example displays a world map with country boundaries, using a cylindrical equal-area projection. The map renders graticules, land masses, and interior country borders as SVG paths, built from World Atlas TopoJSON data. The code uses React for component structure, `d3.geoPath` for path generation, `d3.geoCylindricalEqualArea` for projection, and `topojson` utilities to convert TopoJSON into GeoJSON features and mesh boundaries. The styling applies a red sphere, grey interiors, and black graticules.

Jul 7, 2021

Loading thumbnail…

line v2

This interactive scatter plot visualizes the Iris Dataset, showing the relationship between petal length and sepal width. Built with React and D3 v5, it renders SVG circles colored with a teal fill. The visualization uses `scaleLinear` for both axes, `extent` to compute domains, and custom `AxisBottom` and `AxisLeft` components to display tick marks. The code loads CSV data through a `useData` hook and applies a custom `siFormat` for axis labels, with Poppins typography styling the chart.

Jul 5, 2021

Loading thumbnail…

Fork of React Starter

This example shows a React-based interactive dropdown menu that lets a user select a phrase, which is then displayed prominently in large purple text. The app uses the React and ReactDOM libraries, with a `Dropdown` component managing the selection state through the `useState` hook. When an option is chosen, the `onChange` event updates the displayed value, which is logged to the console. The data originates from a hardcoded array of three string options.

Jun 24, 2021

Loading thumbnail…

Fork of Stylized Scatter Plot

This fork of a stylized scatter plot visualizes the Iris Dataset, plotting petal length against sepal width for individual flowers. The React and D3 v5 application uses `scaleLinear` for axes with formatted tick labels, rendering data points as circles through the custom `Marks` component. The visualization includes axis labels and a loading state, styled with the Poppins font.

Jun 17, 2021

Loading thumbnail…

Fork of Pathetic Bar Chart2

This example displays the top 10 most populous countries as a horizontal bar chart, with no axes or labels, using country names as categorical bands and population counts mapped to bar widths. The code loads UN World Population Prospects 2019 data via `d3.csv`, parses the 2020 population column, and slices the first ten rows. It renders SVG rectangles using React components and D3 scales: `scaleBand` for the y-axis positioning and `scaleLinear` for the x-axis extent, with dimensions fixed at 960 by 500 pixels.

Jun 16, 2021

Loading thumbnail…

Fork of Rendering Data with React & D3

This example displays CSS named colors as a horizontal stacked bar chart, where each color appears as a thin stripe in sequence. The visualization uses React to manage component state and rendering, while D3’s `csv` utility loads the color data from a remote GitHub gist. Data is fetched asynchronously with React’s `useEffect` and `useState` hooks, and the hex color values directly set each stripe’s background color. The code also includes commented-out logic for computing radial arcs using D3’s `arc` and `pie` functions, though the active rendering uses simple divs.

Jun 11, 2021

Loading thumbnail…

Fork of Loading Data with React & D3

This example demonstrates how to load CSS named colors data from a remote CSV URL and display a simple message summarizing the data, such as the number of columns. The visualization relies on React's `useState` and `useEffect` hooks to manage the asynchronous data loading process, while D3's `csv` utility fetches and parses the dataset. Once the data arrives, the application renders the summary message using a custom `message` function, and the output is displayed inside a large `<pre>` element.

Jun 11, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote URL using D3.js version 6. It fetches the CSS Named Colors dataset and displays the number of rows and columns in the data. The visualization uses the `d3.csv` method to asynchronously retrieve and parse the CSV file, with the results rendered as large text in an HTML pre element. The code also includes a commented-out alternative approach using the `fetch` API and `d3.csvParse`.

Jun 10, 2021

Loading thumbnail…

Fork of Let's Make a Face Part II

This interactive React and D3.js example displays a smiley face composed of SVG circles, including a large yellow face, two eyes, and a mouth arc. A separate circle tracks the mouse position across the canvas, its radius dynamically recalculated based on the cursor’s distance from the center. The code uses `useState` for mouse tracking and `d3.arc` to render the mouth. The face’s eyes and main circle are defined as reusable React components, with the overall layout fixed at 1000 by 500 pixels.

Jun 10, 2021

Loading thumbnail…

Fork of Smiley Face Part VI

A grid of 18 randomly generated smiley faces, each with varied facial features, demonstrates reusable React components for scalable vector graphics. The code composes `FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth` components, with the mouth drawn using the D3 `arc()` generator. Each face is rendered as an SVG element within the React tree, using ES6 modules and randomized parameters for stroke width, eye offset, eye radius, and mouth dimensions.

May 29, 2021

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart displays one week of temperature in degrees Celsius for San Francisco, with data sourced from Data Canvas - Sense Your City. The visualization plots monthly time points against temperature values on a smooth maroon curve, using an SVG rendering approach within a 960 by 500 viewport. The implementation relies on D3 v5 utilities including `scaleTime`, `scaleLinear`, `line`, `curveBasis`, and `axisLeft`/`axisBottom` for axes, while parsing date strings via `timeParse`. The chart includes styled axis ticks and a filled circle layer commented out in the code.

Aug 1, 2019

Loading thumbnail…

Temperature in San Francisco Line Chart

A line chart displays one week of temperature data in San Francisco, with time on the x-axis and degrees Celsius on the y-axis. The visualization includes labeled axes and a smooth curve connecting the data points. Built with D3 v5, the code uses `d3.csv`, `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render the SVG chart. The dataset originates from Data Canvas - Sense Your City, a public sensor project.

Aug 1, 2019

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart visualizes one week of temperature in San Francisco, with the data sourced from Data Canvas - Sense Your City and plotted using an SVG rendered with D3.js. It shows the temperature trend over time, using a maroon curved line on a white background with labeled axes and a title. The implementation imports specific D3 modules like `scaleLinear`, `scaleTime`, `axisLeft`, `axisBottom`, and `curveBasis`, and loads the CSV data via `d3.csv`. The chart is part of an educational video demonstrating the build process.

Aug 1, 2019

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG dataset. Each point represents a car, with its position determined by the d3 `scaleLinear` mappings for the x and y axes. The plot uses red, semi-transparent circles, overlaid to show density. The code employs d3’s `csv` loader to fetch the data, and constructs the chart with SVG elements. Axes are rendered via `axisBottom` and `axisLeft`, with a title and axis labels added as text elements.

Jul 31, 2019

Loading thumbnail…

Customizing Axes

This example displays the top 10 most populous countries in 2018, based on United Nations data, using a circle-based bar chart. It highlights axis customization through D3 v5’s `axisLeft` and `axisBottom` scales, with a linear scale for population and a point scale for country names. The SVG rendering includes custom tick sizes, removed domain lines, and styled text, while the data is loaded from a CSV file.

Jul 30, 2019

Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 most populous countries based on 2018 United Nations data, with a dropdown selector that highlights a chosen country in orange. Customized D3 axes show population values in abbreviated format on the x-axis and country names on the y-axis, with gridlines and margins adjusted. The example uses d3.axisBottom, d3.axisLeft, d3.scaleBand, d3.scaleLinear, and d3.format to handle the data-driven rendering.

Jul 28, 2019

Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. The visualization emphasizes axis customization, with large tick labels and styled axis lines. The code uses D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render the SVG chart. Population values are formatted from the CSV data, and the chart builds on a simpler bar chart example.

Jul 28, 2019

Loading thumbnail…

Customizing Axes

This bar chart shows the top 10 most populous countries in 2018, based on United Nations World Population Prospects data, with a focus on customized axes. It builds on a basic bar chart by applying `d3.axisBottom` with a custom tick formatter for compact notation, and positions the axis using a transform. The chart uses `d3.scaleLinear` for population and `d3.scaleBand` for countries, rendering bars as SVG `rect` elements with custom CSS styling for ticks and labels.

Jul 25, 2019

Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries from the 2018 United Nations World Population Prospects estimate, with each bar colored on a red-yellow-red gradient using a d3.scaleLinear sequential scale. The visualization demonstrates customizing D3 axes by using d3.axisBottom for the x-axis with formatted tick labels, while d3.axisLeft is omitted, and custom CSS styles the tick text, lines, and axis label. The chart also includes a title and uses d3.csv to load the data, scaling the population values by 1,000.

Jul 23, 2019

Loading thumbnail…

Shapes and Colors with SVG and CSS

An SVG canvas displays geometric shapes and colors. The example demonstrates how to style SVG elements using CSS, with the `index.html` file containing an empty `<svg>` element and the `styles.css` file defining visual properties. The rendering approach uses native SVG markup and CSS rules to control the appearance of shapes on the 960-by-500-pixel canvas.

Jul 21, 2019

Loading thumbnail…

Hello VizHub

This example demonstrates how to display a simple text message using D3.js within a VizHub project. It imports the `select` function from D3 to target the `#message` div and insert text composed from local ES6 modules. The message is generated by mapping over an array of minion objects from `minions.js`, where each item's `pies` property is formatted into a string via the `getPies` helper from `myMessage.js`. The page applies a dark blue background and large Ubuntu font via CSS.

Jul 20, 2019